React Hooks——useState的源碼流程

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)的原理

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。