javascript - setTimeout 运行其回调代码比没有它慢得多

Question

我们在 React 中使用 Javascript 中的 setTimeout 函数时遇到了一个奇怪的问题。
由于使用setTimeout内的代码，它的运行速度比不使用setTimeout的代码慢得多!

作为比较，性能结果为:

Using setTimeout: 1391 ms
without using setTimeout: 15 ms

在 API 回调中(例如 axios)，setTimeout 版本也会发生!

简单的示例代码如下:
codesandbox

谁能解释一下发生了什么？

import React, { useState } from "react";
import ReactDOM from "react-dom";

function App() {
  const [value, setValue] = useState("");
  const [time, setTime] = useState("");

  const startSample = () => {
    const startTimeStamp = new Date().valueOf();
    for (let i = 0; i < 5000; i++) {
      setValue(`test-${i}`);
      // console.log(`test-${i}`);
    }
    const endTimeStamp = new Date().valueOf();
    setTime(`${endTimeStamp - startTimeStamp}ms`);
  };

  const handleClick1 = () => {
    startSample();
  };

  const handleClick2 = () => {
    setTimeout(() => {
      startSample();
    });
  };

  return (
    <div style={{ textAlign: "left" }}>
      <p>{value || "Please push that button!"}</p>
      <div>
        <button id="startBtn" onClick={handleClick1}>
          Start Normal
        </button>
        <button id="startBtn1" onClick={handleClick2}>
          Start With setTimeout
        </button>
      </div>
      <p>Result: {time}</p>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Answer 1

React 批量渲染会在事件回调中排队，因此，一旦处理程序完成，您对点击处理程序中的 setValue 的所有调用都会导致一次渲染。

但是，我不相信 React 批处理会在 setTimeout 调用中进行渲染。因此，它会在每次调用 setTimeout 处理程序中的 setValue 后呈现。

查看此问题:https://github.com/facebook/react/issues/14259

您应该能够通过像这样编写 setTimeout 版本来更快:

const handleClick2 = () => {
  setTimeout(() => ReactDOM.unstable_batchedUpdates(() => startSample()));
}

如果您有一堆异步 Ajax 响应返回，并希望在它们全部到达后应用它们，那么您可能有这样的代码:

const [a, setA] = useState();
const [b, setB] = useState();
const [c, setC] = useState();
const [d, setD] = useState();

useEffect(() => {
  (async () => {
    const a = await fetchA();
    const b = await fetchB();
    const c = await fetchC();
    const d = await fetchD();

    // wrap all of the state updates in batchUpdates
    // so that we only get one render instead of 4
    ReactDOM.unstable_batchUpdates(() => {
      setA(a);
      setB(b);
      setC(c);
      setD(d);
    });
  })()
}), []);