如何在 React 中正确处理异步副作用（如数据获取）并避免内存泄漏？

如何在 React 中正确处理异步副作用（如数据获取）并避免内存泄漏？

在 React 中，尤其是在使用 useEffect Hook 进行异步数据获取时，若组件在异步操作完成前被卸载，可能会尝试更新已卸载组件的状态，从而引发内存泄漏警告或错误。为避免这种情况，可以使用“取消标志（cleanup flag）”模式。

示例代码：

import { useState, useEffect } from 'react';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);

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

    const fetchUser = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const userData = await response.json();
        if (isMounted) {
          setUser(userData);
        }
      } catch (error) {
        if (isMounted) {
          console.error('Fetch error:', error);
        }
      } finally {
        if (isMounted) {
          setLoading(false);
        }
      }
    };

    fetchUser();

    // 清理函数：组件卸载时将标志设为 false
    return () => {
      isMounted = false;
    };
  }, [userId]);

  if (loading) return <div>Loading...</div>;
  return <div>{user?.name}</div>;
}

解析：

• React 的 useEffect 清理函数在组件卸载或依赖项变化时执行。
• 通过 isMounted 标志判断组件是否仍挂载，仅在挂载状态下更新状态，防止对已卸载组件进行 setState。
• 虽然现代 React（18+）在严格模式下会自动忽略对已卸载组件的 setState 警告（在开发环境），但该模式仍是推荐做法，尤其在处理多个异步操作或复杂逻辑时能有效避免竞态条件。
• 对于更复杂的场景，可考虑使用 AbortController 来取消 fetch 请求本身：

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

  const fetchUser = async () => {
    try {
      const response = await fetch(`/api/users/${userId}`, {
        signal: controller.signal
      });
      const userData = await response.json();
      setUser(userData);
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Error:', error);
      }
    } finally {
      setLoading(false);
    }
  };

  fetchUser();

  return () => {
    controller.abort(); // 取消请求
  };
}, [userId]);

这种做法不仅避免内存泄漏，还能真正取消网络请求，提升性能与用户体验。