react中的生命周期函数

万物皆有生命周期。
生命周期函数指在某一个时刻组件会自动执行的函数。
render
constructor也可以理解为一个生命周期函数。在组件一创建的时刻，被自动的调用

1、initialzation 组件初始化的时候 （constructor的调用）
初始化数据 state and props
2、 Mounting 挂载
a. componentWillMount
在组件即将被挂载到页面的时刻自动执行
b.render
内容渲染到页面
c.componentDidMount
组件被挂载到页面之后自动执行

componentWillMount和componentDidMount只在组件挂载的时候执行。各执行一次。组件挂载之后render函数可能多次执行（当数据发生改变时）

3、Updation 组件更新流程（数据发生变化时）

props发生变化时：
a. componentWillReceiveProps —>states变化中没有，二者唯一不同的差异
子组件将要接收属性
// 当一个组件从父组件接收了参数
// 只有父组件的render函数重新被执行了。子组件的componentWillReceiveProps函数就会执行
如果这个组件第一次存在于父组件中，不会执行
如果这个组件之前已经存在于父组件中，才会执行

b.shouldComponentUpdate(){}
确认更新组件吗
组件更新之前，会自动的执行.
返回一个布尔值，当为true时，组件才会更新。可用于react组件的更新的性能优化
c. componentWillUpdate(){}
组件将要更新之前它会自动执行，但是在shouldComponentUpdate之后被执行,如果shouldComponentUpdate 返回false,它将不会执行。返回true才会执行。
d.render
重新渲染
e.componentDidUpdate
组件更新完成。

---

state发生变化时
1.shouldComponentUpdate
2.componentWillUpdate
3.render
4.componentDidUpdate

4、 Unmounting // 组件卸载之后
componetWillUnmount
组件将要从页面中剔除的时候自动执行

---

生命周期函数的使用场景
1、当子组件不必要更新时，可用shouldComponentUpdate 返回false来提升代码性能
shouldComponentUpdate(nextProps, nextState)
接收nextProps和nextState

2、异步的获取数据
在conponemtDidMunt中进行异步数据获取
提升react代码性能的方法
1.在constructor中改变需要改变作用域的函数的作用域。

constructor (props){
  super(props)
  this.handleClick = this.handleClick.bind(this)
}

2.在setState()中传入函数，setState是一个异步函数，它会把多次的数据改变合并成一次，降低虚拟dom的比对频率。
3.借助shouldComponetUpdate生命周期函数来避免组件不必要的虚拟dom比对和render渲染