现代 React Web 开发实战
宋一玮
FreeWheel 中国研发中心前端架构师
16115 人已学习
新⼈⾸单¥59
登录后,你可以任选4讲全文学习
课程目录
已完结/共 31 讲
现代 React Web 开发实战
15
15
1.0x
00:00/00:00
登录|注册

08|组件生命周期:React新老版本中生命周期的演化

你好,我是宋一玮,欢迎回到 React 组件的学习。
上节课我们暂时跳出 React 的核心概念,了解了如何利用 CSS-in-JS 技术将 React 组件的 CSS 样式也组件化,并以 emotion 框架为例,一起改写了 oh-my-kanban 项目的部分 CSS。
到这里,对于组件的结构和样式,我们已经给予了足够充分的学习和关注。那么接下来我们将用六节课的时间,来学习如何为组件编写逻辑。
组件的逻辑代码应该写在哪里呢?不妨参考一下开源项目 React 组件库 AntD。根据在 AntD 的 v3.26.20 版本源代码中统计函数个数,至少有 35%的函数是React 生命周期方法。这就引出了这节课的主题,组件生命周期。
可以说,生命周期一直都是前端技术中的核心概念,React 也不例外。在 React 这里,尤其需要注意的是,组件生命周期并不等同于类组件的生命周期方法
组件生命周期首先是一组抽象概念,类组件生命周期方法和 Hooks API 都可以看作是这组概念的对外接口。因此,无论是选择函数组件加 Hooks,还是在类组件上一条路走到黑,都要学习组件生命周期。
那么这节课我们就先从类组件入手,通过介绍类组件的生命周期方法,带你了解背后的 React 组件生命周期,然后再从实际出发,讲解对应的 Hooks 用法。
确认放弃笔记?
放弃后所记笔记将不保留。
新功能上线,你的历史笔记已初始化为私密笔记,是否一键批量公开?
批量公开的笔记不会为你同步至部落
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线
笔记
复制
AI
  • 深入了解
  • 翻译
    • 英语
    • 中文简体
    • 中文繁体
    • 法语
    • 德语
    • 日语
    • 韩语
    • 俄语
    • 西班牙语
    • 阿拉伯语
  • 解释
  • 总结

React组件的生命周期一直是前端技术的核心概念。本文从React新老版本中生命周期的演化出发,详细介绍了类组件的生命周期方法和Hooks API的对应用法。文章首先介绍了类组件生命周期方法的挂载、更新、卸载和错误处理四个阶段,详细解释了每个阶段的生命周期方法及其作用。此外,还介绍了错误边界的概念和使用频率统计。通过对Ant Design组件库的统计,展示了React生命周期方法的使用频率,为读者学习组件生命周期提供了参考。随后,文章详细介绍了函数组件生命周期的相关内容,包括挂载阶段、更新阶段和卸载阶段,以及错误处理阶段。最后,文章以一个实际案例展示了生命周期的常见使用场景,通过定时器需求为项目增加了一个小功能,帮助读者更好地理解生命周期的实际应用。整体而言,本文通过详细的解释和实例代码,帮助读者全面了解了React组件的生命周期,为进一步学习和应用提供了基础知识。文章内容涵盖了类组件和函数组件的生命周期方法,以及实际应用案例,为读者提供了全面的学习资源。

仅可试看部分内容,如需阅读全部内容,请付费购买文章所属专栏
《现代 React Web 开发实战》
新⼈⾸单¥59
立即购买
登录 后留言

全部留言(12)

  • 最新
  • 精选
  • 🐑
    置顶
    你好,我是《现代React Web开发实战》的编辑辰洋,这是👇项目的源代码链接,供你学习与参考: https://gitee.com/evisong/geektime-column-oh-my-kanban/releases/tag/v0.8.0
    2022-09-14归属地:北京
    1
  • 学习前端-react
    附和!之前常见在vue2中经常会去理解父子组件的生命周期函数执行顺序。如created(父) - created(子)- mounted(子)- created(父)。对于react created 代表render前,mounted 代表render后。所以react 生命周期的执行顺序为。 class 组件: constructor(父) - render (父) - constructor(子) - render(子) - componentdidmounted(子)- ComponentDidMounted(父)。 hooks 组件:生命周期不显。

    作者回复: 你好,Geek_8aba0d,非常棒的答案。 父子组件均为类组件时,生命周期方法的执行顺序正如你所描述的。至于函数组件+Hooks,如果你感兴趣,可以加入一些useEffect(虽然第10节课才会讲)打console.log来观察一下。 Fiber协调引擎里有一些有趣的细节,我争取在最近的课程加餐中安排进来。

    2022-09-11归属地:内蒙古
    3
    4
  • 学习前端-react
    你好,"进入提交阶段,React 会先执行 Effect 的清理函数,然后再次执行 Effect。" 没理解这里为啥要effect 的清理函数,然后执行Effect,很反直觉。是为了执行后产生符合预期的值吗?

    作者回复: 你好,Geek_8aba0d,你的感觉跟很多人是一样的,包括刚接触Hooks时的我。 useEffect的详细内容在后面第10节课会讲,到放在这节课有点超纲,不过在这里我可以先剧透一下。 这里之所以大家会认为反直觉,很大程度上是因为大家把componentDidMount 和 componentWillUnmount 这一对类组件的生命周期方法当作了参照物。如果这样看的话,仿佛是在说同一个组件的 componentWillUnmount 发生在了 componentDidMount 之前,不合逻辑,理应出错的。 我建议这里先暂时不要考虑类组件,直接用副作用这个概念来理解。useEffect为函数组件声明了副作用,在不加入第二个参数(依赖值数组)的前提下,每次组件渲染都会执行,即每次渲染都会产生新的副作用(包含新的闭包),并留到这次的提交阶段执行,当执行的返回值是一个函数的时候,这个函数就是这次副作用的清理函数。 如第N次渲染,就会在提交阶段执行第N次副作用,返回第N次副作用的清理函数;下次第N+1次渲染,会在提交阶段先执行第N次副作用的清理函数,然后才是执行第N+1次副作用,返回第N+1次的清理函数;以此类推。

    2022-09-11归属地:内蒙古
    4
  • 林十二XII
    https://react.dev/learn/render-and-commit 结合react新版文档, 可以更容易理解函数组件的生命周期

    作者回复: 你好,林十二XII,感谢推荐。React新版官方文档的质量非常高,我推荐大家有机会都去读一读。

    2023-03-20归属地:北京
    2
  • CondorHero
    antd 写法说明,来自官网 How to spell Ant Design correctly?# ✅ Ant Design: Capitalized with space, for the design language. ✅ antd: all lowercase, for the React UI library. ✅ ant.design:For ant.design website url. Here are some typical wrong examples: ❌ AntD ❌ antD ❌ Antd ❌ ant design ❌ AntDesign ❌ antdesign ❌ Antdesign

    作者回复: 你好,CondorHero,收到,看来文稿里应该用全小写的“antd”,谢谢指正。我和专栏编辑先记录一下,下次一起更新文稿。

    2022-11-06归属地:北京
    2
  • 01
    父组件和子组件的生命周期是交叉进行的, useLayoutEffect 和 useEffect 其实不太一样, useEffect其实是异步的

    作者回复: 你好,01,你说得对。在Fiber协调引擎中,真正主导的生命周期其实就是渲染阶段和提交阶段,所有组件完成渲染阶段才能进入提交阶段,完成提交阶段才进入下一轮渲染阶段。从这个角度看,传统的挂载、更新、卸载三个组件生命周期,在父子组件间确实是交叉进行的。 不过如果把视角放回单个组件上,挂载、更新、卸载三个生命周期可以对应到不少Fiber在组件层面的内部实现,还是有掌握的必要的。 正如你所说,在提交阶段,useLayoutEffect的副作用回调和清除函数是同步执行的,而useEffect的的副作用回调和清除函数是异步执行的。我已经更新了文稿中的配图,虽然依旧省略了一些细节,但比之前的版本更准确地表达了useEffect执行的时机。

    2022-09-19归属地:北京
  • 船长
    思考题:有点朦胧的感觉,感觉是像递归那样,父组件遇到子组件,先执行子组件,等子组件执行完了再去执行父组件

    作者回复: 你好,船长,你的理解从概念上是对的。父子组件生命周期方法或Hooks的执行遵守这个顺序。Fiber协调引擎里有一些有趣的细节,我争取在最近的课程加餐中安排进来。

    2022-09-08归属地:内蒙古
    2
  • momo
    老师能讲下什么是副作用(Side-effect)吗?包含哪些?
    2023-12-05归属地:广东
  • 林十二XII
    https://react.dev/learn/render-and-commit
    2023-03-20归属地:北京
  • 潮汐
    组件函数的返回值通常会使用 JSX 语法,React 在渲染阶段根据返回值创建 FiberNode 树。在提交阶段,React 更新真实 DOM 之前会依次执行前面定义的 Effect。 请问老师,这句话最后说在React更新真是DOM之前依次执行前面定义的Effect,不是应该在更新DOM之后吗(按照图中所示)
    2023-02-17归属地:广东
收起评论
显示
设置
留言
12
收藏
沉浸
阅读
分享
手机端
快捷键
回顶部