📅 最后修改于: 2023-12-03 15:04:51.350000 🧑 作者: Mango
在使用 ReactJS 开发应用程序时，组件生命周期是非常重要的概念。组件生命周期描述了组件从被创建到被销毁的整个过程，包括组件的状态改变和交互。了解组件生命周期可以帮助开发者更好地理解和掌握 ReactJS 应用程序的内部运行机制，优化应用程序的性能以及优化用户体验。
在 ReactJS 组件生命周期中，可以分为三个主要阶段：挂载阶段、更新阶段和卸载阶段。下面将分别介绍每个阶段的不同方法以及使用场景。
组件挂载是指组件首次被创建并添加到 DOM 树上的过程。在挂载阶段，组件会经历以下生命周期方法：
constructor 是 ReactJS 组件的构造函数，用于初始化组件的状态和属性等。
constructor(props) {
super(props);
this.state = { ... };
}
getDerivedStateFromProps 是一个静态方法，是挂载阶段中一个新的生命周期方法。该方法返回一个对象，可以在组件状态或属性发生变化时，更新组件的状态或属性。但该生命周期方法会在 render 之前被触发，所以仅适用于简单情况。
static getDerivedStateFromProps(props, state) {
if (props.myProp !== state.myProp) {
return { myProp: props.myProp };
}
return null;
}
render 方法是必须实现的方法，用于返回一个 React 元素（或组件）。这个方法只能返回一棵 React DOM 树。
render() {
return <div>Hello, {this.props.name}.</div>;
}
componentDidMount 方法在组件挂载后立即被触发，类似于 jQuery 的 ready 函数。该方法适用于需要加载数据、回调方法和网络请求等操作。
componentDidMount() {
this.loadData();
}
组件更新发生在组件状态、属性发生变化，或组件接收到新的属性时。在更新阶段，组件会经历以下生命周期方法：
在更新阶段中，getDerivedStateFromProps 方法也会被触发。
shouldComponentUpdate 方法用于判断组件是否需要更新。该方法默认返回 true，即组件每次更新都会被重新渲染，但开发者可以根据应用程序的需要进行优化。
shouldComponentUpdate(nextProps, nextState) {
if (this.props.someProp !== nextProps.someProp) {
return true;
}
return false;
}
render 方法也会在更新阶段被触发，用于更新组件的 DOM 树。
componentDidUpdate 方法适用于需要更新 DOM 树后进行一些操作的场景，如更新完 DOM 树后需要重新计算滚动区域。
componentDidUpdate(prevProps, prevState, snapshot) {
if (this.props.someProp !== prevProps.someProp) {
this.recalculateScroll();
}
}
组件卸载是指组件从 DOM 树上被移除的过程，在卸载阶段，组件会经历以下生命周期方法：
componentWillUnmount 方法在组件被卸载之前被触发。通常用于执行一些清理操作，如取消未完成的 XHR 请求或清除计时器。
componentWillUnmount() {
this.cancelRequest();
}
需要注意的是，在 ReactJS v16.3 及以后的版本中，componentWillUnmount 则已经被标记为不安全的方法，建议使用新生命周期方法 componentWillUnmount 搭配 React Hooks 进行处理。
ReactJS 组件的生命周期分为三个阶段：挂载阶段、更新阶段和卸载阶段。在每个阶段中，都有一些特定的生命周期方法可供开发者使用。这些生命周期方法可以帮助开发者更好地处理组件状态和属性的变化，优化应用程序的性能和用户体验。