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

相关推荐
大模型真好玩10 分钟前
深入浅出LangChain AI Agent智能体开发教程(四)—LangChain记忆存储与多轮对话机器人搭建
前端·人工智能·python
帅夫帅夫35 分钟前
深入理解 JWT:结构、原理与安全隐患全解析
前端
Struggler28144 分钟前
google插件开发:如何开启特定标签页的sidePanel
前端
爱编程的喵1 小时前
深入理解JSX:从语法糖到React的魔法转换
前端·react.js
代码的余温1 小时前
CSS3文本阴影特效全攻略
前端·css·css3
AlenLi1 小时前
JavaScript - 策略模式在开发中的应用
前端
xptwop1 小时前
05-ES6
前端·javascript·es6
每天开心1 小时前
告别样式冲突:CSS 模块化实战
前端·css·代码规范
wxjlkh1 小时前
powershell 批量测试ip 端口 脚本
java·服务器·前端
海底火旺1 小时前
单页应用路由:从 Hash 到懒加载
前端·react.js·性能优化