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