useEffect 中的 For 循环（不明显的行为）

Question

我有一个非常简单的 React 应用程序，可以更好地理解

useEffect

的工作原理。 该应用程序的应用程序组件带有

useEffect

钩子。在这个钩子中，我使用

for

循环模拟繁重的同步任务。 当我将

for

循环置于

if

条件内部或外部时，我很好奇不同渲染结果背后的原因。

import { useState, useEffect } from "react";

function App() {
  const [value, setValue] = useState(0);

  useEffect(() => {
    for (let index = 0; index < 1e9; index++) {}
    if (value === 0) {
      // or inside
      // for (let index = 0; index < 1e9; index++) {}
      setValue(Math.random());
    }
  }, [value]);

  return (
    <div>
      value: {value}
      <div>
        <button onClick={() => setValue(0)}>UseEffect</button>
      </div>
    </div>
  );
}

export default App;

这是我的代码：https://codesandbox.io/s/useeffect-3zkw27

当我将

for

循环外部

if

条件：

当我将

for

循环放入

if

时条件：

您可以看到，当循环处于

if

条件内时，渲染值变化得更快。有什么想法吗？

Answer 1

我可能会使用不带

<StrictMode>

的日志来更好地理解这一点：

import { useState, useEffect } from "react";

let nRender = -1;
let nEffect = -1;

function App() {
  const [value, setValue] = useState(0);
  console.log(`Render@${++nRender} with \`value\`: ${value}`);

  useEffect(() => {
    console.log(`Render@${nRender} -> Effect@${++nEffect}`);
    // console.log(`Render@${nRender} -> Effect@${nEffect} -> Delaying`);
    // for (let index = 0; index < 1e9; index++) {}
    if (value === 0) {
      console.log(
        `Render@${nRender} -> Effect@${nEffect} -> Delaying because \`value === 0\``
      );
      for (let index = 0; index < 1e9; index++) {}

      const newValue = Math.random();
      console.log(
        `Render@${nRender} -> Effect@${nEffect} -> Setting \`value = ${newValue}\``
      );
      setValue(newValue);
    }
  }, [value]);

  return (
    <div>
      value: {value}
      <div>
        <button onClick={() => (console.log("Click"), setValue(0))}>
          UseEffect
        </button>
      </div>
    </div>
  );
}

export default App;

在

if

声明之外：

在

if

声明中：