React 中如何正确地在 useEffect 中处理异步函数以避免内存泄漏？

React 中如何正确地在 useEffect 中处理异步函数以避免内存泄漏？

回答：
在 React 的 useEffect 中直接使用 async/await 是不允许的，因为 useEffect 的回调函数必须是同步函数。如果直接在 useEffect 中声明 async 函数并调用异步操作（如 fetch），当组件在异步操作完成前卸载时，可能会尝试对已卸载组件的状态进行更新，从而引发内存泄漏警告。

正确做法：
应在 useEffect 内部定义一个异步函数，然后立即调用它。同时，使用一个“取消标记”（如 abort controller 或布尔变量）来检查组件是否仍然挂载，从而避免在组件卸载后更新状态。

示例代码：

import { useEffect, useState } from 'react';

function MyComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    let isMounted = true; // 标记组件是否挂载

    const fetchData = async () => {
      try {
        const response = await fetch('/api/data');
        const result = await response.json();
        if (isMounted) {
          setData(result);
        }
      } catch (error) {
        if (isMounted) {
          console.error('Fetch error:', error);
        }
      }
    };

    fetchData();

    return () => {
      isMounted = false; // 组件卸载时设置为 false
    };
  }, []);

  return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
}

解析：

• useEffect 的清理函数在组件卸载时执行，用于将 isMounted 设为 false。
• 所有对 setState 的调用都包裹在 if (isMounted) 中，确保不会在卸载后的组件上更新状态。
• 此方法有效防止“Can't perform a React state update on an unmounted component”警告。
• 对于更复杂的请求取消（如 fetch），可配合 AbortController 使用，以真正中断网络请求。

这是处理 useEffect 中异步逻辑的标准安全实践。