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