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 保证了资源的正确释放和状态的一致性。理解这一点对于避免内存泄漏和竞态条件至关重要。

相关推荐
安全系统学习1 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖1 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖1 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水2 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐2 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06272 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
灿灿121382 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴2 小时前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack3 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669133 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端