为何调整_isMounted逻辑可解决React卸载组件状态更新警告？

两种实现的差异与原理分析 #

第一种实现触发警告的核心原因 #

你遇到的Warning: Can't perform a React state update on an unmounted component警告，本质是组件卸载后仍有代码在执行状态更新操作，第一种实现的问题出在逻辑完整性和执行时机上：

• 空依赖的useEffect会在组件挂载完成后触发，你在这个回调里直接把_isMounted设为true，会立即触发监听_isMounted的第二个useEffect执行，直接调用function1到function5
• 如果你这几个初始化函数里存在异步操作（比如接口请求、定时器），当组件在异步操作返回前就被卸载，异步回调里的状态更新就会触发警告。因为你没有在组件卸载的清理函数里把_isMounted重置为false，异步回调执行时判断_isMounted仍为true，就会继续执行状态更新，完全没有起到拦截作用。

第二种实现能消除警告的原因 #

第二种实现本质是拉长了_isMounted设为true的时间周期，无意中规避了直接在挂载回调里触发初始化的问题：

• 初始_isMounted是undefined，空依赖的useEffect执行时先把它设为false，触发第二个监听_isMounted的useEffect，再把它设为true，这才触发第三个useEffect执行初始化函数
• 这个写法相当于把初始化函数的执行往后延迟了两个状态更新的周期，刚好适配了你当前场景下组件快速卸载的时机，所以警告消失。但这个写法并不是通用的标准实现，只是刚好匹配了你的业务场景。

更规范的优化方案 #

你目前的第二种写法存在多余的状态更新开销，更标准的isMounted实现应该用useRef存储标记，不需要触发额外重渲染：

const _isMounted = useRef(false);

useEffect(() => {
  _isMounted.current = true;
  window.addEventListener('resize', updateWindowDimensions);
  updateWindowDimensions();
  
  // 初始化函数中的异步操作，判断_isMounted.current为true再执行状态更新
  (async () => {
    const res = await function1();
    if (_isMounted.current) {
      // 执行状态更新逻辑
    }
  })();

  return () => {
    _isMounted.current = false;
    window.removeEventListener('resize', updateWindowDimensions);
  }
}, []);

这个写法从根本上拦截了组件卸载后的状态更新操作，性能也更优。

内容的提问来源于stack exchange，提问作者nordic.cat.bear