react新老生命周期总结

react生命周期（老）——三个阶段

一.初始化阶段
componentWillMount–即将挂载,render之前最后一次修改状态的机会
render–渲染页面，只能访问this.props和this.state,不允许修改状态
componentDidMount—挂载完成，render完成可以访问和修改页面DOM
注：初始阶段生命周期只在初始化时调用一次
二.运行中阶段
componentWillReceiveProps(nextProps):父组件修改属性触发，可接收到最新的props
shouldComponentUpdata(nextProps,nextState):是否允许页面更新，默认返回true，返回false会阻止render调用
componentWillUpdata–即将更新，不能修改属性和状态，强行修改会导致内存泄露死循环
render–渲染页面，只能访问this.props和this.state,不允许修改状态
componentUpdata（prevProps, prevState,value）–完成更新，可以修改dom,第三个参数是配合新生命周期getSnapshotBeforeUpdate使用
三.销毁阶段
componentWillUnmount–在删除组件前进行清理操作，例如监听时间和倒计时
老生命周期存在的问题？（为什么会出现新的生命周期代替上述标红的生命周期？）
(1) componentWillMount ,在ssr（服务端渲染）中 这个方法将会被多次调用， 所以会重复触发多遍，同时在这里如果绑定事件，将无法解绑，导致内存泄漏 ， 变得不够安全高效逐步废弃。
(2) componentWillReceiveProps 外部组件多次频繁更新传入多次不同的 props，会导致不必要的异步请求
(3) componetWillupdate, 更新前记录 DOM 状态, 可能会做一些处理，与componentDidUpdate相隔时间如果过长， 会导致状态不太信，不够精准使数据产生偏差
注：在使用以上三个被逐步废弃的生命周期需要加上UNSAFE_前缀

新生命周期的替代

(1)static getDerivedStateFromProps(nextProps)–第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ，返回一个对象作为新的state，返回null则说明不需要在这里更新state。相当于替代了componentWillMount和componentWillReceiveProps

(2)getSnapshotBeforeUpdate取代了 componetWillUpdate ,触发时间为update发生的时候，在render之后dom渲染之前返回一个值，作为componentDidUpdate的第三个参数。