v6升级后内存泄漏问题解决

在React Router v6升级后，许多开发者遇到了内存泄漏问题，特别是在使用useNavigate和useLocation时。本文将详细分析并提供解决方案。

问题复现步骤

1. 在组件中使用useNavigate进行路由跳转
2. 组件卸载前未正确清理副作用
3. 多次跳转后观察到内存占用持续增长

根本原因

v6版本中，useNavigate返回的函数在某些情况下会保持对组件实例的引用，导致GC无法回收。特别是在使用useEffect时，如果未正确清理，会形成闭包引用链。

解决方案

// 错误示例
function MyComponent() {
  const navigate = useNavigate();
  useEffect(() => {
    // 未清理的定时器或订阅
    const timer = setInterval(() => { }, 1000);
    return () => {
      clearInterval(timer); // 需要清理
    };
  }, []);
}

// 正确示例
function MyComponent() {
  const navigate = useNavigate();
  const [isMounted, setIsMounted] = useState(true);
  
  useEffect(() => {
    let isCancelled = false;
    
    const timer = setInterval(() => {
      if (!isCancelled) {
        // 执行逻辑
      }
    }, 1000);
    
    return () => {
      isCancelled = true;
      clearInterval(timer);
    };
  }, []);
}

最佳实践

1. 使用useRef管理需要清理的副作用
2. 在组件卸载时及时清理定时器和订阅
3. 避免在函数组件中直接创建全局引用

通过以上方法，可以有效解决v6升级后的内存泄漏问题。