React Hooks——useState

源碼版本

16.8

useState

流程示意圖

ReactHooks_useState.png

從useState源碼查看，最終會(huì)發(fā)現(xiàn)其實(shí)調(diào)用的是ReactCurrentDispatcher.current。
初始化是null,類(lèi)型是Dispatcher(具體可以查看源碼)

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

export default ReactCurrentDispatcher;

Dispatcher是類(lèi)型，并不是具體的對(duì)象，具體的對(duì)象是初始化時(shí)才會(huì)生產(chǎn)的。
也就是在Function組件執(zhí)行時(shí)會(huì)產(chǎn)生，即調(diào)度更新執(zhí)行了。

• 即updateContainer->...->beginWork
• beginWork中會(huì)根據(jù)當(dāng)前要執(zhí)行更新的fiber的tag來(lái)判斷執(zhí)行什么，因?yàn)闉楹瘮?shù)式組件，所以執(zhí)行了updateFunctionComponent
• 在updateFunctionComponent中，執(zhí)行了renderWithHooks，這個(gè)方法中就會(huì)初始化Dispatcher
• 在renderWithHooks中，會(huì)先根據(jù)fiber的memoizedState是否為null，來(lái)判斷是否已經(jīng)初始化了，因?yàn)閙emoizedState在函數(shù)式組件中是存放hooks的。是則mount，否則update
• 在mount時(shí)，Component(props, refOrContext):函數(shù)式組件執(zhí)行，HooksDispatcherOnMount被調(diào)用,會(huì)初始化hooks鏈表、initialState、dispatch函數(shù)，并返回。這里就完成了useState的初始化,后續(xù)函數(shù)式組件繼續(xù)執(zhí)行，完成渲染返回。
• 在update時(shí)，Component(props, refOrContext):函數(shù)式組件執(zhí)行，HooksDispatcherOnUpdate被調(diào)用，updateWorkInProgressHook用于獲取當(dāng)前work的Hook。然后根據(jù)numberOfReRenders 是否大于0來(lái)判斷是否處理re-render狀態(tài)：是的話(huà)，執(zhí)行renderPhaseUpdates，獲取第一個(gè)update，然后循環(huán)執(zhí)行，獲取新的state,直到下一個(gè)update為null；否的話(huà)，獲取update鏈表的第一個(gè)update，進(jìn)行循環(huán)，判斷update的優(yōu)先級(jí)是否需要更新，對(duì)于優(yōu)先級(jí)高的進(jìn)行更新。

參考

1.React Hooks源碼解析-剖析useState的執(zhí)行過(guò)程
2.React Hooks 源碼解析（3）：useState
3.Hooks
4.[譯] 深入 React Hook 系統(tǒng)的原理