为啥 useEffect 之外的函数被调用，而没有依赖数组的 useEffect 内部的函数却没有？

Posted 2023-02-22

【中文标题】为啥 useEffect 之外的函数被调用，而没有依赖数组的 useEffect 内部的函数却没有？

【英文标题】：Why does a function outside useEffect get called while a function inside useEffect without dependency array doesn't?为什么 useEffect 之外的函数被调用，而没有依赖数组的 useEffect 内部的函数却没有？

【发布时间】：2021-07-22 05:39:27

【问题描述】：

直到今天我还认为没有依赖数组的 useEffect 内的代码和 useEffect 外的代码都会在每次重新渲染时触发，但后来我发现了这个奇怪的情况，我不明白为什么会发生这种情况。

在THIS 示例中，第一次单击按钮时它会触发 setState 到不同的值，因此它会重新呈现并调用两个 console.log，但第二次单击按钮时会调用相同的 setState值，仍然调用外部console.log，但是useEffect 内部的console.log 没有...为什么？这不是完全重新渲染吗？如何在不再次触发 useEffect 的情况下重新评估组件？

下次单击按钮时没有任何反应，因为使用相同的值调用 setState 不会触发重新渲染，但第一次会发生我不明白的奇怪的半重新渲染事情。

提前致谢。

【参考方案1】：

我会回答我的问题：

这种行为实际上在 official docs 中进行了解释，无需担心，因为它不是“真正的”渲染。

这是相关部分：

如果您将状态挂钩更新为与当前状态相同的值， React 将在不渲染子元素或触发效果的情况下退出。 [...]

所以基本上 React 会评估函数，所以外部的 console.log 将被调用，但随后它只是退出而不重新渲染孩子或触发 useEffect