如何利用 Set 跟踪 React 组件的挂载状态辅助性能监控-js教程-PHP中文网

可用Set配合useEffect轻量可靠跟踪组件挂载状态，避免卸载后更新状态等错误；因Set支持多组件独立追踪、线程安全，而布尔值易在并发场景出错。

如何利用 set 跟踪 react 组件的挂载状态辅助性能监控

可以用 Set 配合 React 的生命周期钩子（如 useEffect）来轻量、可靠地跟踪组件是否已挂载，从而辅助性能监控——比如避免在组件卸载后仍尝试更新状态、误报渲染耗时、或向已销毁的组件发异步回调。

为什么用 Set 而不是布尔值？

单个布尔变量（如 isMounted）在并发渲染或多实例场景下容易出错：多个组件共享同一引用、清理时机不一致、或被闭包捕获旧值。而 Set 实例天然支持多组件独立追踪，每个组件维护自己的唯一标识（如 symbol 或随机 id），插入和删除互不干扰，线程安全且无副作用。

实现挂载状态管理的 Set

定义一个全局或模块级的 Set 存储当前活跃组件 ID：

const mountedComponents = new Set();

在组件中使用：

function MyComponent() {
  const componentId = useRef(Symbol());

  useEffect(() => {
    mountedComponents.add(componentId.current);
    return () => {
      mountedComponents.delete(componentId.current);
    };
  }, []);

  // 监控用：判断是否仍在挂载中
  const isMounted = () => mountedComponents.has(componentId.current);

  // 示例：异步操作完成时检查
  useEffect(() => {
    const timer = setTimeout(() => {
      if (isMounted()) {
        console.log('组件仍挂载，可安全更新状态');
      } else {
        console.warn('组件已卸载，跳过状态更新');
      }
    }, 1000);

    return () => clearTimeout(timer);
  }, []);

  return <div>MyComponent</div>;
}