【React】react的生命周期调用顺序

一、新生命周期

1、挂载阶段

1.1 constructor

（1）在React组件挂载之前被调用

（2） 初始化函数内部 state或者在this上挂载方法

1.2 getDerivedStateFromProps

（1）为静态方法，不能访问到组件实例this

（2）在创建或更新阶段调用或者在props、state和render方法前调用

（3）返回一个对象来更新 state, 如果返回 null 则不更新任何内容

1.3 render

（1）用于渲染DOM结构

（2）不要在 render 里面 setState, 否则会触发死循环导致内存崩溃

1.4 componentDidMount

（1） 挂载到真实DOM节点后执行，render方法之后执行

（2）是发送网络请求、启用事件监听方法的好时机

2、更新阶段

1.1 getDerivedStateFromProps

（1） 在创建或更新阶段调用或者在props、state和render方法前调用

1.2 shouldComponentUpdate

（1）在组件更新之前调用，可以控制组件是否进行更新， 返回true时组件更新， 返回false则不更新

（2）不要 shouldComponentUpdate 中调用 setState()，否则会导致无限循环调用更新、渲染，直至浏览器内存崩溃

1.3 render

1.4 getSnapshotBeforeUpdate

（1） render后执行，获取组件更新前的信息，即将对组件进行挂载时调用。

1.5 componentDidUpdate

（1）组件更新结束后触发。首次渲染不会执行

3、卸载阶段

1.1 componentWillUnmount

（1）组件卸载前调用

（2）此生命周期是取消网络请求、移除监听事件、清理 DOM 元素、清理定时器等操作的好时机

二、 旧生命周期

1、挂载阶段

constructor

componentWillMount（废弃）

render

componentDidMount

2、更新阶段

componentWillReceiveProps（废弃）

shouldComponentUpdate

componentWillUpdate（废弃）

render

componentDidUpdate

3、卸载阶段

componentWillUnmount