为什么在没有更改props或state的情况下重新渲染？
P粉786800174
2023-08-13 11:04:44
<p>我们有一个非常简单的应用程序，只包含一个 <code>useEffect</code>，其中包含一个 <code>console.log("first")</code>。
问题是，我希望 <code>console.log("first")</code> 在执行时只打印一次，但我不知道为什么会发生重新渲染，并且打印两次。请指导我，谢谢。</p>
<pre class="brush:php;toolbar:false;">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>
);
}</pre>
<p>https://codesandbox.io/s/silly-kilby-yn38cj?file=/src/App.tsx</p>
这是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> ); }现在日志的顺序将如下所示：
这样开发者就可以确保组件不容易出错，并在卸载组件时进行适当的清理。 为了更好地理解这一点，您可以参考文档中演示的这个实例。 如果您想更多地了解effect处理函数中的清理工作，请参考这篇文章。