08｜组件生命周期：React新老版本中生命周期的演化
荧光笔
直线
曲线- 深入了解
- 翻译
- 解释
- 总结
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.02022-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归属地：内蒙古34- 学习前端-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
CondorHeroantd 写法说明，来自官网 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归属地：广东- 林十二XIIhttps://react.dev/learn/render-and-commit2023-03-20归属地：北京
潮汐组件函数的返回值通常会使用 JSX 语法，React 在渲染阶段根据返回值创建 FiberNode 树。在提交阶段，React 更新真实 DOM 之前会依次执行前面定义的 Effect。 请问老师，这句话最后说在React更新真是DOM之前依次执行前面定义的Effect，不是应该在更新DOM之后吗（按照图中所示）2023-02-17归属地：广东