目录
v16 版本的生命周期。
生命周期仅存在于类组件中,函数组件每次调用都是重新运行函数,旧的组件即刻被销毁。
1,初始化 constructor
- 同一个组件对象只会创建一次。
- 在构造函数中,不能使用
this.setState()
。
该方法在组件挂载到 DOM 之前是不可用的。在执行构造函数时,挂载过程还没有开始。
初始化状态和属性:
constructor(props) {
super(props)
this.state = {
num: 0
}
}
2,render
- 返回一个虚拟DOM,会被挂载到虚拟DOM树中,最终渲染到页面的真实DOM中。
render
可能不止运行一次,只要需要重新渲染,就会运行。- 严禁使用
setState
,因为可能会导致无限递归渲染。
3,componentDidMount
- 只会执行一次。
- 可以使用setState。
- 通常情况下,会将网络请求、启动计时器等一开始需要的操作,在该函数中执行。
4,getDerivedStateFromProps
- 通过参数可以获取新的属性和状态。
- 该函数是静态的。
- 该函数的返回值会覆盖掉组件状态。
- 该函数使用场景极少。
state = {
n: this.props.n
}
static getDerivedStateFromProps(props, state) {
console.log("getDerivedStateFromProps");
// return null; // 不改变当前状态
return { // 用新的对象替换掉之前的状态
n: props.n
}
}
5,shouldComponentUpdate
- 通过返回
true
和false
来决定,是否要重新渲染该组件。 - 默认情况下,会直接返回
true
(返回 false 则结束,不会执行 render)。
shouldComponentUpdate(nextProps, nextState) {
console.log("是否应该重新渲染", this.props, nextProps, this.state, nextState)
if (this.props.n === nextProps.n && this.state.n === nextState.n) {
return false;
}
return true;
}
6,getSnapshotBeforeUpdate
- 真实DOM构建完成,但还未实际渲染到页面上。
- 在该函数中,通常用于实现一些附加的dom操作。
- 该函数的返回值,会作为
componentDidUpdate
的第三个参数(所以需要成对出现)。
7,componentDidUpdate
- 虚拟DOM已重新挂载到页面成为真实DOM。
- 往往在该函数中操作 dom,改变元素。
getSnapshotBeforeUpdate = (prevProps, prevState) => {
console.log("getSnapshotBeforeUpdate");
return 132;
}
// prevProps,prevState 都是更改前的内容。
componentDidUpdate(prevProps, prevState, snap) {
console.log("componentDidUpdate", snap); // 123
}
8,componentWillUnmount
通常在该函数中销毁一些组件依赖的资源,比如计时器。
9,其他的生命周期函数
参考文章-错误边界
9.1,getDerivedStateFromError
9.2,componentDidCatch
以上。