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 ，就可以使用。

/