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

Question

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

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

有没有办法让 useEffect 只显示一次数据并将 StrictMode 保留在我的应用程序组件中？

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

我确实尝试使用 useRef 方法，但我的工作人员建议我不要使用此特定方法并尝试其他可能的outwork。

---

解决方案：如果您需要在组件中保留严格模式，但需要使 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. 您的组件将重新渲染额外的时间来查找由不纯渲染引起的错误。
2. 您的组件将重新运行 Effects 一段额外的时间，以查找因缺少 Effect 清理而导致的错误。
3. 将检查您的组件是否使用了已弃用的 API。

所以基本上用于发现开发过程中的常见错误或错误，以构建高质量的React应用程序