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

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

回答：
在 React 中，应使用 useEffect 钩子配合**清理函数（cleanup function）**来处理异步副作用，防止组件卸载后仍尝试更新状态而导致内存泄漏。

示例代码：

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    let isMounted = true; // 控制状态更新的标志位

    const fetchUser = async () => {
      try {
        const response = await fetch(`/api/users/${userId}`);
        const data = await response.json();
        if (isMounted) {
          setUser(data);
        }
      } catch (error) {
        if (isMounted) {
          console.error('Failed to fetch user:', error);
        }
      }
    };

    fetchUser();

    // 清理函数：组件卸载时设置标志位为 false
    return () => {
      isMounted = false;
    };
  }, [userId]); // 依赖项包含 userId

  return <div>{user ? user.name : 'Loading...'}</div>;
}

解析：

• 当组件卸载时，useEffect 的清理函数会被调用。但由于 JavaScript 闭包的特性，直接在异步回调中调用 setUser 可能会在组件卸载后执行，引发“Can't perform a React state update on an unmounted component”警告。
• 通过引入 isMounted 标志位，在异步操作完成前检查组件是否仍挂载，可安全地避免无效的状态更新。
• 更现代的替代方案是使用 AbortController（尤其适用于 fetch），例如：

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

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

  fetchUser();

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

这种方式不仅防止内存泄漏，还能主动取消不必要的网络请求，提升性能和用户体验。