react生命周期总结

         刚学习react的时候就对生命周期做了一次总结，这次应用中却发现可能运用的不太好。生命周期的错误使用可能导致代码中出现奇奇怪怪的bug,Fiber机制的更改也是更改了某些生命周期，导致了某些生命周期的废弃。这边对react生命周期进行再次的总结，这一次真正理清react生命周期。

      当组件实例被插入到dom实例中，实现的生命周期顺序如下：

      constructor:构造函数，这边一般进行初始state的赋值

      componentWillmount:(已被废弃，尽量避免使用)

      getDerivedStateFromProps(props, state):在render之前触发，返回一个对象来更新state

      render():渲染

      componentDidMount:会在组件渲染之后立即执行，这边适合需要操作dom，以及发送ajax请求

 

  更新阶段：

  getDerivedStateFromProps(props, state):通过返回一个对象来更新state

  shouldComponentUpdate(nextProps, nextState):组件优化的重要生命周期，减少组件的重复渲染,默认返回false，当state，props发生变化时，会重新渲染。可以通过比较state，nextState,props,nextProps来减少重新渲染。

  render:渲染

  getSnapShotBeforeUpdate(prevProps, prevState):render之后执行，可以拿到dom相关信息，返回一个值作为参数传给componentDidUpdate()

  componentDidUpdate(prevProps, prevState,snapshot):

 

  卸载阶段：

componentWillUnmount:组件卸载时调用，在这里实现一些清除操作

 

补充：还有一些生命周期在16的时候已经被废弃，这边就没有指出了，这是因为之前的调和阶段是同步执行的，现在fiber机制更改之后，react会按照优先级进行异步的更新，这样子避免了阻塞问题，但是因为改成异步流程，一些更新会因为其他的插入等问题会多次的被打断重启，这样子某些生命周期（componentWillmount，componentWillUpdate,componentWillReceivesProps）就会多次执行，可能会造成一些bug，所以尽量避免使用。