为什么我的 useEffect 在 React 18 的 StrictMode 中运行两次，如何修复？

useEffect 运行两次：在 React 中有效处理它

为什么在使用 StrictMode 的开发模式下，在 React 18 中挂载时 useEffect 会被调用两次启用了吗？

了解Reason

React 18 在激活 StrictMode 的情况下，会在初始渲染期间重新安装组件，以增强性能并帮助错误检测。此重新安装可确保组件能够多次成功处理安装和卸载。

效果多次运行：这是一个问题吗？

尽管多次安装，大多数效果仍能正常运行并卸载。但是，如果某些效果忽略正确清理订阅或采用单个挂载-卸载生命周期，则可能会遇到问题。

多个调用出现问题的典型场景

常见多个效果调用可能导致问题的情况包括：

• HTTP请求： 发出服务器请求的效果可能会发送冗余请求并导致意外行为。
• 基于间隔的效果： 涉及设置间隔的效果可能会在组件卸载后继续运行，导致内存泄漏和意外结果。

处理多个的解决方案调用

React 鼓励开发人员实现稳健的效果，以优雅地处理多个调用，而不是抑制 StrictMode 或使用复杂的解决方法。这涉及实现抵消效果设置操作的清理函数。

清理函数

清理函数通常：

• 停止或撤消效果操作。
• 防止组件后持续存在副作用卸载。
• 中止请求、清除间隔或取消该效果创建的任何订阅。

示例：处理多个 HTTP 请求

下面是处理多个 HTTP 请求的示例useEffect:

useEffect(() => {
  const abortController = new AbortController();

  const fetchUser = async () => {
    try {
      const res = await fetch("/api/user/", {
        signal: abortController.signal,
      });
      // Process the response data
    } catch (error) {
      if (error.name !== "AbortError") {
        // Handle non-aborted errors
      }
    }
  };

  fetchUser();

  return () => abortController.abort();
}, []);

鲁棒效果的好处

有效处理多个调用的鲁棒效果：

• 增强性能并防止内存泄漏.
• 即使在开发模式下也确保无错误行为重新安装变得显而易见。
• 与 React 开发指南保持一致并与未来版本兼容。
• 促进更可靠和可维护的代码。

以上是为什么我的 useEffect 在 React 18 的 StrictMode 中运行两次，如何修复？的详细内容。更多信息请关注PHP中文网其他相关文章！