useEffect的清理函数的执行时机

useEffect 的清理函数是 React 中管理副作用生命周期的关键机制,其执行时机遵循以下规则:

1. 核心执行时机

  • 组件卸载时:清理函数在组件从 DOM 中移除前执行,防止内存泄漏(如取消订阅、清除定时器)。
  • 副作用重复执行前 :如果 useEffect 因依赖项变化而重新执行,上一次 副作用的清理函数会在新副作用执行前触发。

2. 详细执行流程

首次渲染

  1. 组件渲染完成
  2. 执行 useEffect 中的副作用函数(不执行清理函数)

后续更新(依赖项变化时)

  1. 组件重新渲染
  2. 执行上一次副作用的清理函数
  3. 执行新的副作用函数

组件卸载

  1. 执行最后一次副作用的清理函数

3. 示例说明

jsx 复制代码
const Example = ({ value }) => {
  useEffect(() => {
    const subscription = api.subscribe(value);
    
    return () => {
      subscription.unsubscribe(); // 清理函数
    };
  }, [value]); // 依赖项:value 变化时重新执行

  return <div>Listening to {value}</div>;
};
  • 首次渲染value = "A"

    1. 组件渲染 <div>Listening to A</div>
    2. 执行 subscribe("A")
  • 更新后value = "B"

    1. 组件重新渲染 <div>Listening to B</div>
    2. 执行上一次的清理函数:unsubscribe("A")
    3. 执行新的副作用:subscribe("B")
  • 组件卸载

    1. 执行最后一次清理函数:unsubscribe("B")

4. 特殊场景说明

依赖项为空数组 []

清理函数仅在组件卸载时执行(相当于 componentWillUnmount):

jsx 复制代码
useEffect(() => {
  const timer = setInterval(() => console.log("Tick"), 1000);
  return () => clearInterval(timer); // 仅卸载时执行
}, []);

无依赖项数组

每次渲染都会执行副作用和清理函数(慎用,可能导致性能问题):

jsx 复制代码
useEffect(() => {
  // 每次渲染都执行
  return () => {
    // 每次重新渲染前都清理
  };
});

5. 注意事项

  1. 异步清理:清理函数必须是同步的(不能返回 Promise)。若需异步操作,可在清理函数中触发状态更新:

    jsx 复制代码
    useEffect(() => {
      let isMounted = true;
      fetchData().then(data => {
        if (isMounted) setData(data);
      });
      return () => (isMounted = false); // 同步标记组件已卸载
    }, []);
  2. 严格模式(开发环境) :React 18 在开发环境会额外调用一次清理函数和副作用,用于检测潜在问题,但生产环境不会。

总结

清理函数的核心作用是确保副作用的影响被正确撤销。通过在组件卸载前和副作用重复执行前执行清理,React 保证了资源的正确释放和状态的一致性。理解这一点对于避免内存泄漏和竞态条件至关重要。

相关推荐
张迅之5 分钟前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
蔗理苦1 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹2 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风2 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱2 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年2 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵2 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_3 小时前
分片上传-
前端·javascript·状态模式
东北南西3 小时前
手写React状态hook
前端·javascript·react.js