react源碼層探究setState作用
前言
在深究 React 的 setState 原理的時(shí)候,我們先要考慮一個(gè)問題:setState 是異步的嗎?
首先以 class component 為例,請(qǐng)看下述代碼(demo-0)
class App extends React.Component {
state = {
count: 0
}
handleCountClick = () => {
this.setState({
count: this.state.count + 1
});
console.log(this.state.count);
}
render() {
return (
<div className='app-box'>
<div onClick={this.handleCountClick}>the count is {this.state.count}</div>
</div>
)
}
}
ReactDOM.render(
<App />,
document.getElementById('container')
);count初始值為 0,當(dāng)我們觸發(fā)handleCountClick事件的時(shí)候,執(zhí)行了count + 1操作,并打印了count,此時(shí)打印出的count是多少呢?答案不是 1 而是 0
類似的 function component 與 class component 原理一致?,F(xiàn)在我們以 function component 為例,請(qǐng)看下述代碼 (demo-1)
const App = function () {
const [count, setCount] = React.useState(0);
const handleCountClick = () => {
setCount((count) => {
return count + 1;
});
console.log(count);
}
return <div className='app-box'>
<div onClick={handleCountClick}>the count is {count}</div>
</div>
}
ReactDOM.render(
<App />,
document.getElementById('container')
);同樣的,這里打印出的 count 也為 0
相信大家都知道這個(gè)看起來是異步的現(xiàn)象,但他真的是異步的嗎?
為什么setState看起來是異步的
首先得思考一個(gè)問題:如何判斷這個(gè)函數(shù)是否為異步?
最直接的,我們寫一個(gè) setTimeout,打個(gè) debugger 試試看

我們都知道 setTimeout 里的回調(diào)函數(shù)是異步的,也正如上圖所示,chrome 會(huì)給 setTimeout 打上一個(gè) async 的標(biāo)簽。
接下來我們 debugger setState 看看

React.useState 返回的第二個(gè)參數(shù)實(shí)際就是這個(gè) dispatchSetState函數(shù)(下文細(xì)說)。但正如上圖所示,這個(gè)函數(shù)并沒有 async 標(biāo)簽,所以 setState 并不是異步的。
那么拋開這些概念來看,上文中 demo-1 的類似異步的現(xiàn)象是怎么發(fā)生的呢?
簡單的來說,其步驟如下所示?;诖?,我們接下來更深入的看看 React 在這個(gè)過程中做了什么

從first paint開始
first paint 就是『首次渲染』,為突出顯示,就用英文代替。
這里先簡單看一下App往下的 fiber tree 結(jié)構(gòu)。每個(gè) fiber node 還有一個(gè)return指向其 parent fiber node,這里就不細(xì)說了
我們都知道 React 渲染的時(shí)候,得遍歷一遍 fiber tree,當(dāng)走到 App 這個(gè) fiber node 的時(shí)候發(fā)生了什么呢?
接下來我們看看詳細(xì)的代碼(這里的 workInProgress 就是整在處理的 fiber node,不關(guān)心的代碼已刪除)
首先要注意的是,雖然 App 是一個(gè) FunctionComponent,但是在 first paint 的時(shí)候,React 判斷其為 IndeterminateComponent。
switch (workInProgress.tag) { // workInProgress.tag === 2
case IndeterminateComponent:
{
return mountIndeterminateComponent(
current,
workInProgress,
workInProgress.type,
renderLanes
);
}
// ...
case FunctionComponent:
{ /** ... */}
}接下來走進(jìn)這個(gè) mountIndeterminateComponent,里頭有個(gè)關(guān)鍵的函數(shù) renderWithHooks;而在 renderWithHooks 中,我們會(huì)根據(jù)組件處于不同的狀態(tài),給 ReactCurrentDispatcher.current 掛載不同的 dispatcher 。而在first paint 時(shí),掛載的是HooksDispatcherOnMountInDEV

function mountIndeterminateComponent(_current, workInProgress, Component, renderLanes) {
value = renderWithHooks(
null,
workInProgress,
Component,
props,
context,
renderLanes
);
}
function renderWithHooks() {
// ...
if (current !== null && current.memoizedState !== null) {
// 此時(shí) React 認(rèn)為組件在更新
ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;
} else if (hookTypesDev !== null) {
// handle edge case,這里我們不關(guān)心
} else {
// 此時(shí) React 認(rèn)為組件為 first paint 階段
ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;
}
// ...
var children = Component(props, secondArg); // 調(diào)用我們的 Component
}這個(gè) HooksDispatcherOnMountInDEV 里就是組件 first paint 的時(shí)候所用到的各種 hooks,相關(guān)參考視頻講解:進(jìn)入學(xué)習(xí)
HooksDispatcherOnMountInDEV = {
// ...
useState: function (initialState) {
currentHookNameInDev = 'useState';
mountHookTypesDev();
var prevDispatcher = ReactCurrentDispatcher$1.current;
ReactCurrentDispatcher.current = InvalidNestedHooksDispatcherOnMountInDEV;
try {
return mountState(initialState);
} finally {
ReactCurrentDispatcher.current = prevDispatcher;
}
},
// ...
}接下里走進(jìn)我們的 App(),我們會(huì)調(diào)用 React.useState,點(diǎn)進(jìn)去看看,代碼如下。這里的 dispatcher 就是上文掛載到 ReactCurrentDispatcher.current 的 HooksDispatcherOnMountInDEV
function useState(initialState) {
var dispatcher = resolveDispatcher();
return dispatcher.useState(initialState);
}
// ...
HooksDispatcherOnMountInDEV = {
// ...
useState: function (initialState) {
currentHookNameInDev = 'useState';
mountHookTypesDev();
var prevDispatcher = ReactCurrentDispatcher$1.current;
ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnMountInDEV;
try {
return mountState(initialState);
} finally {
ReactCurrentDispatcher$1.current = prevDispatcher;
}
},
// ...
}這里會(huì)調(diào)用 mountState 函數(shù)
function mountState(initialState) {
var hook = mountWorkInProgressHook();
if (typeof initialState === 'function') {
// $FlowFixMe: Flow doesn't like mixed types
initialState = initialState();
}
hook.memoizedState = hook.baseState = initialState;
var queue = {
pending: null,
interleaved: null,
lanes: NoLanes,
dispatch: null,
lastRenderedReducer: basicStateReducer,
lastRenderedState: initialState
};
hook.queue = queue;
var dispatch = queue.dispatch = dispatchSetState.bind(null, currentlyRenderingFiber$1, queue);
return [hook.memoizedState, dispatch];
}這個(gè)函數(shù)做了這么幾件事情:
執(zhí)行 mountWorkInProgressHook 函數(shù):
function mountWorkInProgressHook() {
var hook = {
memoizedState: null,
baseState: null,
baseQueue: null,
queue: null,
next: null
};
if (workInProgressHook === null) {
// This is the first hook in the list
currentlyRenderingFiber$1.memoizedState = workInProgressHook = hook;
} else {
// Append to the end of the list
workInProgressHook = workInProgressHook.next = hook;
}
return workInProgressHook;
}- 創(chuàng)建一個(gè)
hook - 若無
hook鏈,則創(chuàng)建一個(gè)hook鏈;若有,則將新建的hook加至末尾 - 將新建的這個(gè)
hook掛載到workInProgressHook以及當(dāng)前 fiber node 的memoizedState上 - 返回
workInProgressHook,也就是這個(gè)新建的hook
判斷傳入的 initialState 是否為一個(gè)函數(shù),若是,則調(diào)用它并重新賦值給 initialState (在我們的demo-1里是『0』)
將 initialState 掛到 hook.memoizedState 以及 hook.baseState
給 hook 上添加一個(gè) queue。這個(gè) queue 有多個(gè)屬性,其中queue.dispatch 掛載的是一個(gè) dispatchSetState。這里要注意一下這一行代碼
var dispatch = queue.dispatch = dispatchSetState.bind(null, currentlyRenderingFiber, queue);
Function.prototype.bind 的第一個(gè)參數(shù)都知道是綁 this 的,后面兩個(gè)就是綁定了 dispatchSetState 所需要的第一個(gè)參數(shù)(當(dāng)前fiber)和第二個(gè)參數(shù)(當(dāng)前queue)。
這也是為什么雖然 dispatchSetState 本身需要三個(gè)參數(shù),但我們使用的時(shí)候都是 setState(params),只用傳一個(gè)參數(shù)的原因。
返回一個(gè)數(shù)組,也就是我們常見的 React.useState 返回的形式。此時(shí)這個(gè) state 是 0 至此為止,React.useState 在 first paint 里做的事兒就完成了,接下來就是正常渲染,展示頁面

觸發(fā)組件更新
要觸發(fā)組件更新,自然就是點(diǎn)擊這個(gè)綁定了事件監(jiān)聽的 div,觸發(fā) setCount?;貞浺幌拢@個(gè) setCount 就是上文講述的,暴露出來的 dispatchSetState。并且正如上文所述,我們傳進(jìn)去的參數(shù)實(shí)際上是 dispatchSetState 的第三個(gè)參數(shù) action。(這個(gè)函數(shù)自然也涉及一些 React 執(zhí)行優(yōu)先級(jí)的判斷,不在本文的討論范圍內(nèi)就省略了)
function dispatchSetState(fiber, queue, action) {
var update = {
lane: lane,
action: action,
hasEagerState: false,
eagerState: null,
next: null
};
enqueueUpdate(fiber, queue, update);
}dispatchSetState 做了這么幾件事
創(chuàng)建一個(gè) update,把我們傳入的 action 放進(jìn)去
進(jìn)入 enqueueUpdate 函數(shù):
- 若
queue上無update鏈,則在queue上以 剛創(chuàng)建的update為頭節(jié)點(diǎn)構(gòu)建update鏈 - 若
queue上有update鏈,則在該鏈的末尾添加這個(gè) 剛創(chuàng)建的update
function enqueueUpdate(fiber, queue, update, lane) {
var pending = queue.pending;
if (pending === null) {
// This is the first update. Create a circular list. update.next = update;
} else {
update.next = pending.next;
pending.next = update;
}
queue.pending = update;
var lastRenderedReducer = queue.lastRenderedReducer;
var currentState = queue.lastRenderedState;
var eagerState = lastRenderedReducer(currentState, action);
update.hasEagerState = true;
update.eagerState = eagerState;
}- 根據(jù)
queue上的各個(gè)參數(shù)(reducer、上次計(jì)算出的 state)計(jì)算出eagerState,并掛載到當(dāng)前update上
到此,我們實(shí)際上更新完 state了,這個(gè)新的 state 掛載到哪兒了呢?在 fiber.memoizedState.queue.pending 上。注意:
fiber即為當(dāng)前的遍歷到的 fiber node;pending是一個(gè)環(huán)狀鏈表
此時(shí)我們打印進(jìn)行打印,但這里打印的還是 first paint 里返回出來的 state,也就是 0
更新渲染fiber tree
現(xiàn)在我們更新完 state,要開始跟新 fiber tree 了,進(jìn)行最后的渲染。邏輯在 performSyncWorkOnRoot 函數(shù)里,同樣的,不關(guān)心的邏輯我們省略
function performSyncWorkOnRoot(root) {
var exitStatus = renderRootSync(root, lanes);
}同樣的我們先看一眼 fiber tree 更新過程中 與 useState 相關(guān)的整個(gè)流程圖

首先我們走進(jìn) renderRootSync,這個(gè)函數(shù)作用是遍歷一遍 fiber tree,當(dāng)遍歷的 App時(shí),此時(shí)的類型為 FunctionComponent。還是我們前文所說的熟悉的步驟,走進(jìn) renderWithHooks。注意此時(shí) React 認(rèn)為該組件在更新了,所以給 dispatcher 掛載的就是 HooksDispatcherOnUpdateInDEV
function renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderLanes) {
var children = Component(props, secondArg);
}我們?cè)俅巫哌M(jìn) App,這里又要再次調(diào)用 React.useState 了
const App = function () {
const [count, setCount] = React.useState(0);
const handleCountClick = () => {
setCount(count + 1);
}
return <div className='app-box'>
<div onClick={handleCountClick}>the count is {count}</div>
</div>
}與之前不同的是,這次所使用的 dispatch 為 HooksDispatcherOnUpdateInDEV。那么這個(gè) dispatch 下的 useState 具體做了什么呢?
useState: function (initialState) {
currentHookNameInDev = 'useState';
updateHookTypesDev();
var prevDispatcher = ReactCurrentDispatcher$1.current;
ReactCurrentDispatcher$1.current = InvalidNestedHooksDispatcherOnUpdateInDEV;
try {
return updateState(initialState);
} finally {
ReactCurrentDispatcher$1.current = prevDispatcher;
}
}可以看到大致都差不多,唯一不同的是,這里調(diào)用的是 updateState,而之前是 mountState。
function updateState(initialState) {
return updateReducer(basicStateReducer);
}function updateReducer(reducer, initialArg, init) {
var first = baseQueue.next;
var newState = current.baseState;
do {
// 遍歷更新 newState
update = update.next;
} while (update !== null && update !== first);
hook.memoizedState = newState;
queue.lastRenderedState = newState;
return [hook.memoizedState, dispatch];
}這里又調(diào)用了 updateReducer,其中代碼很多不一一展示,關(guān)鍵步驟就是:
- 遍歷我們之前掛載到
fiber.memoizedState.queue.pending上的環(huán)狀鏈表,并得到最后的newState - 更新
hook、queue上的相關(guān)屬性,也就是將最新的這個(gè)state記錄下來,這樣下次更新的時(shí)候可以這次為基礎(chǔ)再去更新 - 返回一個(gè)數(shù)組,形式為
[state, setState],此時(shí)這個(gè)state即為計(jì)算后的newState,其值為 1
接下來就走進(jìn) commitRootImpl 進(jìn)行最后的渲染了,這不是本文的重點(diǎn)就不展開了,里頭涉及 useEffect 等鉤子函數(shù)的調(diào)用邏輯。
最后看一眼整個(gè)詳細(xì)的流程圖

寫在最后
上文只是描述了一個(gè)最簡單的 React.useState 使用場(chǎng)景,各位可以根據(jù)本文配合源碼,進(jìn)行以下兩個(gè)嘗試:
Q1. 多個(gè) state 的時(shí)候有什么變化?例如以下場(chǎng)景時(shí):
const App = () => {
const [count, setCount] = React.useState(0);
const [str, setStr] = React.useState('');
// ...
}A1. 將會(huì)構(gòu)建一個(gè)上文所提到的 hook 鏈
Q2. 對(duì)同個(gè) state 多次調(diào)用 setState 時(shí)有什么變化?例如以下場(chǎng)景:
const App = () => {
const [count, setCount] = React.useState(0);
const handleCountClick = () => {
setCount(count + 1);
setCount(count + 2);
}
return <div className='app-box'>
<div onClick={handleCountClick}>the count is {count}</div>
</div>
}A2. 將會(huì)構(gòu)建一個(gè)上文所提到的 update 鏈
到此這篇關(guān)于react源碼層探究setState作用的文章就介紹到這了,更多相關(guān)react setState內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
React18使用Echarts和MUI實(shí)現(xiàn)一個(gè)交互性的溫度計(jì)
這篇文章我們將結(jié)合使用React 18、Echarts和MUI(Material-UI)庫,展示如何實(shí)現(xiàn)一個(gè)交互性的溫度計(jì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-01-01
從零開始搭建一個(gè)react項(xiàng)目開發(fā)
這篇文章主要介紹了從零開始搭建一個(gè)react項(xiàng)目開發(fā),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-02-02
React超詳細(xì)分析useState與useReducer源碼
我正在處理的組件是表單的時(shí)間輸入。表單相對(duì)復(fù)雜,并且是動(dòng)態(tài)生成的,根據(jù)嵌套在其他數(shù)據(jù)中的數(shù)據(jù)顯示不同的字段。我正在用useReducer管理表單的狀態(tài),到目前為止效果很好2022-11-11
從零搭建react+ts組件庫(封裝antd)的詳細(xì)過程
這篇文章主要介紹了從零搭建react+ts組件庫(封裝antd),實(shí)際上,代碼開發(fā)過程中,還有很多可以輔助開發(fā)的模塊、流程,本文所搭建的整個(gè)項(xiàng)目,我都按照文章一步一步進(jìn)行了git提交,開發(fā)小伙伴可以邊閱讀文章邊對(duì)照git提交一步一步來看2022-05-05

