如何在 React 中实现一个自定义 Hook 来跟踪组件是否已挂载（mounted）？

如何在 React 中实现一个自定义 Hook 来跟踪组件是否已挂载（mounted）？

回答：
可以使用 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) {
        // 安全地更新状态
        setData(data);
      }
    };
    fetchData();
  }, []);

  // ...
}

解析：
在 React 中，组件卸载后仍尝试调用 setState 会导致警告甚至潜在错误（尤其在异步操作如 fetch、setTimeout 中）。虽然 React 18+ 在开发模式下会自动忽略卸载组件的 setState 警告，但在某些场景（如避免不必要的状态更新或内存泄漏）仍需手动判断组件是否已挂载。

useRef 用于存储可变值且不会触发重新渲染。useEffect 在组件挂载时将 isMounted.current 设为 true，卸载时设为 false。这样在异步回调中可通过 isMounted.current 判断组件是否仍处于挂载状态，从而安全更新状态。

注意：React 官方并不推荐频繁使用这种模式，更推荐使用 AbortController（用于 fetch）或清理函数来取消副作用，但 useIsMounted 在某些遗留代码或特定场景下仍具实用价值。