React生命周期详解(图)

本文详细介绍了React组件的生命周期,包括16.3版本以前和以后的变更。重点讨论了被移除的生命周期方法,如componentWillMount等,以及新增的getDerivedStateFromProps和getSnapshotBeforeUpdate。React官方改动生命周期的主要目的是确保数据来源的单一性,减少潜在的Bug。

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

React16.3版本以前的生命周期

在这里插入图片描述

React16.3版本以后的生命周期

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

注意:

  • componentWillMount()、componentWillReceiveProps()、componentWillUpdate()在React16.3新版本中都被移除;
  • 在React16.3新版本的生命周期函数中,getSnapshotBeforeUpdate()生命周期函数必须要有返回值,且必须和componentDidUpdate()写在一起
  • getDerivedStateFromProps
    1. 通过参数可以获取新的属性和状态
    2. 该函数是静态的
    3. 该函数的返回值会覆盖掉组件状态
    4. 该函数几乎是没有什么用
  • getSnapshotBeforeUpdate
  1. 真实的DOM构建完成,但还未实际渲染到页面中。
  2. 在该函数中,通常用于实现一些附加的dom操作
  3. 该函数的返回值,会作为componentDidUpdate的第三个参数

详解

生命周期

生命周期:组件从诞生到销毁会经历一系列的过程,该过程就叫做生命周期。React在组件的生命周期中提供了一系列的钩子函数(类似于事件),可以让开发者在函数中注入代码,这些代码会在适当的时候运行。

生命周期仅存在于类组件中,函数组件每次调用都是重新运行函数,旧的组件即刻被销毁

旧版生命周期

React < 16.0.0

  1. constructor
    1. 同一个组件对象只会创建一次
    2. 不能在第一次挂载到页面之前,调用setState,为了避免问题,构造函数中严禁使用setState
  2. componentWillMount
    1. 正常情况下,和构造函数一样,它只会运行一次
    2. 可以使用setState,但是为了避免bug,不允许使用,因为在某些特殊情况下,该函数可能被调用多次
  3. render
    1. 返回一个虚拟DOM,会被挂载到虚拟DOM树中,最终渲染到页面的真实DOM中
    2. render可能不只运行一次,只要需要重新渲染,就会重新运行
    3. 严禁使用setState,因为可能会导致无限递归渲染
  4. componentDidMount
    1. 只会执行一次
    2. 可以使用setState
    3. 通常情况下,会将网络请求、启动计时器等一开始需要的操作,书写到该函数中
  5. 组件进入活跃状态
  6. componentWillReceiveProps
    1. 即将接收新的属性值
    2. 参数为新的属性对象
    3. 该函数可能会导致一些bug,所以不推荐使用
  7. shouldComponentUpdate
    1. 指示React是否要重新渲染该组件,通过返回true和false来指定
    2. 默认情况下,会直接返回true
  8. componentWillUpdate
    1. 组件即将被重新渲染
  9. componentDidUpdate
    1. 往往在该函数中使用dom操作,改变元素
  10. componentWillUnmount
    1. 通常在该函数中销毁一些组件依赖的资源,比如计时器

新版生命周期

React >= 16.0.0

React官方认为,某个数据的来源必须是单一的

  1. getDerivedStateFromProps
    1. 通过参数可以获取新的属性和状态
    2. 该函数是静态的
    3. 该函数的返回值会覆盖掉组件状态
    4. 该函数几乎是没有什么用
  2. getSnapshotBeforeUpdate
    1. 真实的DOM构建完成,但还未实际渲染到页面中。
    2. 在该函数中,通常用于实现一些附加的dom操作
    3. 该函数的返回值,会作为componentDidUpdate的第三个参数

React官方为什么要改它的生命周期

React16.3之前,用户在使用React的时候有一种反模式,组件的props和state同时控制数据(实现原理是在componentWillReceiveProps里监听props的变化,props是变化时使用this.setSate同步props和state的数据),数据来源不再单一。**React官方认为,某个数据的来源必须是单一的,否则很容易出现Bug。**且componentWillReceiveProps生命周期里用户可以操作this,所以在React16.3之后官方移除了componentWillReceiveProps,使用静态属性getDerivedStateFromProps(该属性几乎没什么用)来替代。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值