当没有任何变化时，为什么要使用效果重新渲染?

Question

我有 2 个这样的反应功能组件：

const Test = function (props) {
console.log("rendered");
useEffect(() => {}, []);
return <div>Testing</div>;
}
const Parent = function () {
return <div>Component: <Test /></div>;
}

正如我们在上面看到的，浏览器控制台显示"rendered"两次没有状态或道具更改，但如果我评论useEffect它只会打印一次。我试图谷歌它，但没有找到任何适当的原因。

Answer 1

这是由于React.StrictMode.
来自 React 文档 - 检测意外的副作用

严格模式无法自动为您检测副作用，但它 可以通过使它们更具确定性来帮助您发现它们。 这是通过有意双重调用以下函数来完成的：

• 类组件构造函数、呈现器和 shouldComponentUpdate 方法
• 类组件静态 getDerivedStateFromProps 方法
• 函数组件体
• 状态更新程序函数(setState 的第一个参数(
• 传递给 useState、useMemo 或 useReducer 的函数

在为production构建项目时，这不应该发生。

Answer 2

这是因为React.StrictMode。如果没有useEffect(或任何状态性(，react 可能不会在 StrictMode 中渲染它两次，因为它不需要。StrictMode 呈现组件两次，以确保一切正常，并且没有不推荐使用的生命周期方法或其他有问题的做法。它的全部目的是确保您的应用程序能够很好地满足更严格的并发模式要求。它仅在开发模式下运行这些检查，以免影响生产版本中的性能。

在此 CodeSandbox 中，您可以看到严格模式为相同的组件呈现两次，而普通模式则不会。