React Hooks——useState
源碼版本
16.8
useState
流程示意圖
ReactHooks_useState.png
從useState源碼查看宇植，最終會(huì)發(fā)現(xiàn)其實(shí)調(diào)用的是ReactCurrentDispatcher.current泥兰。
初始化是null,類型是Dispatcher(具體可以查看源碼)
const ReactCurrentDispatcher = {
/**
* @internal
* @type {ReactComponent}
*/
current: (null: null | Dispatcher),
};
export default ReactCurrentDispatcher;
Dispatcher是類型此疹，并不是具體的對(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)：是的話，執(zhí)行renderPhaseUpdates灰羽，獲取第一個(gè)update驮履，然后循環(huán)執(zhí)行，獲取新的state,直到下一個(gè)update為null廉嚼；否的話玫镐，獲取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)的原理
