React组件生命周期

组件生命周期：

• 组件从创建到消失，它会经历一些特定的阶段
• React组件中包含一系列钩子函数（生命周期回调函数）
• 在定义组件时，会在特定的生命周期回调函数中，做特定的工作

生命周期函数：（生命周期钩子）

挂载阶段（初始化）：

constructor() 构造器函数执行

componentWillMount() 组件将要挂载，挂载前执行一次

render() 组件挂载（渲染到页面），render函数会执行1+n次，n为组件状态改变的次数

componentDidMount() 组件挂载完毕后立即执行，且只执行一次

更新阶段：（state变化）正常更新

shouldComponentUpdate() 不写默认返回true，允许更新状态（控制组件更新的阀门）

componentWillUpdate() 组件将要更新时执行（在页面重新渲染前执行一次）

render()  重新渲染

componentDidUpdate()  组件更新完成后执行

强制更新：（state不修改）不走阀门（this.forceUpdate()）

componentWillUpdate() 组件将要更新时执行（在页面重新渲染前执行一次）

render()  重新渲染

componentDidUpdate()  组件更新完成后执行

父组件更新时

componentWillReceiveProps() 子组件将要接收新的props（第一次不算）

...

componentWillUnmount() 组件即将卸载前执行（ReactDom.unmountComponentAtNode()）

react生命周期图（旧）：

 react生命周期图：（新）

新-旧对比：

• 新生命周期图中，废弃或即将废弃3个钩子函数（componentWillMount, componentWillReceiveProps, componentWillUpdate）
• 新生命周期图中，又提出两个新函数（两个get...）

1. getDerivedStateFromProps() 若state的值在任何时候都取决于props，那么可以使用这个函数

2. getSnapshotBeforeUpdate() 在即将更新组件之前获取快照（返回需要的数据）