ReactJS 的生命周期

在 ReactJS 中，组件的生命周期包括了组件的创建、更新和销毁三个阶段。在这些阶段，你可以在特定的时间点执行相关的操作和逻辑。React组件的生命周期分为三个阶段：Mounting、Updating和Unmounting。

Mounting 生命阶段

Mounting 阶段发生在组件被创建并插入到 DOM 树中的时候。以下是 Mounting 阶段的生命周期方法：

constructor()

• 当一个组件实例被创建时，会首先调用 constructor 方法。在这个方法中，你可以初始化组件的状态（state）和绑定事件处理方法。

static getDerivedStateFromProps(props, state)

• 这是一个静态方法，当组件的props发生变化时，会触发此方法。在这个方法中，你可以根据新的props来计算并返回一个新的state。

render()

• 在 render 方法中，你会根据组件的状态和props，返回一个包含了你想要渲染的内容的 React 元素。这个方法是必须的，并且是一个纯函数。

componentDidMount()

• 当组件已经被插入到 DOM 树中后，会调用 componentDidMount 方法。你可以在这个方法中执行一些需要依赖DOM的操作，例如调用外部库初始化组件等。

Updating 生命阶段

Updating 阶段发生在组件的 props 或 state 发生变化时。以下是 Updating 阶段的生命周期方法：

static getDerivedStateFromProps(props, state)

• 与 Mounting 阶段相同，此方法在组件收到新的 props 时被触发。用法与 Mounting 阶段的相同。

shouldComponentUpdate(nextProps, nextState)

• shouldComponentUpdate 方法用于控制组件是否需要更新，返回值决定了组件是否重新渲染。你可以通过比较当前的 props 和 state 与下一个 props 和 state 的变化来决定是否更新。

render()

• 同 Mounting 阶段的 render 方法。

getSnapshotBeforeUpdate(prevProps, prevState)

• 在最终渲染之前（即调用 render 方法之后，实际将更新应用到 DOM 之前），会调用 getSnapshotBeforeUpdate 方法。你可以在此方法中保存一些 DOM 信息，在 componentDidUpdate 方法中使用。

componentDidUpdate(prevProps, prevState, snapshot)

• 在组件已经更新并且更新被应用到 DOM 之后，会调用 componentDidUpdate 方法。在此方法中，你可以执行一些需要依赖 DOM 的操作。

Unmounting 生命阶段

Unmounting 阶段发生在组件从 DOM 树中被移除的时候。以下是 Unmounting 阶段的生命周期方法：

componentWillUnmount()

• 在组件从 DOM 中被移除之前，会调用 componentWillUnmount 方法。在此方法中，你可以清理定时器、取消订阅等一些清理操作。

以上就是 ReactJS 的生命周期。通过合理地使用生命周期方法，你可以在不同的阶段执行所需的操作，从而优化和掌控你的 React 组件的行为。

注意：

过去的 React 版本中还有其他一些生命周期方法，如 componentWillMount 和 componentWillUpdate。然而自 React 16.3 版本起，这些方法已被弃用。如果需要在更新前执行某些操作，应使用 getDerivedStateFromProps 或 componentDidUpdate 方法来替代。