title: setState desc: React中, setState是同步还是异步

order: 1

React 中, setState 是同步还是异步

所谓同步还是异步指的是调用 setState 之后是否马上能得到最新的 state

不仅仅是setState了, 在对 function 类型组件中的 hook 进行操作时也是一样, 最终决定setState是同步渲染还是异步渲染的关键因素是ReactFiberWorkLoop工作空间的执行上下文.

具体代码如下:

  1. export function scheduleUpdateOnFiber(
  2.   fiber: Fiber,
  3.   expirationTime: ExpirationTime,
  4. ) {
  5.   const priorityLevel = getCurrentPriorityLevel();
  7.   if (expirationTime === Sync) {
  8.     if (
  9.       // Check if we're inside unbatchedUpdates
  10.       (executionContext & LegacyUnbatchedContext) !== NoContext &&
  11.       // Check if we're not already rendering
  12.       (executionContext & (RenderContext | CommitContext)) === NoContext
  13.     ) {
  14.       performSyncWorkOnRoot(root);
  15.     } else {
  16.       ensureRootIsScheduled(root);
  17.       schedulePendingInteractions(root, expirationTime);
  18.       if (executionContext === NoContext) {
  19.         // Flush the synchronous work now, unless we're already working or inside
  20.         // a batch. This is intentionally inside scheduleUpdateOnFiber instead of
  21.         // scheduleCallbackForFiber to preserve the ability to schedule a callback
  22.         // without immediately flushing it. We only do this for user-initiated
  23.         // updates, to preserve historical behavior of legacy mode.
  24.         flushSyncCallbackQueue();
  25.       }
  26.     }
  27.   } else {
  28.     // Schedule a discrete update but only if it's not Sync.
  29.     if (
  30.       (executionContext & DiscreteEventContext) !== NoContext &&
  31.       // Only updates at user-blocking priority or greater are considered
  32.       // discrete, even inside a discrete event.
  33.       (priorityLevel === UserBlockingPriority ||
  34.         priorityLevel === ImmediatePriority)
  35.     ) {
  36.       // This is the result of a discrete event. Track the lowest priority
  37.       // discrete update per root so we can flush them early, if needed.
  38.       if (rootsWithPendingDiscreteUpdates === null) {
  39.         rootsWithPendingDiscreteUpdates = new Map([[root, expirationTime]]);
  40.       } else {
  41.         const lastDiscreteTime = rootsWithPendingDiscreteUpdates.get(root);
  42.         if (
  43.           lastDiscreteTime === undefined ||
  44.           lastDiscreteTime > expirationTime
  45.         ) {
  46.           rootsWithPendingDiscreteUpdates.set(root, expirationTime);
  47.         }
  48.       }
  49.     }
  50.     // Schedule other updates after in case the callback is sync.
  51.     ensureRootIsScheduled(root);
  52.     schedulePendingInteractions(root, expirationTime);
  53.   }
  54. }

可以看到, 是否同步渲染调度决定代码是flushSyncCallbackQueue(). 进入该分支的条件:

  1. 必须是legacy模式, concurrent模式下expirationTime不会为Sync
  2. executionContext === NoContext, 执行上下文必须要为空.

两个条件缺一不可.

结论

同步:

  1. 首先在legacy模式下
  2. 在执行上下文为空的时候去调用setState
    • 可以使用异步调用如setTimeout, Promise, MessageChannel等
    • 可以监听原生事件, 注意不是合成事件, 在原生事件的回调函数中执行 setState 就是同步的

异步:

  1. 如果是合成事件中的回调, executionContext |= DiscreteEventContext, 所以不会进入, 最终表现出异步
  2. concurrent 模式下都为异步

演示示例

  1. import React from 'react';
  3. export default class App extends React.Component {
  4.   state = {
  5.     count: 0,
  6.   };
  8.   changeState = () => {
  9.     const newCount = this.state.count + 1;
  10.     this.setState({
  11.       count: this.state.count + 1,
  12.     });
  13.     if (newCount === this.state.count) {
  14.       console.log('同步执行render');
  15.     } else {
  16.       console.log('异步执行render');
  17.     }
  18.   };
  20.   changeState2 = () => {
  21.     const newCount = this.state.count + 1;
  22.     Promise.resolve().then(() => {
  23.       this.setState({
  24.         count: this.state.count + 1,
  25.       });
  26.       if (newCount === this.state.count) {
  27.         console.log('同步执行render');
  28.       } else {
  29.         console.log('异步执行render');
  30.       }
  31.     });
  32.   };
  34.   render() {
  35.     return (
  36.       <div>
  37.         <p>当前count={this.state.count}</p>
  38.         <button onClick={this.changeState}>异步+1</button>
  39.         <button onClick={this.changeState2}>同步+1</button>
  40.       </div>
  41.     );
  42.   }
  43. }

在看一个 concurrent 模式下的例子, 相同的代码都为异步 render:

Edit boring-faraday-m7jtx