概述
新版 React ( >16.0.0) 生命周期
constructor
- 组件属性以及状态的初始化都在组件的构造函数中执行
- 同一个组件只会调用一次
constructor
- 在此状态下不要使用
setState
方法改变状态,我们知道状态更新后组件会重新渲染组件,此时的组件可能还没有挂载到页面中,这样就会导致一些 bug,
static getDerivedStateFromProps
- 这个方法是一个静态方法,因此函数内的
this
指向构造函数而不是实例。 - 这个方法的返回值会覆盖组件的状态
- 当状态或者属性发生变化是就会触发该函数
- 参数为:新的属性,新的状态
render
- 返回一个虚拟
dom
,并挂载到虚拟dom
树中,最终会被渲染到页面中 render
可能会运行多次,每当需要重新渲染时,render
就会被调用- 在
render
中不能使用setState
,因为改变状态后可能会引发重新渲染,渲染又导致改变状态,最后导致无限递归渲染。
componentDidMount
- 此时虚拟
dom
成功挂载到页面中变为真实dom
- 此时可以使用
setState
来改变状态 ajax
请求数据一般都放在该函数中
shouldComponentUpdate
- 此函数必须返回一个布尔类型的值(不是布尔
react
会自动转换) react
会根据该函数的返回值来确定是否要重新渲染组件,true
则重新渲染,false
则不渲染- 在此函数中能够做一些性能上的优化
- 参数为:新的属性,新的状态
getSnapshotBeforeUpdate
- 此函数执行时,真实
dom
已经加载完毕,但还未渲染到页面中 - 通常在此函数中进行一些
dom
操作 - 这个函数的返回值会作为
componentDidUpdate
的第三个参数 - 参数为:之前的属性,之前的状态
componentDidUpdate
- 此时组件已经重新渲染完成,虚拟
dom
重新挂载到页面中 - 通常在该函数中进行一些
dom
操作改变元素 - 参数为:之前的属性,之前的状态,上一个函数的返回值
componentWillUnmount
- 此时组件即将被销毁
- 通常在此函数中,销毁一些组件依赖的资源,如:定时器