React Hooks——useState的源码流程

React Hooks——useState

源码版本

16.8

useState

流程示意图

ReactHooks_useState.png

从useState源码查看，最终会发现其实调用的是ReactCurrentDispatcher.current。
初始化是null,类型是Dispatcher(具体可以查看源码)

const ReactCurrentDispatcher = {
  /**
   * @internal
   * @type {ReactComponent}
   */
  current: (null: null | Dispatcher),
};

export default ReactCurrentDispatcher;

Dispatcher是类型，并不是具体的对象，具体的对象是初始化时才会生产的。
也就是在Function组件执行时会产生，即调度更新执行了。

• 即updateContainer->...->beginWork
• beginWork中会根据当前要执行更新的fiber的tag来判断执行什么，因为为函数式组件，所以执行了updateFunctionComponent
• 在updateFunctionComponent中，执行了renderWithHooks，这个方法中就会初始化Dispatcher
• 在renderWithHooks中，会先根据fiber的memoizedState是否为null，来判断是否已经初始化了，因为memoizedState在函数式组件中是存放hooks的。是则mount，否则update
• 在mount时，Component(props, refOrContext):函数式组件执行，HooksDispatcherOnMount被调用,会初始化hooks链表、initialState、dispatch函数，并返回。这里就完成了useState的初始化,后续函数式组件继续执行，完成渲染返回。
• 在update时，Component(props, refOrContext):函数式组件执行，HooksDispatcherOnUpdate被调用，updateWorkInProgressHook用于获取当前work的Hook。然后根据numberOfReRenders 是否大于0来判断是否处理re-render状态：是的话，执行renderPhaseUpdates，获取第一个update，然后循环执行，获取新的state,直到下一个update为null；否的话，获取update链表的第一个update，进行循环，判断update的优先级是否需要更新，对于优先级高的进行更新。

参考

1.React Hooks源码解析-剖析useState的执行过程
2.React Hooks 源码解析（3）：useState
3.Hooks
4.[译] 深入 React Hook 系统的原理