React 组件卸载时如何正确终止异步循环与轮询操作

理解问题：组件卸载与异步任务的生命周期

在 react 应用开发中，我们经常需要在组件挂载后执行一些异步操作，例如数据获取、定时器或持续性的 api 轮询。一个常见的误解是，当组件从 dom 中移除（即卸载）时，所有由该组件启动的 javascript 任务也会随之自动终止。然而，事实并非如此。

考虑以下场景，一个 Modal 组件在 useEffect 中启动了一个 while 循环进行轮询：

import React from "react";
import "./styles.css";

const Modal = () => {
  const wait = async (ms = 1000) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
  };

  let count = 0;
  const pollIncrement = async () => {
    while (count < 100) { // 循环条件只依赖于 count
      await wait(2000); // 每次等待2秒
      console.log(++count);
    }
    return count;
  };

  React.useEffect(() => {
    pollIncrement(); // 组件挂载时启动轮询
  }, []);

  return (
    <div
      style={{
        background: "blue",
        color: "white",
        width: "400px",
        height: "400px"
      }}
    >
      {count} {/* 注意：这里的 count 是局部变量，其变化不会触发重新渲染 */}
    </div>
  );
};

export default function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setIsModalOpen(!isModalOpen)}>open modal</button>
      {isModalOpen && <Modal />} {/* Modal 根据 isModalOpen 条件渲染 */}
    </>
  );
}

在这个示例中，当 Modal 组件被渲染时，useEffect 会调用 pollIncrement 函数，启动一个每隔 2 秒打印一次 count 的 while 循环。问题在于，即使我们通过点击按钮关闭了模态框（即 Modal 组件被卸载），console.log 的输出仍然会继续，直到 count 达到 100。

这是因为 pollIncrement 函数一旦开始执行，它就拥有自己的执行上下文。await wait(2000) 仅仅是暂停了 pollIncrement 函数的执行，等待 Promise 解决，但它并没有终止整个函数的运行。当 Promise 解决后，while 循环会继续检查 count < 100 的条件，并继续执行下一个迭代，而此时 Modal 组件可能已经不复存在。这种现象可能导致内存泄漏、不必要的网络请求或应用程序中的意外行为。

解决方案：利用 useEffect 清理函数与 useRef

为了解决这个问题，我们需要在组件卸载时显式地通知正在运行的异步任务停止。React 的 useEffect Hook 提供了一个清理函数（cleanup function）机制，它会在组件卸载时或在下一次 effect 运行之前执行。结合 useRef 来创建一个可变且在组件生命周期内持久存在的标志，我们可以有效地控制异步任务的生命周期。

核心思路：

PPT.CN,PPTCN,PPT.CN是什么,PPT.CN官网,PPT.CN如何使用

一键操作，智能生成专业级PPT

37

查看详情

1. 使用 useRef 创建一个可变标志： useRef 返回一个可变的 ref 对象，其 .current 属性可以在不触发组件重新渲染的情况下被修改。我们将用它来存储组件是否已挂载的状态。
2. 在 useEffect 中设置标志： 当组件挂载时，将 ref.current 设置为 true。
3. 在 useEffect 清理函数中重置标志： 当组件卸载时，useEffect 的清理函数会被调用，此时将 ref.current 设置为 false。
4. 修改异步循环条件： 在 while 循环的条件中加入对 ref.current 的检查，确保只有当组件仍处于挂载状态时，循环才继续执行。

以下是修改后的 Modal 组件代码：

import React from "react";
import "./styles.css";

const Modal = () => {
  const wait = async (ms = 1000) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
  };

  let count = 0;
  // 使用 useRef 创建一个持久的挂载状态标志
  const mounted = React.useRef(false); 

  const pollIncrement = async () => {
    // 循环条件现在也检查 mounted.current
    while (count < 100 && mounted.current) { 
      await wait(2000);
      console.log(++count);
    }
    return count;
  };

  React.useEffect(() => {
    // 组件挂载时，设置 mounted.current 为 true
    mounted.current = true; 
    pollIncrement();

    // 返回一个清理函数
    return () => {
      // 组件卸载时，设置 mounted.current 为 false，中断 while 循环
      mounted.current = false; 
    };
  }, []); // 空数组表示只在组件挂载和卸载时执行一次 effect

  return (
    <div
      style={{
        background: "blue",
        color: "white",
        width: "400px",
        height: "400px"
      }}
    >
      {count}
    </div>
  );
};

export default function App() {
  const [isModalOpen, setIsModalOpen] = React.useState(false);

  return (
    <>
      <button onClick={() => setIsModalOpen(!isModalOpen)}>open modal</button>
      {isModalOpen && <Modal />}
    </>
  );
}

通过引入 mounted.current 标志，当 Modal 组件卸载时，useEffect 的清理函数会立即将 mounted.current 设置为 false。在 pollIncrement 函数的下一个 await wait(2000) 完成后，while 循环会重新评估其条件 (count < 100 && mounted.current)。由于 mounted.current 已经变为 false，循环条件不再满足，while 循环将优雅地终止执行。

注意事项与最佳实践

• 适用于所有异步操作： 这种模式不仅适用于 while 循环，也适用于任何可能在组件卸载后继续运行的异步操作，例如 setTimeout、setInterval、fetch 请求（尽管 fetch 更推荐使用 AbortController）或其他订阅。
• 避免内存泄漏： 及时终止不再需要的异步操作是防止内存泄漏和优化应用性能的关键。
• Promise 取消： 对于返回 Promise 的异步操作，虽然 JavaScript 原生不支持 Promise 的取消，但可以通过这种 mounted 标志模式来忽略已卸载组件的回调结果，或者对于像 fetch 这样的 API，可以使用 AbortController 来真正取消请求。
• 抽象为自定义 Hook： 对于频繁使用的轮询或定时器逻辑，可以将其封装成自定义 Hook（例如 useInterval 或 usePolling），以提高代码的复用性和可读性。
• count 的响应性： 示例中的 count 是一个局部变量，其变化不会触发组件重新渲染。如果需要在 UI 中实时显示 count 的值，应将其存储在 useState 中。但请注意，useState 的更新会导致组件重新渲染，这可能会影响 useEffect 的行为（如果依赖项不为空）。对于本教程的重点（终止异步循环），局部变量是足够的。

总结

在 React 中处理异步操作的生命周期管理至关重要。当组件卸载时，其内部启动的异步任务并不会自动停止。通过巧妙地结合 useEffect 的清理函数和 useRef 创建的挂载状态标志，我们可以精确地控制异步循环的生命周期，确保它们在组件不再需要时能够及时、安全地终止。掌握这一模式，将有助于构建更健壮、性能更优的 React 应用程序。

以上就是React 组件卸载时如何正确终止异步循环与轮询操作的详细内容，更多请关注php中文网其它相关文章！