参考原文：
https://juejin.im/post/5a062fb551882535cd4a4ce3
https://react.docschina.org/docs/state-and-lifecycle.html
React 生命周期图示
如图，React 生命周期主要包括三个阶段：
- 初始化阶段
- 运行中阶段
- 销毁阶段
在 React 不同的生命周期里，会依次触发不同的钩子函数，下面我们就来详细介绍一下 React 的生命周期函数。
一、初始化阶段
1、设置组件的默认属性
static defaultProps = {
name: 'tom',
age:23
};
//or
Counter.defaltProps={name:'tom'}
2、设置组件的初始化状态
constructor() {
super();
this.state = {number: 0}
}
3、componentWillMount()
组件即将被渲染到页面之前触发，此时可以进行开启定时器、向服务器发送请求等操作
4、render()
组件渲染
5、componentDidMount()
组件已经被渲染到页面中后触发，此时页面中有了真正的 DOM 的元素，可以进行 DOM 相关的操作
二、运行中阶段
1、componentWillReceiveProps()
组件接收到属性时触发
2、shouldComponentUpdate()
当组件接收到新属性，或者组件的状态发生改变时触发。组件首次渲染时并不会触发。
// 该钩子函数可以接收到两个参数，新的属性和状态
// 返回 true、false 来控制组件是否需要更新
shouldComponentUpdate(newProps, newState) {
if (newState.number<5) {
return true;
} else{
return false;
}
}
3、componentWillUpdate()
组件即将被更新时触发。
4、componentDidUpdate()
组件被更新完成后触发。页面中产生了新的 DOM 的元素，可以进行 DOM 操作
三、销毁阶段
1、componentWillUnmount()
组件被销毁时触发。这里我们可以进行一些清理操作，例如清理定时器，取消 Redux 的订阅事件等等。
下面看一个 Demo，看看一个组件的生命周期，数字表示执行顺序。点击按钮执行为 state 的 number 属性 +1。
class Counter extends React.Component {
static defaultProps = {
//1、加载默认属性
name: 'tom',
age:23
};
constructor() {
super();
//2、加载默认状态
this.state = {number: 0}
}
componentWillMount() {
console.log('3、组件挂载之前');
}
componentDidMount() {
console.log('5、组件挂载完成');
}
shouldComponentUpdate(newProps, newState) {
console.log('6、检查组件是否需要更新');
if (newState.number<5) {
return true;
} else{
return false;
}
}
componentWillUpdate() {
console.log('7、组件将要更新');
}
componentDidUpdate() {
console.log('8、组件更新完成');
}
handleClick = () => {
this.setState({
number: this.state.number + 1
})
};
render() {
console.log('4、render(组件挂载)');
return (
<div>
<p>{this.state.number}</p>
<button onClick={this.handleClick}>+</button>
</div>
)
}
}
ReactDOM.render(<Counter/>, document.getElementById('root'));
