react生命周期和组件生命周期

最新推荐文章于 2025-05-14 21:30:45 发布

转载最新推荐文章于 2025-05-14 21:30:45 发布 · 47 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/CoderZX/p/10658538.html

文章标签：

#javascript #ViewUI

本文详细介绍了React组件从创建、挂载到卸载整个生命周期的过程。包括各个生命周期函数的作用、调用时机及其之间的联系，有助于理解React组件的状态管理和性能优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

React的组件在第一次挂在的时候首先获取父组件传递的props，接着获取初始的state值，接着经历挂载阶段的三个生命周期函数，也就是ComponentWillMount，render，ComponentDidMount，这三个函数分别代表组件将会挂载，组件渲染，组件挂载完毕三个阶段，在组件挂载完成后，组件的props和state的任意改变都会导致组建进入更新状态，在组件更新阶段，如果是props改变，则进入ComponentWillReceiveProps函数，接着进入ComponentShouldUpdate进行判断是否需要更新，如果是state改变则直接进入ComponentShouldUpdate判定，这个默认是true，当判定不需要更新的话，组件继续运行，需要更新的话则依次进入ComponentWillMount，render，ComponentDidMount三个函数，当组件卸载时，会首先进入生命周期函数ComponentWillUnmount,之后才进行卸载，如图

React的生命周期函数：

初始化阶段：getDefaultProps获取实例的默认属性，getInitialState获取每个实例的初始化状态，ComponentWillMount：组件将被装载，渲染到页面上，render：组件在这里生成虚拟的DOM节点，ComponentDidMount:组件真正被装载之后

运行中状态： componentWillReceiveProps:组件将要接收到属性的时候调用 shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）shouldComponentUpdate 这个方法用来判断是否需要调用 render 方法重新描绘 dom。因为 dom 的描绘非常消耗性能，如果我们能在 shouldComponentUpdate 方法中能够写出更优化的 dom diff 算法，可以极大的提高性能。 componentWillUpdate:组件即将更新不能修改属性和状态 render:组件重新描绘 componentDidUpdate:组件已经更新销毁阶段： componentWillUnmount:组件即将销毁

转载于:https://www.cnblogs.com/CoderZX/p/10658538.html