学习记录——react生命周期

本文详细介绍了React组件的生命周期,包括实例期、存在期和销毁期的重要函数。重点讲解了constructor、componentWillMount、render、componentDidMount等函数的作用及执行时机。

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

参考:https://www.jianshu.com/p/b331d0e4b398

生命周期函数

  1. 框架中提前设置好的
  2. 在一些关键时刻会执行
  3. 生命周期函数的逻辑需要我们自己编写

实例期

  1. contructor
  2. componentWillMount:初始化数据 (相当于vue里的created) 过期
  3. render(仅仅产生虚拟dom)
    ①render之后得到了一份虚拟dom
    ②ReactDom.render()只有这个方法将虚拟dom转换成真实dom
  4. componentDidMount:已经将虚拟dom转换成真实dom (vue里的mounted)

存在期

  1. componentWillReceiveProps 过期

  2. shouldComponentUpdate
    (1) 可以自定义返回一个布尔值
    (2) 决定我们组件是否更新
    (3) 如果未定义该函数,默认返回就是true
    (4) 提升性能

  3. componentWillUpdate 组件将要被更新过期

  4. render 组件正在更新

  5. componentDidUpdate组件已经更新完成

销毁期

  1. componentWillUnmount:组件将要销毁的时候执行 取消事件监听

新增生命周期
getDerivedStateFromProps(nextProps, prevState)
在这里插入图片描述

getSnapshotBeforeUpdate(prevProps, prevState)
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值