我们有一个非常简单的应用程序，只包含一个 useEffect，其中包含一个 console.log("first")。
问题是，我希望 console.log("first") 在执行时只打印一次，但我不知道为什么会发生重新渲染，并且打印两次。请指导我，谢谢。
1
1016export 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
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
这是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处理函数中的清理工作，请参考这篇文章。