react生命周期

React 生命周期图

React声明周期图

React生命周期四大阶段：

什么是生命周期函数？

一句话：

生命周期函数指在某一个时刻组件会自动调用执行的函数。

比如：todo里的reder()函数就是一个生命周期函数，它在 state发生改变时自动执行。这就是一个标准的自动执行函数。

constructor我们叫构造函数，它是ES6的基本语法。虽然它和生命周期函数的性质一样，但不能认为是生命周期函数。

但是你要心里把它当成一个生命周期函数，可以看成React的Initialization阶段，定义属性（props）和状态(state)。

Mounting阶段（挂载阶段）

Mounting阶段伴随着整个虚拟DOM的生成，它里面包括三个小的生命周期函数，分别是：

componentWillMount : 在组件即将被挂载到页面的时刻执行。
render : 页面state或props发生变化时执行。

render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染
componentDidMount : 组件挂载完成时被执行。

组件第一次渲染完成，此时的dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染

componentWillMount和componentDidMount这两个生命周期函数，只在页面刷新时执行一次，而render函数是只要有state和props变化就会执行

Updation阶段（更新阶段）

Updation阶段是组件发生改变的更新阶段，这是React生命周期中比较复杂的一部分，它有两个基本部分组成，一个是props属性改变，一个是state状态改变

shouldComponentUpdate函数

shouldComponentUpdate函数会在组件更新之前，自动被执行。它要求返回一个布尔类型的结果，必须有返回值，返回true，就同意组件更新；返回false,就反对组件更新。

shouldComponentUpdate有两个参数：
- nextProps:变化后的属性;
- nextState:变化后的状态;
- 1
  2
  3
  4
  5
  6
  7
  8
  //避免子组件频繁无用渲染render
  shouldComponentUpdate(nextProps,nextState){
  if(nextProps.content !== this.props.content){
  return true
  }else{
  return false
  }
  }
componentWillUpadate函数

componentWillUpdate在组件更新之前，但shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false，这个函数就不会被执行了。
componentDidUpdate函数

componentDidUpdate在组件更新之后执行，它是组件更新的最后一个环节。
componentWillReceiveProps函数

子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。
- 也就是说这个组件第一次存在于Dom中，函数是不会被执行的;
- 如果已经存在于Dom中，函数才会被执行。

Unmounting阶段（卸载阶段）

componentWillUnmount函数

这个函数是组件从页面中删除的时候执行。
1. clear你在组件中所有的setTimeout、setInterval
2. 移除所有组件中的兼听 removeEventListener

参考：

技术胖