useEffect Hook 示例：导致重新渲染的原因是什么？

Question

我试图弄清楚 useEffect 何时会导致重新渲染。我对以下示例的结果感到非常惊讶：

https://codesandbox.io/embed/romantic-sun-j5i4m

function useCounter(arr = [1, 2, 3]) {
  const [counter, setCount] = useState(0);
  useEffect(() => {
    for (const i of arr) {
      setCount(i);
      console.log(counter);
    }
  }, [arr]);
}

function App() {
  useCounter();
  console.log("render");
  return <div className="App" />;
}

这个例子的结果如下：

我不知道为什么：

1. 组件仅渲染 3 次（我猜该组件会在每次调用 setCount + 一次初始渲染时重新渲染 - 所以 4 次）
2. 计数器只有两个值 0 和 3：我猜，正如 article 所指出的，每个渲染都会看到自己的状态和道具，因此整个循环将以每个状态作为常数运行（1、2、 3) --> 但是为什么状态永远不是 2？

Answer 1

我将尽力解释（或介绍）正在发生的事情。我还在第 7 点和第 10 点做了两个假设。

1. 应用组件安装。
2. useEffect 在挂载后调用。
3. useEffect 将“保存”初始状态，因此 counter 将在其中引用时为 0。
4. 循环运行 3 次。每次迭代setCount 都会被调用以更新计数，并且控制台日志记录根据“存储”版本为 0 的计数器。因此数字 0 在控制台中记录了 3 次。因为状态已经改变 (0 -> 1, 1 -> 2, 2 -> 3) React 设置像一个标志或其他东西来告诉自己记住重新渲染。
5. React 在useEffect 的执行过程中没有重新渲染任何东西，而是等到useEffect 完成重新渲染。
6. 一旦useEffect 完成，React 会记住counter 的状态在其执行过程中发生了变化，因此它将重新渲染应用程序。
7. 应用程序重新呈现并再次调用useCounter。注意这里没有参数被传递给useCounter 自定义钩子。 假设： 我自己也不知道，但我认为默认参数似乎又被创建了，或者至少以某种方式让 React 认为它是新的。因此，因为arr 被视为新的，useEffect 挂钩将再次运行。这是我可以解释第二次运行useEffect 的唯一原因。
8. 在第二次运行 useEffect 期间，counter 的值为 3。因此，控制台日志将按预期将数字 3 记录 3 次。
9. useEffect 第二次运行后，React 发现计数器在执行期间发生了变化 (3 -> 1, 1 -> 2, 2 -> 3)，因此应用程序将重新渲染导致第三次 '渲染'日志。
10. 假设： 因为从 App 的角度来看，useCounter 钩子的内部状态在这次渲染和之前的渲染之间没有改变，它不会执行其中的代码，因此useEffect 未被第三次调用。所以应用程序的第一次渲染总是会运行钩子代码。第二次 App 看到 hook 的内部状态将其 counter 从 0 更改为 3 并因此决定重新运行它，并且 App 第三次看到内部状态是 3 并且仍然是 3 所以它决定不要重新运行它。这是我能想出的让钩子不再运行的最好理由。您可以在钩子本身中放置一个日志，以查看它实际上不会运行第三次。

这就是我看到的情况，我希望这能让它更清楚一点。

Answer 2

我在 react 文档中找到了第三个渲染的 explanation。我认为这说明了为什么 react 在没有应用效果的情况下进行第三次渲染：

如果您将状态挂钩更新为与当前状态相同的值， React 将在不渲染子元素或触发效果的情况下退出。 （React 使用 Object.is 比较算法。）

请注意，React 可能仍需要再次渲染该特定组件 在保释之前。这不应该是一个问题，因为 React 不会 不必要地“深入”到树中。如果你做的很贵 渲染时计算，您可以使用 useMemo 对其进行优化。

useState 和 useReducer 似乎共享这种救助逻辑。

Answer 3

setState 和类似的钩子不会立即重新渲染您的组件。他们可能会批量更新或将更新推迟到以后。因此，在最新的 setCount 和 counter === 3 之后，您只会获得一次重新渲染。

您使用counter === 0 获得初始渲染，并使用counter === 3 获得两个额外的重新渲染。我不确定为什么它不会进入无限循环。 arr = [1, 2, 3] 应该在每次调用时创建一个新数组并触发 useEffect：

1. 初始渲染设置counter 到0
2. useEffect 记录 0 三次，将 counter 设置为 3 并触发重新渲染
3. 第一次用counter === 3重新渲染
4. useEffect 记录3 3 次，将counter 设置为3 和???

React 应该在此处停止，或者从第 3 步开始进入无限循环。

Answer 4

有一个巧合可能会在原始问题中造成一些混乱。主要是因为有 3 个渲染，useCounter 的默认参数长度等于 3。下面您可以看到，即使对于更大的数组，也只有 3 个渲染。

function useCounter(arr = [1, 2, 3, 4 , 5 , 6]) {
  const [counter, setCount] = React.useState(0);
  React.useEffect(() => {
    for (const i of arr) {
      setCount(i);
      console.log(counter);
    }
  }, [arr]);
}

function App() {
  useCounter();
  console.log("render");
  return <div className = "App" / > ;
}

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<div id="root"></div>

另一个混淆可能是因为每次调用setState，除了第一个，使用相同的值（数组的最后一个值），这实际上取消了渲染。但是，如果 setState 会以不同的值被调用，则呈现的流程将创建一个无限循环:)

因为每隔一个render 触发一个useEffect 触发一个setSate 触发一个render 触发一个useEffect 等等。

希望这能让某些人更清楚。

Answer 5

上述解决方案很好地解释了代码中发生的事情。如果有人正在寻找如何在自定义挂钩中使用默认参数时避免重新渲染。这是一个可能的解决方案。

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

import "./styles.css";

const defaultVal = [1, 2, 3];

function useCounter(arr = defaultVal) {
  const [counter, setCount] = useState(0);

  useEffect(() => {
    console.log(counter);
    setCount(arr);
  }, [counter, arr]);

  return counter;
}

function App() {
  const counter = useCounter();
  console.log("render");
  return (
    <div className="App">
      <div>{counter}</div>
    </div>
  );
}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

解释：由于自定义钩子没有提供任何值，它采用默认值，即常量defaultVal。这意味着arr 引用始终相同。由于引用没有改变，它不会触发 useEffect 钩子

Answer 6

这个问题和我阅读的所有答案都非常有见地，可以更好地理解 useEffect 和 useState 钩子，因为它们迫使我深入了解这些钩子。

虽然@ApplePearPerson 的回答非常明确，但我确实相信存在一些不正确的方面，我会用几个例子指出它们：

1. 组件被渲染，因此控制台中的第一个“渲染”。

2. UseEffect 总是至少运行一个，在第一次渲染之后，这基本上 解释第二次渲染，这是为什么首先打印的棘手部分 0 x (计数器的初始值)

3. useState 钩子的第二个参数是一个异步函数，因此具有异步行为：它等待其他代码运行，因此它等待 for in 块运行。

   所以 for in 块运行等等：

   i 从 1 变为 3，完成值为 3

4. 此时setCount改变计数器从0 t0 3

5. 如果有数组作为第二个参数，Useffect 会在依赖项更改时运行，所以在这种情况下，即使它不包含在内，它也会在从 setCount 更改的计数器上运行，正如你甚至可以从 Eslint 警告中看到的那样（React Hook useEffect缺少依赖项：'counter')

6. hook one a render 的 useState 更改状态原因（这就是为什么引入 useRef 来更改 dom 元素而不导致重新渲染），尽管类中的 setState 并非总是如此（但这是另一个主题）

7. 最后一次渲染是因为每次渲染都会重新创建 arr，因为 ApplePearPerson “注意到​​”但它是一个全新的数组作为组件 已重新渲染，但计数器为 3，与 我拥有的最后一个值，也正好是 3，所以 useEffect 不再运行。

   这个截图可以帮助可视化我的总结

例如，如果我们用 for in 更改 for of，这意味着我们获取数组的键（即字符串），我们会看到在这种情况下 counter 的最后一个值为 2

https://codesandbox.io/s/kind-surf-oq02y?file=/src/App.js

可以通过添加设置为前一个的第二个计数器来完成另一个测试。 在这种情况下，我们获得了第四个 Render，因为 count2 落后于 1 个 useffect，并且它从 0 变为 3 会触发最后一次渲染，但不会触发最后一次 useEffect 运行。

总结一下：

有3个渲染：

首先是由于组件首先挂载。

第二个是由于 useEffect 在第一次渲染之后运行。

三是由于从0到3的依赖变化

https://codesandbox.io/s/kind-surf-oq02y?file=/src/App.js:362-383