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

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

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

import { useEffect, useRef } from 'react';

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

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

  return isMounted;
}

使用示例：

function MyComponent() {
  const isMounted = useIsMounted();

  useEffect(() => {
    fetchData().then(data => {
      if (isMounted.current) {
        setData(data);
      }
    });
  }, []);

  // ...
}

解析：
在 React 中，异步操作（如网络请求）可能在组件卸载后才完成。如果此时尝试调用 setState，React 会抛出警告，因为不能在已卸载的组件上设置状态。通过 useRef 创建一个可变的 isMounted 标志，并在组件挂载时设为 true、卸载时设为 false，可以安全地检查组件状态后再更新。注意：useRef 返回的对象在组件生命周期内保持引用不变，因此适合用于保存这种跨渲染的可变状态。此外，React 18 的严格模式可能会多次挂载/卸载组件用于开发调试，因此此模式在实际使用中仍然有效且推荐。