目录
- 三种生命状态
- 八种生命周期钩子
- 生命周期钩子的实际调用顺序
一、 react组件的3种生命状态
react组件具有三个生命状态：
- Mounting 生成
- Updating 更新
- Unmounting 卸载
二、 react组件的8种生命周期钩子
1. constructor(props) ： 组件生成前调用，继承父类的props与上下文(context)
constructor(props, context) {
super(props, context); // 以继承类的方法声明react组件，需要调用super继承props
this.state = { // 自有state（只能通过this.setState(object)进行修改）
color: props.initialColor
};
}
2. componentWillMount() ： 在生成组件(mount)开始的前一瞬间触发，在render()前被调用
3. componentDidMount() ： 在生成组件(mount)结束的后一瞬间触发，是个调用远程数据的好位置
4. componentWillReceiveProps(nextProps) ：生成的组件在接收到新的props时调用，this.setState()不会触发此生命钩子
5. shouldComponentUpdate(nextProps, nextState) ： 在render()前触发，但是不影响子组件的渲染更新；初次渲染不调用；返回false则不调用componentWillUpdate与componentDidUpdate
6. componentWillUpdate(nextProps, nextState) ： 在因接收到新的props或state导致的render()前一瞬间触发；初次渲染不调用
7. componentDidUpdate(prevProps, prevState) ：update结束后立即触发，适合在此处对更新后的DOM进行操作；初次渲染不调用
8. componentWillUnmount() ： 在组件被卸载或销毁后的后一瞬间触发，常在此方法中完成清理
三、 react组件的生命周期钩子调用顺序
1. Mounting
以下方法在组件被创建、插入DOM时，被依次调用
- constructor()
- componentWillMount()
- render()
- componentDidMount()
2. Updating
props或state改变时，引发一次update事件，依次调用以下函数进行重新渲染：
- componentWillReceiveProps()
- shouldComponentUpdate()
- componentWillUpdate()
- render()
- componentDidUpdate()
3. Unmounting
组件从DOM中移除时，调用以下方法：
- componentWillUnmount()
