开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第20天，点击查看活动详情
组件生命周期正是它听起来的样子：它详细说明了组件的生命周期。像我们一样，组件出生，做一些事情，然后销毁。但与我们不同的是，组件的生命阶段略有不同。这是它的样子：
每个彩色水平矩形代表一个生命周期方法（“React 更新 DOM 和 refs”除外），每一列代表组件生命周期的不同阶段。
一个组件一次只能处于一个阶段。它从挂载开始，然后进入更新。它会不断更新，然后进入卸载阶段并从 DOM 中删除。生命周期方法允许我们在组件生命周期的特定时间点运行代码，或者响应组件生命周期的变化。
由于基于类的组件是类，因此第一个运行的方法就是constructor方法。通常，constructor是你初始化组件状态的地方。接下来，组件运行getDerivedStateFromProps，我将跳过此方法，因为它的用途有限。
现在我们来看看返回 JSX 的render方法。现在 React “挂载”到 DOM 上。
最后，componentDidMount方法运行。如果需要，你可以在这里对数据库进行任何异步调用或直接操作 DOM。就这样，我们的组件诞生了。
更新
每次状态或 prop 更改时都会触发此阶段。就像在挂载阶段一样。getDerivedStateFromProps会被调用（但constructor这次没有！）。
接下来shouldComponentUpdate运行。在这里，你可以将旧的 prop /状态与新的 prop /状态集进行比较。你可以通过返回 true 或 false 来确定组件是否应该重新渲染。这可以通过减少额外的重新渲染来提高你的 Web 应用程序的效率。如果shouldComponentUpdate 返回 false，则此更新周期结束。
如果没有，React 会重新渲染并在之后运行getSnapshotBeforeUpdate。这种方法的用途也有限。React 接着运行componentDidUpdate。就像componentDidMount一样，你可以使用它进行任何异步调用或操作 DOM 一样。
卸载
卸载阶段是组件生命周期的最后阶段。当你从 DOM 中移除一个组件时，React 会在它被移除之前运行componentWillUnmount。你应该使用此方法来清理任何打开的连接，例如 WebSocket 或定时器。
其他生命周期方法
在我们进入下一个主题之前，让我们简单地谈谈forceUpdate和getDerivedStateFromError。
forceUpdate是一种直接导致重新渲染的方法。虽然它可能有一些用例，但通常应该避免使用它。
而getDerivedStateFromError是一种生命周期方法，它不是组件生命周期的一部分。如果组件中出现错误，getDerivedStateFromError会运行，并且你可以更新状态以反映错误的发生。
了解 React 的组件生命周期和方法将使你能够维护适当的数据流并处理应用程序中的事件。