我可以保留<StrictMode>在我的应用程序中，但让它不渲染两次吗

Question

我有我的应用程序内的严格模式，这使得它很难运行与我的useEffect()。它基本上在控制台中记录了两次我的所有值，这不是我想要的结果。

useEffect(() => {
console.log('logs some data')
}, []);

它有一种方法，使useEffect只显示数据一次，并保持StrictMode在我的应用程序组件?

root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);

我确实尝试过使用useRef方法，但我的员工建议我不要使用这种特定的方法，而是尝试另一种可能的方法。

---

解决方案:如果你需要在组件中保持严格模式，但需要让你的useEffect不渲染两次，你可以使用useRef:

的例子:

let shouldlog = useRef(true);
useEffect(() => {
if (shouldlog.current) {
shouldlog.current = false;
console.log("component mounted");
}
return () => console.log("function cleaned up");
}, []);

Answer 1

我们必须首先理解严格模式的概念，然后我们才能对解决方案做出反应

<StrictMode>有助于在开发早期发现组件中的常见错误。

参考

严格模式启用以下仅用于开发的行为:

1. 你的组件将重新渲染一个额外的时间来发现不纯渲染引起的bug。
2. 您的组件将重新运行效果额外的时间，以找到错误造成的缺失的效果清理。
3. 你的组件将被检查是否使用了不推荐的api。

所以基本上是用来发现开发过程中的常见错误或bug来构建一个高质量的React应用

Answer 2

您可以利用清理函数来取消冗余的工作，例如使用0超时:

useEffect(() => {
const timeout = setTimeout(() => {
console.log('one console log ' + new Date().valueOf(); 
}, 0);

return () => {
clearTimeout(timeout);
}
}, []);

生命周期大致如下:创建组件，立即销毁它，再创建它。并与效果:运行效果，立即运行其清理功能，再次运行。