react 16 Hooks渲染流程

react對usestate進行了封裝，呼叫了mountstate。

function usestate(

initialstate: (() => s) | s,
): [s, dispatch>]  finally 
}

生成乙個dispatch方法，通過閉包繫結當前states。

把初始值存到memoizedstate上。這個memoizedstate繫結到fiber樹上。用來儲存state。

function mountstate(

initialstate: (() => s) | s,
): [s, dispatch>] 
hook.memoizedstate = hook.basestate = initialstate;
const queue = (hook.queue = );
const dispatch: dispatch<
basicstateaction,
> = (queue.dispatch = (dispatchaction.bind(
null,
// flow doesn't know this is non-null, but we do.
((currentlyrenderingfiber: any): fiber),
queue,
): any));
return [hook.memoizedstate, dispatch];
}

所以還是在memoizedstate上動手腳，這個處理體現在mountworkinprogresshook

memoizedstate:

hook1 === fiber.memoizedstate

state1 === hook1.memoizedstate
state2 = hook1.next.memoizedstate

因為以這種方式儲存，所以usestate必須在functionalcomponent的根作用域中。不能被for，和if。

dispatch通過閉包就可以處理state。

usestate在更新的時候是呼叫的updatestate，這個函式其實是封裝的updatereducer。

function renderwithhooks();

hooksdispatcheronmount: 
hooksdispatcheronupdate:

還可以看到這有個迴圈update = update.next; while (update !== null && update !== first);

這就是hooks的batchupdate。

function updatereducer(

reducer: (s, a) => s,
initialarg: i,
init?: i => s,
): [s, dispatch] 
first = baseupdate.next;
} else 
if (first !== null) 
// update the remaining priority in the queue.
if (updateexpirationtime > remainingexpirationtime) 
} else  else 
}prevupdate = update;
update = update.next;
} while (update !== null && update !== first);
if (!didskip) 
// mark that the fiber performed work, but only if the new state is
// different from the current state.
if (!is(newstate, hook.memoizedstate)) 
hook.memoizedstate = newstate;
hook.baseupdate = newbaseupdate;
hook.basestate = newbasestate;
queue.lastrenderedstate = newstate;
}  const dispatch: dispatch= (queue.dispatch: any);
return [hook.memoizedstate, dispatch];
}

了解 React 之 hooks（三）

在前面的文章 了解 react 之 hooks 二 中介紹了 hooks 的 3 個效能優化 api，分別為 react.memo react.usecallback react.memo。本文主要介紹 useeffect 的第二個引數。1.使用 useeffect，不給第二個引數 import r...

react中使用hooks替代connect

使用hooks代替connect 在react中的connect的使用 import react,from react import from react redux import from antd import from react redux import from store discove...

react原始碼解析14 手寫hooks

1.開篇介紹和面試題 2.react的設計理念 3.react原始碼架構 4.原始碼目錄結構和除錯 5.jsx 核心api 6.legacy和concurrent模式入口函式 7.fiber架構 8.render階段 9.diff演算法 10.commit階段 11.生命週期 12.狀態更新流程 1...