如何在 React 中实现一个自定义 Hook 来跟踪组件的挂载状态，以避免在组件卸载后更新状态导致的内存泄漏？

如何在 React 中实现一个自定义 Hook 来跟踪组件的挂载状态，以避免在组件卸载后更新状态导致的内存泄漏？

回答：
可以使用 useRef 和 useEffect 创建一个自定义 Hook，例如 useIsMounted，来跟踪组件是否仍处于挂载状态：

import { useRef, useEffect } from 'react';

function useIsMounted() {
  const isMounted = useRef(false);

  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);

  return isMounted;
}

// 使用示例
function MyComponent() {
  const isMounted = useIsMounted();

  useEffect(() => {
    const fetchData = async () => {
      const data = await someAsyncOperation();
      if (isMounted.current) {
        setState(data);
      }
    };

    fetchData();
  }, []);

  // ...
}

解析：
在 React 中，如果在异步操作（如 fetch、setTimeout 等）完成之后尝试更新已卸载组件的状态，React 会发出警告，且可能导致内存泄漏或状态更新异常。通过 useIsMounted 自定义 Hook，我们利用 useRef 在组件生命周期中持久保存挂载状态（因为 ref 在组件重渲染时保持引用不变），并在组件卸载时将其设为 false。在异步回调中，只需检查 isMounted.current 是否为 true，即可安全地决定是否更新状态。

注意：虽然该方法在大多数场景下有效，但 React 官方并不推荐将其作为通用解决方案。更好的实践是使用 AbortController（用于 fetch）或清理定时器/订阅，从源头取消不必要的异步操作。useIsMounted 更多用于无法直接取消的异步逻辑的兜底处理。