react生命周期整理

react生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gHhFLoVI-1647932009614)(/Users/sans/Desktop/生命周期.png)]

在React的类组件中，官方为其提供了生命周期的概念组件的生命周期大抵分为三个阶段：挂载（mount）、更新（update）、卸载（unmount）。

挂载阶段：在组件初始化中执行且只执行一次

更新阶段：当props和state改变时触发零次或多次

卸载阶段：在组件销毁时执行且只执行一次x

挂载阶段中涉及到的生命周期

1、constructor

通过给this.state赋值对象来初始化内部state
将事件处理程序方法绑定到实例。

constructor(props) {
   
  super(props);
  this.state = {
    name:sans };
  this.initData = this.initData.bind(this);
}

ps：不要把props直接赋值给state，这样操作state不会随着props更新而变化。

在constructor中不要调用setState方法，直接给this.state赋值

2、static getDerivedStateFromProps(props, state)

getDerivedStateFromProps是一个静态方法，在挂载和更新阶段时调用，可以返回一个对象来更新状态或者返回null不更新。

可以通过此生命周期函数比较新的props和之前的state中的数据，查看是否变化，再去更新state。也可以不判断直接更新state值。

static getDetivedStateFromProps(props,state){
   
  const {
    name } = props;
  // 判断新的props和之前的state是否相同，如果改变就相应更新state
  if( name != state.name)<