React18生命周期

React 18 引入了一些新的组件生命周期函数,以提供更灵活和强大的控制。在新的生命周期中,我们可以更好地处理组件的渲染、更新和卸载过程。下面我们将深入了解这些新的生命周期函数。

 

1. React的生命周期有哪些?

React 通常将组件生命周期分为三个阶段:

  • 装载阶段(Mount),组件第一次在DOM树中被渲染的过程;
  • 更新过程(Update),组件状态发生变化,重新更新渲染的过程;
  • 卸载过程(Unmount),组件从DOM树中被移除的过程;

React常见生命周期的过程大致如下:

  • 挂载阶段,首先执行constructor构造方法,来创建组件
  • 创建完成之后,就会执行render方法,该方法会返回需要渲染的内容
  • 随后,React会将需要渲染的内容挂载到DOM树上
  • 挂载完成之后就会执行componentDidMount生命周期函数🧨🧨🧨
  • 如果我们给组件创建一个props(用于组件通信)、调用setState(更改state中的数据)、调用forceUpdate(强制更新组件)时,都会重新调用render函数
  • render函数重新执行之后,就会重新进行DOM树的挂载
  • 挂载完成之后就会执行componentDidUpdate生命周期函数🧨🧨🧨
  • 当移除组件时,就会执行componentWillUnmount生命周期函数🧨🧨🧨

 

1)组件挂载阶段

挂载阶段组件被创建,然后组件实例插入到 DOM 中,完成组件的第一次渲染,该过程只会发生一次,在此阶段会依次调用以下这些方法:

  • constructor
  • getDerivedStateFromProps
  • render
  • componentDidMount

1.constructor


组件的构造函数,第一个被执行,若没有显式定义它,会有一个默认的构造函数,但是若显式定义了构造函数,我们必须在构造函数中执行 super(props),否则无法在构造函数中拿到this。

如果不初始化 state 或不进行方法绑定,则不需要为 React 组件实现构造函数Constructor。

constructor中通常只做两件事:

初始化组件的 state
给事件处理方法绑定 this

constructor(props) {
  super(props);
  // 不要在构造函数中调用 setState,可以直接给 state 设置初始值
  this.state = { counter: 0 }
  this.handleClick = this.handleClick.bind(this)
}

2.getDerivedStateFromProps 

static getDerivedStateFromProps(props, state)

在 render 之前调用,用于计算状态的派生状态。不太常用,因为它不允许直接访问组件实例。


static getDerivedStateFromProps(props, state) {
  console.log('Count---getDerivedStateFromProps', { props, state });
  return null;
}

这是个静态方法,所以不能在这个函数里使用 this,有两个参数 props 和 state,分别指接收到的新参数和当前组件的 state 对象,这个函数会返回一个对象用来更新当前的 state 对象,如果不需要更新可以返回 null。

该函数会在装载时,接收到新的 props 或者调用了 setState 和 forceUpdate 时被调用。如当接收到新的属性想修改 state ,就可以使用。

/
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值