React中使用闭包导致内存泄漏，该怎么优化？

首先你要搞清楚问题出在哪个地方。你写的 useEffect 依赖了 selectedItem，而每次 selectedItem 变化都会重新执行 effect，但这里的问题不是闭包导致内存泄漏，而是依赖项写错了。

你看你的代码

useEffect(() => {

  const timer = setTimeout(() => {

    setSelectedItem(prev => ({ ...prev, count: prev.count + 1 }))

  }, 1000);

  return () => clearTimeout(timer);

}, [selectedItem])

这个依赖数组写了 [selectedItem]，意味着只要 selectedItem 改变，就会创建新的定时器。但旧的定时器其实已经被 clearTimeout 了，因为 cleanup 函数会执行。真正的问题是：组件卸载后定时器还在运行？这不应该发生，因为你已经写了 return () => clearTimeout(timer)。

所以如果你确实看到组件卸载后还有状态更新警告，那说明你在定时器回调里调用了 setState（也就是 setSelectedItem），而此时组件已经卸载了。React 会报 warning：Can't perform a React state update on an unmounted component。

这不是内存泄漏，这是典型的“在已卸载组件上更新状态”的警告。虽然不会造成严重内存泄漏，但最好避免。

根本原因是你在异步回调里操作了可能已经不存在的组件状态。

解决方案分几步来优化：

第一步，移除不必要的依赖项
你不需要把 selectedItem 写进依赖数组，因为你在 setTimeout 里并没有直接用到它，你用的是函数式更新 setSelectedItem(prev => ...)，这种方式本身就不依赖外部状态值。

所以应该改成空依赖，只在组件挂载时设置一次定时器：

useEffect(() => {

  const timer = setTimeout(() => {

    // 函数式更新不依赖当前渲染中的 selectedItem 值

    setSelectedItem(prev => ({ ...prev, count: prev.count + 1 }));

  }, 1000);



  // 清理定时器

  return () => clearTimeout(timer);

}, []); // 空依赖，只执行一次

这样就只会启动一个定时器，组件卸载时也会被清除。

第二步，如果你想让定时器持续运行（比如每秒加一），你应该用 setInterval 而不是单次 setTimeout。不过你说的是“每秒加一”，那更可能是想周期性执行。

改成 setInterval 的版本：

useEffect(() => {

  const interval = setInterval(() => {

    setSelectedItem(prev => ({ ...prev, count: prev.count + 1 }));

  }, 1000);



  return () => clearInterval(interval); // 组件卸载时清理

}, []);

这个写法是标准做法，不会导致内存泄漏，也不会在卸载后触发状态更新。

第三步，如果你真的需要根据 selectedItem 做一些逻辑判断，不能用函数式更新，那你就要防止在组件卸载后还去 setState。

这时候可以用一个 ref 来标记组件是否还挂着：

useEffect(() => {

  let mounted = true; // 利用闭包 + ref 标记组件状态



  const timer = setTimeout(() => {

    if (mounted) {

      // 只有组件还挂着才更新状态

      setSelectedItem(prev => ({ ...prev, count: prev.count + 1 }));

    }

  }, 1000);



  return () => {

    clearTimeout(timer);

    mounted = false; // 清理时标记为未挂载

  };

}, []);

注意这里的 mounted 是一个局部变量，不是 useRef。虽然 useRef 也可以实现类似功能，但这种闭包变量方式更简单直接。React 官方文档也认可这种模式。

为什么这样做有效？因为每个 effect 执行时都会创建一个新的 mounted 变量，cleanup 函数引用的是同一个作用域里的 mounted，所以当组件卸载时，我们把它设为 false，下次异步回调检查就知道不要更新了。

第四步，关于你说的“用 ref 缓存状态没解决”——可能你是想用 useRef 来保存最新的 selectedItem？但要注意 useRef 不会引起重渲染，也不能代替 state。如果你在定时器里读取 ref.current，它可能不是最新的值，除非你手动同步。

比如你可以这么做：

const selectedRef = useRef(selectedItem);

selectedRef.current = selectedItem; // 每次渲染都同步最新值



useEffect(() => {

  const timer = setTimeout(() => {

    if (selectedRef.current) {

      setSelectedItem(prev => ({ ...prev, count: prev.count + 1 }));

    }

  }, 1000);



  return () => clearTimeout(timer);

}, []);

但这只是为了读取当前值，和解决卸载后更新无关。

总结一下：
你遇到的根本不是闭包导致的内存泄漏，而是异步操作在组件卸载后仍然尝试更新状态。正确做法是确保定时器被清理，并且在必要时通过 mounted 标志位阻止无效更新。

最推荐的做法就是使用空依赖数组 + 函数式更新 + 正确清理定时器。这样既简洁又安全。

另外提醒一句，别老背锅给“闭包”，闭包不是问题，问题是没管理好异步生命周期。React 函数组件里闭包是常态，关键是要理解每个 effect 的生命周期和依赖关系。