React之生命周期函数

react生命周期函数图解

各个生命周期详解

1，comonentWillMount() 挂载前

在组件挂载前调用，且圈布局只调用一次，在这里可以发起异步请求，setState
这个函数在react.16当中废除，设置state在constructor当中完成

2，render（）渲染组件

是react必须定义的生命周期函数，用来渲染dom

3，componentDidMount() 组件挂载完成后

全局只调用一次，可使用refs来获取真实的dom元素，可以发起异步请求，以及setState（1，dom节点初始化，2，网络请求，3，添加订阅）

4，componentWillReceiveProps(nextprops) Props即将变化之前

react.16当中废除，由static getDerivedStateFromProps（）这个函数代替
props发生变化时，以及父组件重新渲染时都会触发该生命周期函数，在该狗子函数内可以通过参数nextprops获取变化后的props参数（this.props可以访问之前的props，可以setState）

5，shouldComponentUpdate(nextProps，nextstate) 是否重新渲染

组件挂载后，每次调用setState后都会调用这个函数，判断是否重新渲染，默认返回true（返回false则不渲染）

6，componentWillUpdate(nextprops,nextState)组件重新渲染之前

react.16当中废除，由getSnapshotBeforeUpdate()代替
上一个生命周期返回true/调用forceupdate之后，这个才会被调用，不能再次setState，否则会触发循环

7，componentDidUpdate(prevprops,prevstate)完成组件渲染

首次渲染：componentDidMount
其他次渲染：componentDidUpdate

8，componentWillUpdate（）组件即将被卸载

组件被卸载的时候调用，一般在componentDidMount里面注册的事件需要在这里删除

新增生命周期函数

1，static getDerivedStateFromProps(newxtProps,prevState)

代替componentWillReceiveProps
触发时间：在组件构建之后（虚拟dom之后，实际dom挂载之前），以及每一次获取新的props之后
注意：以下几个场景有可能触发这个钩子函数
（1）父组件的state发生变化（此时子组件的props有可能变化，也有可能不变），导致父组件中的当前组件被重新渲染
（2）子组件的属性props被修改时
（3）自身组件state变化时，也会触发
（4）初始化render（）之前会触发
其他：
[1]nextProps:传入后的props数据（最新的）
[2]prevstate:相对于合并state前的一个状态
[3]return{x:nextProps.a}//将props合并到state当中
++++return null 如果不需要返回其他东西，则必须写return null
[4]static 描述的是静态函数，没有this指向，无权操作实例，所以更安全，而且消耗的性能比较低
[5] 它将原本的componentWillReceiveProps功能进行了划分----更新state和操作/调用props，很大程度避免了职责不清而导致过多的渲染，从而影响该性能

2，getSnapShotBeforeUpdate(prevProps,prevState)在render（）之后执行

（1）此生命周期的返回值将作为第三个参数传递给componentDidUpdate
（2）这个生命周期函数不经常需要，但可以用于在恢复期间手动保存滚动位置

getSnapshotBeforeUpdate () {//很关键的，我们获取当前rootNode的scrollHeight，传到componentDidUpdate 的参数perScrollHeight
       return this.rootNode.scrollHeight;
     }
     componentDidUpdate (perProps, perState, perScrollHeight) {
       const curScrollTop= this.rootNode.scrollTop;
       if (curScrollTop < 5) return ;
       this.rootNode.scrollTop = curScrollTop + (this.rootNode.scrollHeight  - perScrollHeight);
       //加上增加的div高度，就相当于不动
     }