React组件卸载时异步操作的优雅终止：useEffect与useRef实践

理解问题：为何异步操作会持续运行？

在react应用中，当一个组件被卸载（例如，通过条件渲染移除）时，react会执行一系列清理工作，包括销毁组件实例、移除其dom元素以及调用useeffect的清理函数。然而，react并不会自动停止那些在组件内部启动但尚未完成的异步javascript任务，例如settimeout、setinterval、promise链（特别是包含await的异步函数）或网络请求。

这种行为可能导致以下问题：

1. 内存泄漏： 异步任务可能持有对已卸载组件的引用，阻止垃圾回收，从而造成内存泄漏。
2. 不必要的资源消耗： 即使组件已不再显示，异步操作仍在后台持续运行，消耗CPU、网络等资源。
3. 潜在的运行时错误： 异步任务完成后尝试更新一个已卸载组件的状态时，React会发出警告，甚至在严格模式下可能导致应用行为异常。

例如，在提供的代码示例中，Modal组件内部的pollIncrement是一个异步函数，它包含一个while循环和await wait(2000)。当Modal组件被父组件App通过isModalOpen && <Modal />条件渲染移除时，pollIncrement函数本身并不会立即停止执行。它会继续等待wait函数的Promise解决，然后再次进入循环体，直到count达到100。

解决方案：useEffect清理与useRef结合

为了解决组件卸载后异步操作持续运行的问题，我们需要手动引入一个机制来通知异步任务何时停止。这通常通过结合使用React的useEffect Hook的清理函数和useRef Hook来实现。

1. useEffect的清理函数： useEffect Hook可以返回一个函数。这个返回的函数会在组件卸载时，或者在组件更新（且依赖项发生变化）时，在执行下一个effect之前被调用。它是执行任何清理逻辑的理想场所，比如清除定时器、取消订阅或停止异步任务。
2. useRef的作用： useRef Hook提供了一个在组件的整个生命周期内保持不变的可变对象。我们可以利用它来存储一个布尔值，作为组件当前是否处于挂载状态的标志。这个标志可以在异步操作的循环条件中被检查，以决定是否继续执行。

通过这种方式，我们可以在组件挂载时将useRef的值设置为true，并在useEffect的清理函数中将其设置为false。异步循环在每次迭代时检查这个标志，一旦组件卸载，标志变为false，循环即可终止。

示例代码与实现

以下是针对原始问题代码的优化版本，它展示了如何使用useEffect和useRef来确保异步循环在组件卸载时正确终止：

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); // 异步等待
      // 在 await 之后再次检查 mounted.current，以防在等待期间组件已被卸载
      if (mounted.current) {
        console.log(++count);
      } else {
        // 如果在 await 期间组件已卸载，则直接退出循环
        break;
      }
    }
    return count;
  };

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

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

  return (
    <div
      style={{
        background: "blue",
        color: "white",
        width: "400px",
        height: "400px"
      }}
    >
      {/* 注意：count 是一个局部变量，其值的变化不会触发组件重新渲染。
          如果需要显示最新的 count 值，应使用 useState 来管理。
          此示例主要关注异步循环的控制，故保留原始实现。 */}
      {count}
    </div>
  );
};

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

  return (
    <>
      <button onClick={() => setIsModalOpen(!isModalOpen)}>打开模态框</button>
      {isModalOpen && <Modal />} {/* 条件渲染 Modal 组件 */}
    </>
  );
}

代码解析

1. const mounted = React.useRef(false);: 我们创建了一个ref对象mounted，其current属性初始值为false。useRef确保这个对象在组件的整个生命周期中都是同一个实例，并且其current属性的改变不会触发组件重新渲染。
2. React.useEffect(() => { ... }, []);:
   • 在useEffect的回调函数中，我们首先设置mounted.current = true;。这表示组件已挂载，可以安全地执行异步操作。
   • 然后调用pollIncrement();启动轮询。
   • 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); } else { break; }: 这是一个关键的优化点。由于await wait(2000)会暂停pollIncrement函数的执行，在这2秒的等待期间，组件有可能已经被卸载。因此，在await操作完成之后，我们再次检查mounted.current。如果此时组件已经卸载，我们就立即跳出循环，避免执行不必要的逻辑或更新已卸载组件的状态。

通过这种机制，一旦Modal组件被卸载，mounted.current会立即变为false，pollIncrement函数在下一次循环迭代时就会检测到这个变化，并终止自身的执行。

ViiTor实时翻译

AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

116

查看详情

注意事项与最佳实践

• 普遍适用性： 这种模式不仅适用于while循环，也适用于任何需要在组件卸载时停止的异步操作，例如setTimeout、setInterval、Promise链、WebSocket连接等。

• 取消Fetch请求： 对于fetch或axios等网络请求，除了使用useRef模式外，更推荐使用AbortController来取消正在进行的请求。这是一种更彻底的清理方式，可以避免网络请求继续占用资源。

• 状态更新前检查： 如果异步操作的结果需要更新组件状态（例如useState），务必在更新前检查组件是否仍处于挂载状态。否则，可能会遇到React发出的"Can't perform a React state update on an unmounted component"警告。

  // 示例：异步更新状态
  const [data, setData] = React.useState(null);
  // ...
  const fetchData = async () => {
    // ... fetch data ...
    if (mounted.current) { // 在更新状态前检查
      setData(result);
    }
  };

  登录后复制

• 自定义Hook封装： 为了提高代码复用性和可维护性，可以将这种“组件是否挂载”的逻辑封装成一个自定义Hook，例如useIsMounted：

  const useIsMounted = () => {
    const isMounted = React.useRef(false);
    React.useEffect(() => {
      isMounted.current = true;
      return () => {
        isMounted.current = false;
      };
    }, []);
    return isMounted;
  };
  
  // 在组件中使用
  const Modal = () => {
    const isMounted = useIsMounted();
    // ...
    const pollIncrement = async () => {
      while (count < 100 && isMounted.current) {
        // ...
      }
    };
    // ...
  };

  登录后复制

总结

在React中处理异步操作的生命周期管理是构建健壮应用的关键一环。通过巧妙地结合useEffect的清理机制和useRef来追踪组件的挂载状态，我们可以有效地确保异步任务在组件卸载时能够被及时、优雅地终止。这种模式不仅避免了内存泄漏和不必要的资源消耗，也提升了应用的稳定性和用户体验。遵循这些最佳实践，将有助于开发者编写出更可靠、更易于维护的React组件。

以上就是React组件卸载时异步操作的优雅终止：useEffect与useRef实践的详细内容，更多请关注php中文网其它相关文章！