React 组件实例的生命周期

最新推荐文章于 2024-11-13 17:32:28 发布

猫子猪

最新推荐文章于 2024-11-13 17:32:28 发布

阅读量280

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 React 生命周期

本文链接：https://blog.youkuaiyun.com/u012372720/article/details/93999855

前端专栏收录该内容

13 篇文章

订阅专栏

本文深入解析React组件的生命周期，包括创建、挂载、更新和卸载四个阶段。详细阐述了各阶段的方法调用顺序，如constructor、render、componentDidMount、shouldComponentUpdate、componentWillUpdate、componentDidUpdate和componentWillUnmount等，帮助开发者更好地理解和掌握React组件的生命周期管理。

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

生命周期

简单来说，一个 React 组件实例从创建到销毁，会经历创建->挂载->更新（也许重复更新）->销毁的过程。

一、创建和挂载

React.js 将组件渲染，并且构造 DOM 元素然后插入页面的过程称为组件的挂载。

当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

constructor()  // React 组件的构造函数

render() // React 组件的渲染函数

componentDidMount() // 在组件挂载（插入 DOM 树中）后触发

二、更新

1. 组件自身的更新

当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

shouldComponentUpdate() // 默认当 props 或 state 发生变化时，在渲染执行之前触发

componentWillUpdate() // props 或 state 发生改变时触发

render()

componentDidUpdate() // 在更新后立即触发

2. 父组件引发的更新

父组件发生 render 的时候，无论 props 有没有更新，也无论父子组件之间有没有数据交换，子组件都会触发更新周期。

父组件引发子组件更新的生命周期调用顺序如下：

componentWillReceiveProps() // Component 接受到新的状态 (props) 时触发

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

三、卸载

当组件从 DOM 中移除时会调用如下方法：

componentWillUnmount() // 在组件卸载及销毁之前触发

总结

React 生命周期图