React组件(一):生命周期

文章目录

组件的生命周期

在组件创建、到加载到页面上运行、以及组件被销毁的过程中,总是伴随着各种各样的事件,这些在组件特定时期,触发的事件统称为组件的生命周期。

生命周期的阶段

组件生命周期分为三个阶段,下面分别来讲解。

1、组件创建阶段

组件创建阶段的生命周期函数,有一个显著的特点:创建阶段的生命周期函数,在组件的一辈子中,只执行一次。

  • getDefaultProps

初始化 props 属性默认值。

  • getInitialState

初始化组件的私有数据。因为 state 是定义在组件的 constructor 构造器当中的,只要new 了 class类,必然会调用 constructor构造器。

  • componentWillMount()

组件将要被挂载。此时还没有开始渲染虚拟DOM。

在这个阶段,不能去操作DOM元素,但可以操作属性、状态、function。相当于 Vue 中的Create()函数。

  • render()

第一次开始渲染真正的虚拟DOM。当render执行完,内存中就有了完整的虚拟DOM了。

意思是,此时,虚拟DOM在内存中创建好了,但是还没有挂在到页面上。

在这个函数内部,不能去操作DOM元素,因为还没return之前,虚拟DOM还没有创建;当return执行完毕后,虚拟DOM就创建好了,但是还没有挂在到页面上。

  • componentDidMount()

当组件(虚拟DOM)挂载到页面之后,会进入这个生命周期函数

只要进入到这个生命周期函数,则必然说明,页面上已经有可见的DOM元素了。此时,组件已经显示到了页面上,state上的数据、内存中的虚拟DOM、以及浏览器中的页面,已经完全保持一致了。

当这个方法执行完,组件就进入都了 运行中 的状态。所以说,componentDidMount 是创建阶段的最后一个函数。

在这个函数中,我们可以放心的去 操作 页面上你需要使用的 DOM 元素了。如果我们想操作DOM元素,最早只能在 componentDidMount 中进行。相当于 Vue 中的 mounted() 函数

2、组件运行阶段

有一个显著的特点,根据组件的state和props的改变,有选择性的触发0次或多次。

  • componentWillReceiveProps()

组件将要接收新属性。只有当父组件中,通过某些事件,重新修改了 传递给 子组件的 props 数据之后,才会触发这个钩子函数。

  • shouldComponentUpdate()

判断组件是否需要被更新。此时,组件尚未被更新,但是,state 和 props 肯定是最新的。

  • componentWillUpdate()

组件将要被更新。此时,组件还没有被更新,在进入到这个生命周期函数的时候,内存中的虚拟DOM还是旧的,页面上的 DOM 元素也是旧的。(也就是说,此时操作的是旧的 DOM元素)

  • render

此时,又要根据最新的 state 和 props,重新渲染一棵内存中的 虚拟DOM树。当 render 调用完毕,内存中的旧DOM树,已经被新DOM树替换了!此时,虚拟DOM树已经和组件的 state 保持一致了,都是最新的;但是页面还是旧的。

  • componentDidUpdate

此时,组件完成更新,页面被重新渲染。此时,state、虚拟DOM 和 页面已经完全保持同步。

3、组件销毁阶段

一辈子只执行一次。

  • componentWillUnmount: 组件将要被卸载。此时组件还可以正常使用。

组件生命周期的执行顺序

1、Mounting

  • constructor()

  • componentWillMount()

  • render()

  • componentDidMount()

2、Updating

  • componentWillReceiveProps(nextProps):接收父组件传递过来的属性

  • shouldComponentUpdate(nextProps, nextState):一旦调用 setState,就会触发这个方法。方法默认 return true;如果 return false,后续的方法就不会走了。

  • componentWillUpdate(nextProps, nextState)

  • render()

  • componentDidUpdate(prevProps, prevState)

3、Unmounting

  • componentWillUnmount()
相关推荐
IT_陈寒3 分钟前
SpringBoot实战:这5个隐藏技巧让我开发效率提升200%,90%的人都不知道!
前端·人工智能·后端
ObjectX前端实验室15 分钟前
【图形编辑器架构】节点树与渲染树的双向绑定原理
前端·计算机图形学·图形学
excel28 分钟前
Vue2 与 Vue3 生命周期详解与对比
前端
一只猪皮怪51 小时前
React 18 前端最佳实践技术栈清单(2025版)
前端·react.js·前端框架
Misnice1 小时前
React渲染超大的字符串
前端·javascript·react.js
天天向上的鹿茸1 小时前
用矩阵实现元素绕不定点旋转
前端·线性代数·矩阵
李鸿耀4 小时前
主题换肤指南:设计到开发的完整实践
前端
带娃的IT创业者9 小时前
TypeScript + React + Ant Design 前端架构入门:搭建一个 Flask 个人博客前端
前端·react.js·typescript
二十雨辰10 小时前
vite如何处理项目中的资源
开发语言·javascript
非凡ghost10 小时前
MPC-BE视频播放器(强大视频播放器) 中文绿色版
前端·windows·音视频·软件需求