React生命周期

1.新生命周期钩子

 挂载时

(1)constructor

①触发时机：创建组件时，最先执行

②作用：1.初始化state 2.为事件处理程序绑定this

(2)getDerivedStateFromProps

①触发时机：在调用render方法之前调用，并且在初始化挂载及后续更新时都被调用。

②作用：返回一个一个对象来更新state，如果返回null则不更新任何内容

(3)render

①触发时机：每次组件被渲染的时候都会被触发

②作用：渲染ul结构（注意：不能调用setState()）

(4)componentDidMount

①触发时机：组件挂载后（完成DOM渲染）后

②作用：1.发送网络请求2.DOM操作

更新时

执行时机：setState() 、forceUpdate() 、组件接收到新的props

(1)shouldComponentUpdate（nextProps，nextState）

①触发时机：组件更新触发

②作用： 可极大提高性能，因为每次dom的描绘非常消耗性能，shouldComponentUpdate可以控制Dom的渲染，默认情况下，它返回true。如果你确定组件在状态或道具更新后不需要渲染，则可以返回false值。这是提高性能的好地方，因为如果组件收到新的props，它可以防止重新渲染。

(2)render

(3)getSnapshotBeforeUpdate

①触发时机：在最近一次渲染输出（提交到 DOM 节点）之前调用。

②作用：组件能在发生更改之前从 DOM 中捕获一些信息（例如，滚动位置）。此生命周期的任何返回值将作为参数传递给 componentDidUpdate()

(4)componentDidUpdate

①触发时机： 组件更新（完成DOM渲染）后

②作用：1.发送网络请求2.DOM操作   (如果要setState()必须放在一个if条件中)

卸载

(1)componentWillUnmount

①触发时机：组件卸载（从页面消失）

②作用：执行清理工作（清理定时器等！）性能优化

2.旧生命周期钩子

 挂载时

(1)constructor

(2)componentWillMount

(3)render

(4)componentDidMount

更新时

(1)componentWillReceiveProps

(2)shouldComponentUpdate

(3)ComponentWillUpdate

(4)render

(5)componentDidUpdate

卸载

(1)componentWillUnmount