深入探讨 React 组件生命周期（新版）
深入探讨 React 组件生命周期（新版）
React 18 引入了一些新的组件生命周期函数，以提供更灵活和强大的控制。在新的生命周期中，我们可以更好地处理组件的渲染、更新和卸载过程。下面我们将深入了解这些新的生命周期函数。
1. componentDidMount
在组件挂载到 DOM 后立即调用。这是执行初始化操作的好地方，例如数据获取、订阅事件等。
componentDidMount() {
console.log('Count---componentDidMount');
}
2. componentWillUnmount
在组件即将被卸载和销毁之前调用。可以执行一些清理工作，如取消订阅、清除计时器等。
componentWillUnmount() {
console.log('Count---componentWillUnmount');
}
3. shouldComponentUpdate
在组件更新之前调用，用于判断组件是否需要重新渲染。默认情况下，它返回 true。
shouldComponentUpdate() {
console.log('Count---shouldComponentUpdate');
return true;
}
4. componentDidUpdate
在组件更新后立即调用。可以在这里执行与更新相关的操作，并访问先前的 props、state 以及 getSnapshotBeforeUpdate 返回的快照值。
componentDidUpdate(prevProps, prevState, snapshotValue) {
console.log('Count---componentDidUpdate', { prevProps, prevState, snapshotValue });
}
5. getDerivedStateFromProps
在 render 之前调用，用于计算状态的派生状态。不太常用，因为它不允许直接访问组件实例。
static getDerivedStateFromProps(props, state) {
console.log('Count---getDerivedStateFromProps', { props, state });
return null;
}
6. getSnapshotBeforeUpdate
在最近的一次渲染输出提交给 DOM 之前调用。返回值将作为 componentDidUpdate 的第三个参数。
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('Count---getSnapshotBeforeUpdate', { prevProps, prevState });
return { name: 'Judith' };
}
举个例子
class Count extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidMount() {
console.log('Count---componentDidMount');
}
componentWillUnmount() {
console.log('Count---componentWillUnmount');
}
shouldComponentUpdate() {
console.log('Count---shouldComponentUpdate');
return true;
}
componentDidUpdate(prevProps, prevState, snapshotValue) {
console.log('Count---componentDidUpdate', { prevProps, prevState, snapshotValue });
}
// 若state的值在任何时候都取决于props，很少用到
static getDerivedStateFromProps(props, state) {
console.log('Count---getDerivedStateFromProps', { props, state });
return null;
}
getSnapshotBeforeUpdate(prevProps, prevState) {
console.log('Count---getSnapshotBeforeUpdate', { prevProps, prevState });
return { name: 'Judith' };
}
add = () => {
const { count } = this.state;
this.setState({ count: count + 1 });
}
unmount = () => {
ReactDOM.unmountComponentAtNode(document.getElementById('root'));
}
force = () => {
this.forceUpdate();
}
render() {
console.log('Count---render');
const { count } = this.state;
return (
当前值：{count}
);
}
}
通过深入了解 React 18 中引入的这些新的生命周期函数，我们能够更好地掌握组件的生命周期，实现更精细的控制和更高效的性能优化。在开发中，根据具体场景合理使用这些生命周期函数，将有助于构建更灵活、可维护的 React 应用。
参考
- 深入探讨 React 组件生命周期（新版）
- 完整代码