React组件卸载时异步循环的正确终止方法

理解React组件生命周期与异步操作的挑战

在react应用开发中，我们经常需要在组件挂载后执行一些副作用，例如数据获取、订阅事件或启动定时器。useeffect hook正是为此目的而设计的。然而，一个常见的误解是，当组件卸载时，所有在useeffect中启动的异步操作都会自动停止。事实并非如此。react框架在组件卸载时，只会执行useeffect返回的清理函数，并移除dom元素，它并不会自动中断正在运行的javascript执行流。

考虑以下场景：一个模态框组件在挂载时启动了一个while循环来模拟API轮询。即使模态框被关闭（即组件被卸载），console.log输出仍然会继续，这表明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) { // 循环条件中缺少对组件挂载状态的判断
      await wait(2000);
      console.log(++count);
    }
    return count;
  };

  React.useEffect(() => {
    pollIncrement();
  }, []);

  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 />} {/* Modal组件的条件渲染 */}
    </>
  );
}

上述代码中，当Modal组件被渲染时，useEffect会调用pollIncrement函数。pollIncrement是一个异步函数，它内部的while循环会独立运行，每隔2秒打印一次count。当isModalOpen变为false时，Modal组件被卸载，但pollIncrement函数及其内部的while循环并不会被React自动终止，因为它的执行上下文已经超出了React的直接管理范围。这会导致不必要的资源消耗，并可能引发内存泄漏。

利用useEffect清理函数和useRef安全终止异步操作

为了解决这个问题，我们需要手动引入一个机制来告知正在运行的异步操作，其所属的组件已经卸载，从而使其能够优雅地停止。useEffect的清理函数和useRef是实现这一目标的关键工具。

1. useEffect的清理函数： useEffect可以返回一个函数，这个函数会在组件卸载时或依赖项发生变化导致副作用重新执行前被调用。它是执行清理逻辑的理想场所。
2. useRef： useRef Hook提供了一个在组件生命周期内保持不变的可变对象。它不会在每次渲染时重新创建，也不会触发组件重新渲染。这使得它非常适合用来存储组件的挂载状态。

以下是修正后的Modal组件代码，它展示了如何安全地终止异步while循环：

KAIZAN.ai

使用AI来改善客户服体验，提高忠诚度

35

查看详情

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);
      // 在异步操作完成后再次检查挂载状态，防止在等待期间组件卸载
      if (mounted.current) { 
        console.log(++count);
      }
    }
    return count;
  };

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

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

  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 />}
    </>
  );
}

代码解析：

1. const mounted = React.useRef(false);: 我们创建了一个ref对象mounted，其current属性初始值为false。这个ref将在组件的整个生命周期中保持不变。
2. React.useEffect(() => { ... }, []);:
   • mounted.current = true;: 在useEffect回调函数执行时（即组件挂载后），我们将mounted.current设置为true，表示组件已挂载。
   • return () => { mounted.current = false; };: useEffect返回的这个函数是清理函数。当Modal组件卸载时，这个函数会被调用，此时我们将mounted.current设置为false。
3. while (count < 100 && mounted.current) { ... }: pollIncrement函数中的while循环条件现在包含了mounted.current。这意味着只有当count小于100 并且 组件仍然挂载时，循环才会继续执行。
4. if (mounted.current) { console.log(++count); }: 在await wait(2000)之后，我们再次检查mounted.current。这是为了处理一种边缘情况：如果组件在await等待期间被卸载，那么即使循环条件中的mounted.current已经变为false，await之后的代码仍会执行一次。通过再次检查，可以确保在组件卸载后不会执行任何不必要的操作。

通过这种方式，当Modal组件卸载时，useEffect的清理函数会将mounted.current设置为false。在pollIncrement的下一次迭代中，while循环的条件mounted.current将不再满足，从而安全地终止循环。

总结与最佳实践

• React不自动终止异步操作： 理解React的生命周期管理范围至关重要。React只管理组件的渲染和DOM操作，以及通过useEffect的清理函数来管理副作用。它不会自动中断正在执行的JavaScript异步任务。
• useEffect的清理函数是关键： 任何在useEffect中启动的、可能在组件卸载后继续运行的异步操作（如setTimeout、setInterval、事件监听器、WebSocket连接、Promise链等），都应该在清理函数中进行妥善处理。
• useRef用于持久化状态： useRef非常适合用于在不引起重新渲染的情况下，在组件生命周期内维护一个可变的值，例如组件的挂载状态，或者对DOM元素的引用。
• 通用模式： 文中介绍的useRef结合useEffect清理函数来管理组件挂载状态的模式，是一个通用的、健壮的解决方案，适用于任何需要在组件卸载时取消或停止的异步操作。
• 避免内存泄漏和性能问题： 及时清理异步操作不仅可以防止不必要的资源占用和内存泄漏，还能提升应用的整体性能和稳定性。

遵循这些最佳实践，可以确保你的React应用在处理异步操作时更加健壮和高效。

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