React 生命周期初探

概述

新版 React ( >16.0.0) 生命周期

constructor

1. 组件属性以及状态的初始化都在组件的构造函数中执行
2. 同一个组件只会调用一次 constructor
3. 在此状态下不要使用setState方法改变状态，我们知道状态更新后组件会重新渲染组件，此时的组件可能还没有挂载到页面中，这样就会导致一些 bug，

static getDerivedStateFromProps

1. 这个方法是一个静态方法，因此函数内的 this 指向构造函数而不是实例。
2. 这个方法的返回值会覆盖组件的状态
3. 当状态或者属性发生变化是就会触发该函数
4. 参数为：新的属性,新的状态

render

1. 返回一个虚拟 dom，并挂载到虚拟 dom 树中，最终会被渲染到页面中
2. render 可能会运行多次，每当需要重新渲染时，render 就会被调用
3. 在 render 中不能使用 setState，因为改变状态后可能会引发重新渲染，渲染又导致改变状态，最后导致无限递归渲染。

componentDidMount

1. 此时虚拟 dom 成功挂载到页面中变为真实 dom
2. 此时可以使用 setState 来改变状态
3. ajax 请求数据一般都放在该函数中

shouldComponentUpdate

1. 此函数必须返回一个布尔类型的值（不是布尔 react 会自动转换）
2. react 会根据该函数的返回值来确定是否要重新渲染组件，true 则重新渲染，false 则不渲染
3. 在此函数中能够做一些性能上的优化
4. 参数为：新的属性,新的状态

getSnapshotBeforeUpdate

1. 此函数执行时，真实 dom 已经加载完毕，但还未渲染到页面中
2. 通常在此函数中进行一些 dom 操作
3. 这个函数的返回值会作为componentDidUpdate的第三个参数
4. 参数为：之前的属性,之前的状态

componentDidUpdate

1. 此时组件已经重新渲染完成，虚拟 dom 重新挂载到页面中
2. 通常在该函数中进行一些 dom 操作改变元素
3. 参数为：之前的属性,之前的状态,上一个函数的返回值

componentWillUnmount

1. 此时组件即将被销毁
2. 通常在此函数中，销毁一些组件依赖的资源，如：定时器