为什么我的 useEffect Hook 在 React 18 开发模式下触发两次？

React 18 中 useEffect 多次触发：原因及解决方法

在 React 18 的开发环境中，有时会调用 useEffect hook初始组件安装时两次。这种行为源于 React 为未来 UI 状态保存功能做的准备。

双重调用的原因：

React 预计会出现需要重新挂载树同时保留其状态的情况以获得无缝的用户体验。例如，当切换选项卡并返回页面时，React 的目标是像以前一样显示精确的屏幕。为了实现这一点，它通过在初始化期间卸载和重新安装组件来测试组件的弹性。

开发与生产行为：

需要注意的是，这种双重调用仅发生处于开发模式。在生产环境中，useEffect 的行为符合预期，每次挂载仅调用一次。

处理问题：

虽然两次调用可能看起来不寻常，但它提供了一个机会提高代码质量并使其与未来的 React 版本保持一致。通常，useEffect 应该能够适应多次调用并正确清理，以防止内存泄漏。

示例：useEffect 内部的间隔：

考虑一个在其中设置间隔的示例使用效果。为了防止严格模式下的潜在问题，清理函数应在组件卸载后明确终止间隔。

useEffect(() => {
  const id = setInterval(() => setCount((prevCount) => prevCount + 1), 1000);
  return () => clearInterval(id);
}, []);

替代方法（不推荐）：

一些可能建议在 useEffect 中使用 useRef 和条件语句来将其执行限制为一次。然而，React 明确不鼓励这种做法，而是强调实现清理函数的重要性。

useEffect 内部的 API 调用：

如果 useEffect 包含 API 调用，请考虑使用 fetch使用 AbortController。控制器允许在组件卸载时中止不再相关的请求。这可以防止未安装组件的状态更新并提高性能。

结论：

理解 React 18 中双重调用 useEffect 背后的原因并采用适当的处理技术可以导致更健壮且无错误的代码。无论其在开发模式中的临时性质如何，它都是增强组件弹性并确保未来 React 版本中无缝操作的绝佳机会。

以上是为什么我的 useEffect Hook 在 React 18 开发模式下触发两次？的详细内容。更多信息请关注PHP中文网其他相关文章！