为什么在没有更改props或state的情况下重新渲染？

Question

我们有一个非常简单的应用程序，只包含一个 useEffect，其中包含一个 console.log("first")。 问题是，我希望 console.log("first") 在执行时只打印一次，但我不知道为什么会发生重新渲染，并且打印两次。请指导我，谢谢。

export default function App() {
  useEffect(() => {
    console.log("first");
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

https://codesandbox.io/s/silly-kilby-yn38cj?file=/src/App.tsx

Answer 1

这是React 18的Strict Mode中的一个新功能，这种行为是有意的。这个新功能的主要原因是提醒开发者在effect处理函数中添加清理函数。所以基本上组件会被挂载两次，意味着它被挂载、卸载和重新挂载。然而，需要知道的是，这种行为只在开发模式下观察到，不会在生产构建中发生。 为了验证开发模式下的行为，请在您的effect处理函数中添加一个清理函数并尝试记录一些内容。例如：

export default function App() {
  useEffect(() => {
    console.log("first");

    return () => console.log("Unmount App");
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

现在日志的顺序将如下所示：

first
Unmount App
first

这样开发者就可以确保组件不容易出错，并在卸载组件时进行适当的清理。 为了更好地理解这一点，您可以参考文档中演示的这个实例。 如果您想更多地了解effect处理函数中的清理工作，请参考这篇文章。