目录
static getDerivedStateFromProps()
static getDerivedStateFromProps()
static getDerivedStateFromError()
简介
React 是一个用于构建用户界面的 JavaScript 库,其组件系统使得构建复杂的应用程序变得更加容易。 React 组件从创建到销毁会经历一系列的生命周期方法,了解这些方法对于优化组件性能和确保组件正确工作至关重要。 在这篇博客中,我们将深入探讨 React 的生命周期,从挂载到更新,再到卸载
概述
React 组件的生命周期可以分为三个主要阶段:挂载(Mounting)、更新(Updating)和卸载(Unmounting)。 此外,还有一个错误处理阶段。 每个阶段都有相应的生命周期方法,这些方法允许开发者在组件的不同阶段执行特定的操作。
- 挂载阶段:组件实例被创建并插入到 DOM 中。
- 更新阶段:组件的状态或属性发生变化,组件重新渲染。
- 卸载阶段:组件被从 DOM 中移除。
- 错误处理阶段:在渲染、生命周期方法或构造函数中抛出错误。
挂载阶段
挂载阶段包括以下四个生命周期方法:
constructor()
constructor()
是类组件的构造函数,用于初始化状态和绑定方法
constructor(props) {
super(props);
this.state = {
count: 0
};
}
- 作用:初始化状态和方法绑定。
- 注意:如果不需要初始化状态或绑定方法,可以省略构造函数。
static getDerivedStateFromProps()
getDerivedStateFromProps()
是一个静态方法,在每次组件更新之前都会调用
static getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.someValue !== prevState.someValue) {
return { someValue: nextProps.someValue };
}
return null;
}
- 作用:根据 props 更新 state。
- 注意:返回一个对象来更新 state,如果不需要更新返回 null。
render()
render()
方法是类组件必须实现的,它返回要渲染的元素。
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.increment}>Increment</button>
</div>
);
}
- 作用:渲染组件。
- 注意:这个方法必须是纯函数,不应该有副作用。
componentDidMount()
componentDidMount()
在组件挂载后立即调用
componentDidMount() {
// 请求数据或设置定时器
this.timerID = setInterval(() => this.tick(), 1000);
}
- 作用:执行副作用,如数据获取、订阅等。
- 注意:在这里设置的定时器或订阅需要在 中清除。
componentWillUnmount()
更新阶段
更新阶段包括以下五个生命周期方法:
static getDerivedStateFromProps()
此方法与挂载阶段相同,更新阶段每次更新前也会调用
shouldComponentUpdate()
shouldComponentUpdate()
允许我们优化组件性能,通过控制组件是否需要重新渲染
shouldComponentUpdate(nextProps, nextState) {
return nextState.count !== this.state.count;
}
- 作用:控制组件是否重新渲染。
- 注意:默认返回 true,如果返回 false,则阻止组件更新。
render()
此方法在更新阶段与挂载阶段相同,每次更新都会调用。
getSnapshotBeforeUpdate()
getSnapshotBeforeUpdate()
在更新发生前调用,它返回的值将作为 componentDidUpdate()
的第三个参数
getSnapshotBeforeUpdate(prevProps, prevState) {
if (prevProps.list.length < this.props.list.length) {
return this.listRef.scrollHeight;
}
return null;
}
- 作用:捕获更新前的 DOM 状态。
- 注意:返回的值会传递给 。
componentDidUpdate()
componentDidUpdate()
componentDidUpdate()
在组件更新后立即调用
componentDidUpdate(prevProps, prevState, snapshot) {
if (snapshot !== null) {
this.listRef.scrollTop += this.listRef.scrollHeight - snapshot;
}
}
- 作用:处理 DOM 更新后的逻辑。
- 注意:在这里可以访问更新前的 props 和 state 以及 的返回值。
getSnapshotBeforeUpdate()
卸载阶段
卸载阶段包括一个生命周期方法:
componentWillUnmount()
componentWillUnmount()
在组件卸载和销毁之前立即调用
componentWillUnmount() {
clearInterval(this.timerID);
}
- 作用:清理副作用,如取消订阅、清除定时器等。
- 注意:避免内存泄漏的重要方法。
错误处理阶段
错误处理阶段包括两个生命周期方法:
static getDerivedStateFromError()
getDerivedStateFromError()
在渲染过程中、生命周期方法或构造函数中抛出错误时调用
static getDerivedStateFromError(error) {
return { hasError: true };
}
- 作用:更新 state 以显示错误界面。
- 注意:在这里可以捕获错误并更新 state。
componentDidCatch()
componentDidCatch()
在子组件抛出错误时调用
componentDidCatch(error, info) {
logErrorToService(error, info);
}