React生命周期（附vue生命周期图）

React框架中的生命周期

React生命周期可以分成三个阶段，首先是挂载阶段，然后是渲染，最后是卸载。

生命周期图

挂载卸载阶段

第一步，constructor()
首先我们使用的数据需要进行初始化，初始化是在constructor()中完成，它接收一般是props，当我们使用时，必须使用super（）来传入参数。
特别注意：只要使用了constructor就必须写如super（），不然后面的this.state就会出现错误。整个写法是，

constructor(props){
     super(props);
     this.state = {
     //需要初始化的数据
     }
}

第二，componentWillMount()
这一步很少用到，它表示组件经过了constructor初始化的，但是这个时候没有渲染到DOM，所以，在代码中几乎不用写这个函数。
第三，componentDidMount()
这里是很重要的，这一步组件第一次渲染完成，此时DOM节点已经存在了，一般我们调用Ajax请求，就是写在这个函数里，返回数据setState后，组件就会重新渲染。整个写法是

componentDidMount() {

    this.setState(
      {
        
      },
  }

第四，componentWillUnmount ()
卸载组件，移除数据，组件中的定时器，时间监听等。

更新过程

整个过程最多的是render()
我们平时学到的div的操作就是写在这里面的
官方一点的说法是，render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染。
整个过程的写法是，

render() {
    return (
      <div className={styles.container}>
       
      </div>
    );
  }

我上面说的都是项目中用到的
整个生命周期，可以参考生命周期
写法可以参考React代码写法

vue生命周期图