为什么在没有任何变化的情况下使用 useEffect 重新渲染？答案

【问题标题】：Why useEffect re-rendering when nothing has changed?为什么在没有任何变化的情况下使用 useEffect 重新渲染？
【发布时间】：2020-09-05 23:43:20
【问题描述】：

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

const Test = function (props) {
    console.log("rendered");
    useEffect(() => {}, []);

    return <div>Testing</div>;
}

const Parent = function () {
    return <div>Component: <Test /></div>;
}

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

【问题讨论】：

标签： reactjs react-hooks use-effect rerender

【解决方案1】：

这是由于React.StrictMode.
来自React Docs - Detecting unexpected side effects

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

类组件构造函数、渲染和 shouldComponentUpdate 方法

类组件静态getDerivedStateFromProps方法

函数组件体

状态更新函数（setState 的第一个参数）

传递给 useState、useMemo 或 useReducer 的函数

在为production 构建项目时，不应发生这种情况。

【讨论】：

感谢您强调实际原因..!!

【解决方案2】：

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

在这个CodeSandbox 中，您可以看到严格模式会为相同的组件渲染两次，而普通模式不会。

【讨论】：

感谢您努力为我创建现场演示......！！