react源碼層探究setState作用

更新時間：2022年10月24日 14:24:39 作者：flyzz177

寫react的時候，踩了幾次坑發(fā)現(xiàn)setstate之后state不會立刻更新，于是判定setstate就是異步的方法，但是直到有一天，我想立刻拿到更新的state去傳參另一個方法的時候，才問自己，為什么setstate是異步的？準(zhǔn)確地說，在React內(nèi)部機(jī)制能檢測到的地方，setState就是異步的

前言

在深究 React 的 setState 原理的時候，我們先要考慮一個問題：setState 是異步的嗎？

首先以 class component 為例，請看下述代碼（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事件的時候，執(zhí)行了count + 1操作，并打印了count，此時打印出的count是多少呢？答案不是 1 而是 0

類似的 function component 與 class component 原理一致?，F(xiàn)在我們以 function component 為例，請看下述代碼 (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

相信大家都知道這個看起來是異步的現(xiàn)象，但他真的是異步的嗎？

為什么setState看起來是異步的

首先得思考一個問題：如何判斷這個函數(shù)是否為異步？

最直接的，我們寫一個 setTimeout，打個 debugger 試試看

我們都知道 setTimeout 里的回調(diào)函數(shù)是異步的，也正如上圖所示，chrome 會給 setTimeout 打上一個 async 的標(biāo)簽。

接下來我們 debugger setState 看看

React.useState 返回的第二個參數(shù)實(shí)際就是這個 dispatchSetState函數(shù)（下文細(xì)說）。但正如上圖所示，這個函數(shù)并沒有 async 標(biāo)簽，所以 setState 并不是異步的。

那么拋開這些概念來看，上文中 demo-1 的類似異步的現(xiàn)象是怎么發(fā)生的呢？

簡單的來說，其步驟如下所示?；诖?，我們接下來更深入的看看 React 在這個過程中做了什么

從first paint開始

first paint 就是『首次渲染』，為突出顯示，就用英文代替。

這里先簡單看一下App往下的 fiber tree 結(jié)構(gòu)。每個 fiber node 還有一個return指向其 parent fiber node，這里就不細(xì)說了

我們都知道 React 渲染的時候，得遍歷一遍 fiber tree，當(dāng)走到 App 這個 fiber node 的時候發(fā)生了什么呢？

接下來我們看看詳細(xì)的代碼（這里的 workInProgress 就是整在處理的 fiber node，不關(guān)心的代碼已刪除）

首先要注意的是，雖然 App 是一個 FunctionComponent，但是在 first paint 的時候，React 判斷其為 IndeterminateComponent。

 switch (workInProgress.tag) { // workInProgress.tag === 2
  case IndeterminateComponent:
    {
      return mountIndeterminateComponent(
        current,
        workInProgress,
        workInProgress.type,
        renderLanes
      );
    }
  // ...
  case FunctionComponent:
    { /** ... */}
}

接下來走進(jìn)這個 mountIndeterminateComponent，里頭有個關(guān)鍵的函數(shù) renderWithHooks；而在 renderWithHooks 中，我們會根據(jù)組件處于不同的狀態(tài)，給 ReactCurrentDispatcher.current 掛載不同的 dispatcher 。而在first paint 時，掛載的是HooksDispatcherOnMountInDEV

 function mountIndeterminateComponent(_current, workInProgress, Component, renderLanes) {
     value = renderWithHooks(
         null,
         workInProgress,
         Component,
         props,
         context,
         renderLanes
     );
 }
 function renderWithHooks() {
     // ...
     if (current !== null && current.memoizedState !== null) {
         // 此時 React 認(rèn)為組件在更新
         ReactCurrentDispatcher.current = HooksDispatcherOnUpdateInDEV;
     } else if (hookTypesDev !== null) {
         // handle edge case，這里我們不關(guān)心
     } else {
         // 此時 React 認(rèn)為組件為 first paint 階段
         ReactCurrentDispatcher.current = HooksDispatcherOnMountInDEV;
     }
     // ...
     var children = Component(props, secondArg); // 調(diào)用我們的 Component
 }

這個 HooksDispatcherOnMountInDEV 里就是組件 first paint 的時候所用到的各種 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()，我們會調(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;
        }
    },
    // ...
}

這里會調(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];
}

這個函數(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)建一個 hook
若無 hook 鏈，則創(chuàng)建一個 hook 鏈；若有，則將新建的 hook 加至末尾
將新建的這個 hook 掛載到 workInProgressHook 以及當(dāng)前 fiber node 的 memoizedState 上
返回 workInProgressHook，也就是這個新建的 hook

判斷傳入的 initialState 是否為一個函數(shù)，若是，則調(diào)用它并重新賦值給 initialState （在我們的demo-1里是『0』）

將 initialState 掛到 hook.memoizedState 以及 hook.baseState

給 hook 上添加一個 queue。這個 queue 有多個屬性，其中queue.dispatch 掛載的是一個 dispatchSetState。這里要注意一下這一行代碼

var dispatch = queue.dispatch = dispatchSetState.bind(null, currentlyRenderingFiber, queue);

Function.prototype.bind 的第一個參數(shù)都知道是綁 this 的，后面兩個就是綁定了 dispatchSetState 所需要的第一個參數(shù)（當(dāng)前fiber）和第二個參數(shù)（當(dāng)前queue）。

這也是為什么雖然 dispatchSetState 本身需要三個參數(shù)，但我們使用的時候都是 setState(params)，只用傳一個參數(shù)的原因。

返回一個數(shù)組，也就是我們常見的 React.useState 返回的形式。此時這個 state 是 0 至此為止，React.useState 在 first paint 里做的事兒就完成了，接下來就是正常渲染，展示頁面

觸發(fā)組件更新

要觸發(fā)組件更新，自然就是點(diǎn)擊這個綁定了事件監(jiān)聽的 div，觸發(fā) setCount?；貞浺幌?，這個 setCount 就是上文講述的，暴露出來的 dispatchSetState。并且正如上文所述，我們傳進(jìn)去的參數(shù)實(shí)際上是 dispatchSetState 的第三個參數(shù) action。（這個函數(shù)自然也涉及一些 React 執(zhí)行優(yōu)先級的判斷，不在本文的討論范圍內(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)建一個 update，把我們傳入的 action 放進(jìn)去

進(jìn)入 enqueueUpdate 函數(shù)：

若 queue上無 update 鏈，則在 queue 上以剛創(chuàng)建的 update 為頭節(jié)點(diǎn)構(gòu)建 update 鏈
若 queue上有 update 鏈，則在該鏈的末尾添加這個剛創(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 上的各個參數(shù)（reducer、上次計(jì)算出的 state）計(jì)算出 eagerState，并掛載到當(dāng)前 update 上

到此，我們實(shí)際上更新完 state了，這個新的 state 掛載到哪兒了呢？在 fiber.memoizedState.queue.pending 上。注意：

fiber 即為當(dāng)前的遍歷到的 fiber node；
pending 是一個環(huán)狀鏈表

此時我們打印進(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)的整個流程圖

首先我們走進(jìn) renderRootSync，這個函數(shù)作用是遍歷一遍 fiber tree，當(dāng)遍歷的 App時，此時的類型為 FunctionComponent。還是我們前文所說的熟悉的步驟，走進(jìn) renderWithHooks。注意此時 React 認(rèn)為該組件在更新了，所以給 dispatcher 掛載的就是 HooksDispatcherOnUpdateInDEV

function renderWithHooks(current, workInProgress, Component, props, secondArg, nextRenderLanes) {
    var children = Component(props, secondArg);
}

我們再次走進(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。那么這個 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)屬性，也就是將最新的這個 state 記錄下來，這樣下次更新的時候可以這次為基礎(chǔ)再去更新
返回一個數(shù)組，形式為 [state, setState]，此時這個 state 即為計(jì)算后的 newState，其值為 1

接下來就走進(jìn) commitRootImpl 進(jìn)行最后的渲染了，這不是本文的重點(diǎn)就不展開了，里頭涉及 useEffect 等鉤子函數(shù)的調(diào)用邏輯。

最后看一眼整個詳細(xì)的流程圖

寫在最后

上文只是描述了一個最簡單的 React.useState 使用場景，各位可以根據(jù)本文配合源碼，進(jìn)行以下兩個嘗試：

Q1. 多個 state 的時候有什么變化？例如以下場景時：

const App = () => {
    const [count, setCount] = React.useState(0);
    const [str, setStr] = React.useState('');
    // ...
}

A1. 將會構(gòu)建一個上文所提到的 hook 鏈

Q2. 對同個 state 多次調(diào)用 setState 時有什么變化？例如以下場景：

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. 將會構(gòu)建一個上文所提到的 update 鏈

到此這篇關(guān)于react源碼層探究setState作用的文章就介紹到這了,更多相關(guān)react setState內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: