`setTimeout` 宏任务下改变了 `setState` 执行顺序，请问这是什么原因？

发布于
2024-08-04 上海

演示：https://stackblitz.com/edit/vitejs-vite-nfngmd?file=src%2Fcom...

点最底部按钮：1 和 2，文件名 /src/com/TestCom.tsx

先看一段简单的代码：

    console.log(1);
    setTimeout(() => console.log(2), 0);
    new Promise((resolve) => {
      console.log(3);
      resolve(4);
    }).then((num) => console.log(num));
    setData(() => {
      console.log(5);
      return { a: Date.now() };
    });
    console.log(6);

这段顺序执行如下：

1、3、6，是上下文
4、5，是微任务
2 是宏任务

也就是：1、3、6、4、5、2

现在代码不变将其全部包裹在 setTimeout 这个宏任务里

setTimeout(() => {
    // 上面的代码
}, 0);

这个时候发现 setState 是最后执行，即：1、3、6、4、2、5

在上面演示中 TestCom.tsx 中有两个方法：clickHandle 和 clickTimeooutHandle

最终都是执行 clickHandle
不同的是 clickTimeooutHandle 将 clickHandle 包裹在 setTimeout 中执行

这里会有 2 个不同点

第一个不同：只点按钮 1，初始化和之后每次点击不同

初始化输出：1、3、5、6、4、2
之后每次点：1、3、6、4、5、2

第二个不同：按钮 1 和按钮 2 不同

按钮 1：1、3、6、4、5、2
按钮 2：1、3、6、4、2、5

请问这是怎么回事呢？

javascript react settimeout eventloop

阅读 2.1k

AI BotBETA

在 JavaScript 中，事件循环（Event Loop）和任务队列（Task Queues）的工作方式导致了这种看似复杂的执行顺序。理解这一点对于解决你的问题至关重要。

基础知识

宏任务（MacroTasks）：包括整体代码执行、setTimeout、setInterval、setImmediate（Node.js）、I/O 操作等。
微任务（MicroTasks）：包括 Promise 的 .then()、.catch()、.finally()、MutationObserver（DOM 变更的观察者）、process.nextTick（Node.js）等。

分析

直接执行代码（非 setTimeout 包裹）：
- 当代码直接执行时，首先输出 1、3、6（同步代码）。
- 接着，Promise 的 .then() 被推入微任务队列。
- setData（假设这是 React 的 setState 或类似的异步更新状态函数）被调用，但状态更新通常不会立即反映在 DOM 或日志中，它会被 React 的调度器（Scheduler）安排在未来的某个时间点。
- 然后，遇到 setTimeout，它会被推入宏任务队列，但此时不执行。
- 当前执行栈清空后，检查微任务队列并执行（输出 4、5，其中 5 是由 setData 引起的，但可能在微任务队列中作为 React 调度的一部分执行）。
- 最后，执行宏任务队列中的 setTimeout（输出 2）。
代码被 setTimeout 包裹：
- 外部 setTimeout 将整个代码块作为一个宏任务推入队列。
- 当这个宏任务执行时，内部代码按照同步代码、微任务、再是下一个宏任务的顺序执行。
- 因此，setData 的调用被安排在微任务中，但在外部的 setTimeout 宏任务内。
- 这意味着 setData 引起的状态更新（及其可能的副作用，如组件重新渲染）会在内部的微任务队列中处理，但这仍然是在外部 setTimeout 宏任务完成之前。
- 最后，外部的 setTimeout 宏任务结束后，如果还有其他宏任务（如按钮 2 可能触发的另一个 setTimeout），它们会按顺序执行。

特定情况分析

按钮 1 和 2 的差异：
- 按钮 1 直接调用 clickHandle，遵循上述分析。
- 按钮 2 将 clickHandle 放入 setTimeout，这意味着每次点击按钮 2 都会将 clickHandle 的执行作为一个新的宏任务放入队列。因此，如果先点击按钮 1 后点击按钮 2，按钮 1 的宏任务（及其微任务）会先执行完毕，然后是按钮 2 的宏任务及其微任务。
初始化与后续点击的差异：
- 初始化时可能由于组件的挂载和初始化过程，React 的状态更新和渲染行为有所不同，这可能导致 setData（或 setState）的执行和效果看起来不同。
- 一旦组件稳定，后续的状态更新将遵循相同的规则。