React 生命周期及其使用场景

2024-01-27 05:48:27

生命周期（Life Cycle）的概念应用很广泛，特别是在经济、环境、技术、社会等诸多领域经常出现，其基本涵义可以通俗地理解为“从摇篮到坟墓”（Cradle-to-Grave）的整个过程。React 组件也有类似的生命周期，即从创建到销毁的过程，它定义了组件在不同阶段的行为。了解生命周期可以帮助我们更好地理解 React 组件是如何工作的，以及如何在不同阶段执行特定的操作。

React 组件的生命周期主要包括以下几个阶段：

初始化阶段 ：在这个阶段，组件被创建并初始化其状态和属性。
挂载阶段 ：在这个阶段，组件被添加到 DOM 树中。
更新阶段 ：在这个阶段，组件的状态或属性发生变化，组件需要重新渲染。
卸载阶段 ：在这个阶段，组件从 DOM 树中删除。

在每个阶段，React 组件都可以执行特定的生命周期方法。这些生命周期方法允许我们在组件的不同阶段执行特定的操作，例如：

componentDidMount() ：在这个方法中，我们可以执行一些初始化操作，例如向服务器发送请求或设置计时器。
componentDidUpdate() ：在这个方法中，我们可以执行一些更新操作，例如更新组件的状态或属性。
componentWillUnmount() ：在这个方法中，我们可以执行一些清理操作，例如取消计时器或删除事件监听器。

了解 React 组件的生命周期及其使用场景可以帮助我们更好地理解 React 组件是如何工作的，以及如何在不同阶段执行特定的操作。这对于构建更健壮、更可维护的 React 应用程序至关重要。

React 生命周期图

React 生命周期方法

方法	时机
`constructor()`	初始化	在组件创建时调用。
`getDerivedStateFromProps()`	初始化	在组件创建或更新时调用，用于根据新的 props 计算新的 state。
`render()`	渲染	在组件创建或更新时调用，用于渲染组件的 UI。
`componentDidMount()`	挂载	在组件首次挂载到 DOM 时调用。
`componentDidUpdate()`	更新	在组件更新时调用，但不包括首次挂载。
`componentWillUnmount()`	卸载	在组件从 DOM 中卸载时调用。