Riverpod數(shù)據(jù)共享也是使用了InheritedWidget,在項(xiàng)目中,runapp外層要嵌套一個(gè)ProviderScope

void main() {
  runApp(
    ProviderScope(
      child: MyApp(),
    ),
  );
}

而ProviderScope是個(gè)StatefulWidget,在State build方法中,使用了UncontrolledProviderScope

image.png

image.png

image.png

riverpod提供的是頂層的InheritedWidget來管理所有的狀態(tài),很容易想到ProviderContainer中應(yīng)該是有個(gè)Map來存儲(chǔ)所有的狀態(tài),所有狀態(tài)保存在頂層,下層組件想要使用狀態(tài),通過頂層的InheritedWidget獲取ProviderContainer來使用
riverpod里邊一個(gè)很特別的對象就是ref,在provider(指的riverpod中的狀態(tài))中有ref,在Consumer中也有一個(gè)ref,但是這兩個(gè)ref是不一樣的類型,這里也要說一下riverpod中的provider會(huì)有對應(yīng)的element,所以可以簡單的理解
provider 中的ref是providerElement
Consumer 中的ref是widgetElement,也就是說context可以被強(qiáng)制轉(zhuǎn)化成ref
關(guān)于providerElement可以類比widget與element的關(guān)系,provider只是一個(gè)配置類,providerElement才是真實(shí)的狀態(tài)管理類,只有providerElement創(chuàng)建才會(huì)產(chǎn)生真正的狀態(tài),所以在Riverpod中經(jīng)常會(huì)看見類似這樣的代碼

final counterStateProvider = StateProvider<int>((ref)=>0)

StateProvider可能會(huì)被提前創(chuàng)建出來,但是真正的狀態(tài)被創(chuàng)建,會(huì)在真正使用的時(shí)候
所以不必?fù)?dān)心全局創(chuàng)建的provider
這里還是要做一個(gè)類比
InheritedElement與WidgetElement的關(guān)系與ProviderElement與ConsumerStatefulElement
InheritedElement中有_dependents,WidgetElement中有_dependencies
ProviderElement中有_dependents,ConsumerStatefulElement中有_dependencies
他們的含義是一樣的_dependents代表哪些組件注冊了刷新回調(diào),_dependencies代表組件在哪些狀態(tài)中注冊了回調(diào),有點(diǎn)繞,但是要理解
上邊說了在頂層有一個(gè)保存所有狀態(tài)的InheritedWidget,但是具體如何操作組件刷新的呢?
類比Provider狀態(tài)管理,Riverpod也提供了兩個(gè)方法read 和watch,含義是一樣的read是用來讀數(shù)據(jù),watch不僅用來讀也用來注冊刷新回調(diào)
在ConsumerWidget中使用的ref我們上面說到是widget的element,我們執(zhí)行ref.watch(countProvider)的時(shí)候

@override
Res watch<Res>(ProviderListenable<Res> target) {
  _assertNotDisposed();
  return _dependencies.putIfAbsent(target, () {
    final oldDependency = _oldDependencies?.remove(target);

    if (oldDependency != null) {
      return oldDependency;
    }

    return _container.listen<Res>(
      target,
      (_, __) => markNeedsBuild(),
    );
  }).read() as Res;
}

_container就是頂層的ProviderContainer
_dependencies用來存放_container監(jiān)聽之后的ProviderSubscription,類比StreamSubscription,如果當(dāng)前的element從element tree移除后,可以移除掉在_container中注冊的刷新回調(diào)

@override
ProviderSubscription<State> listen<State>(
  ProviderListenable<State> provider,
  void Function(State? previous, State next) listener, {
  bool fireImmediately = false,
  void Function(Object error, StackTrace stackTrace)? onError,
}) {
  return provider.addListener(
    this,
    listener,
    fireImmediately: fireImmediately,
    onError: onError,
    onDependencyMayHaveChanged: null,
  );
}

最終走到Provider的addListener 方法 node.readProviderElement(this)本質(zhì)就是找到ProviderElement,這里其實(shí)也發(fā)現(xiàn)了ProviderElement與WidgetElement的一一對應(yīng)的關(guān)系是_ProviderStateSubscription來管理的

_ProviderStateSubscription(
  super.source, {
  required this.listenedElement,
  required this.listener,
  required this.onError,
}) {
  final dependents = listenedElement._dependents ??= [];
  dependents.add(this);
}

構(gòu)造函數(shù)可以看到_dependents添加了Subscription,也就是添加了組件的刷新回調(diào),provider中的狀態(tài)變化的時(shí)候可以遍歷_dependents來刷新UI組件,實(shí)際也是這樣做的

void _notifyListeners(
    Result<StateT> newState,
    Result<StateT>? previousStateResult, {
    bool checkUpdateShouldNotify = true,
  }) {
  
  ...
  
    final listeners = _dependents?.toList(growable: false);
    newState.map(
      data: (newState) {
        if (listeners != null) {
          for (var i = 0; i < listeners.length; i++) {
            final listener = listeners[i];
            if (listener is _ProviderStateSubscription) {
              Zone.current.runBinaryGuarded(
                listener.listener,
                previousState,
                newState.state,
              );
            }
          }
        }
      },
      error: (newState) {
        if (listeners != null) {
          for (var i = 0; i < listeners.length; i++) {
            final listener = listeners[i];
            if (listener is _ProviderStateSubscription<StateT>) {
              Zone.current.runBinaryGuarded(
                listener.onError,
                newState.error,
                newState.stackTrace,
              );
            }
          }
        }
      },
    );

    ...
  }

用StateProvider舉例,在我們調(diào)用ref.read(countProvider.notifier).state++ 的時(shí)候會(huì)執(zhí)行listenerEntry.listener(value)

set state(T value) {
  assert(_debugIsMounted(), '');
  final previousState = _state;
  _state = value;

  final errors = <Object>[];
  final stackTraces = <StackTrace?>[];
  for (final listenerEntry in _listeners) {
    try {
      listenerEntry.listener(value);
    } catch (error, stackTrace) {
      errors.add(error);
      stackTraces.add(stackTrace);

      if (onError != null) {
        onError!(error, stackTrace);
      } else {
        Zone.current.handleUncaughtError(error, stackTrace);
      }
    }
  }
  if (errors.isNotEmpty) {
    throw StateNotifierListenerError._(errors, stackTraces, this);
  }
}

最終會(huì)調(diào)用到ProviderElement的setState,然后調(diào)用_notifyListeners

void setState(StateT newState) {
  assert(
    () {
      _debugDidSetState = true;
      return true;
    }(),
    '',
  );
  final previousResult = getState();
  final result = _state = ResultData(newState);

  if (_didBuild) {
    _notifyListeners(result, previousResult);
  }
}

而setState是在ProviderElement創(chuàng)建的時(shí)候就進(jìn)行了注冊

void create({required bool didChangeDependency}) {
  final provider = this.provider as _StateProviderBase<T>;
  final initialState = provider._create(this);

  final controller = StateController(initialState);
  _controllerNotifier.result = Result.data(controller);

  _removeListener = controller.addListener(
    fireImmediately: true,
    (state) {
      _stateNotifier.result = _controllerNotifier.result;
      setState(state);
    },
  );
}

Riverpod實(shí)際做的對系統(tǒng)InheritedWidget的優(yōu)化,讓狀態(tài)從組件數(shù)中抽離出來,
InheritedWidget時(shí)代,狀態(tài)和組件本身就是一個(gè)東西(InheritedElement就是個(gè)特殊的WidgetElement),自己管理自己的狀態(tài),也就導(dǎo)致他嚴(yán)重依賴組件樹的結(jié)構(gòu),如果兩個(gè)處于不同分支下的狀態(tài)想要相互調(diào)用是不可以的,但是Riverpod對他們進(jìn)行了拆分,狀態(tài)單獨(dú)出來,并且通過索引保存在最頂層,這樣既保持了狀態(tài)和組件的1對1的關(guān)系,又實(shí)現(xiàn)了不同分支下的狀態(tài)之間的相互調(diào)用