React的生命周期

React组件的生命周期

组件的生命周期可以分成三个状态：

• Mounting 已插入真实的DOM
• Updating 正在被重新渲染
• Unmounting 已经被移出真实的DOM

React为每个状态提供了两种处理函数

• will 函数在进入状态前进行调用
• did 函数在进入状态后调用

三种状态共有5种处理函数

• componentWillMount()
• componentDidMount()
• componentWillUpdate()
• componentDidUpdate()
• componentWillUnmount()

React还提供了一些特殊的处理函数，下面我们分阶段来介绍：

在不同的生命周期内可以自定义的函数：
## 初始化##
- getDefaultProps
- getInitialState
- componentWillMount
- render
- componentDidMount
（这几个函数的执行顺序也是按照上面的顺序从上到下开始执行）
## 运行中##
- componentWillReceiveProps
- shouldComponentUpdate
- render
- componentDidUpdate
##销毁##
- componentWillUnmount

各个阶段函数使用介绍

初始化阶段

• getDefaultProps：只调用一次，实例之间共享引用
• getInitialState：初始化每个实例特有的状态
• componentWillMount：render之前最后一次修改状态的机会
• render：只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
• componentDidMount：成功render并渲染完成真是DOM之后触发，可以修改DOM

运行中阶段

• componentWillReceiveProps：父组件修改属性触发，可以修改新的属性，新的状态
• shouldComponentUpdate：返回false会阻止render调用
• render：只能访问this.props和this.state，只有一个顶层组件，不允许修改状态和DOM输出
• componentDidUpdate：可以修改DOM

销毁阶段

• componentWillUnmount：在删除组件之前进行清理的操作，比如计时器和时间监听器。