组件生命周期方法详解

你可能听说过这个术语，也可能没听过。但理解组件的生命周期在构建前端应用程序时至关重要。它出现在大多数现代框架中，包括 React、Vue 和 Angular。我发现一个有趣的事实是，它通常会给开发人员的学习带来一些阻碍。

事实证明，如果你能从抽象层面理解组件生命周期，那么它对你快速上手框架大有裨益。框架提供的函数名称可能有所不同，但其功能都基于相同的基础知识。

前端组件到底是什么？“组件”是我们 UI 中独立的部分，由特定的代码子集控制。React、Vue 和 Angular 都使用这个概念创建应用程序。它允许开发人员定义构建块，然后将它们拼凑在一起以创建每个页面。这减少了重复代码，并提高了整个网站的一致性。

组件与应用程序的其他部分并无不同。它们由代码定义，但可能永远不会被引用。如果被引用，则会创建一个实例，与其交互，然后最终被拆除。

组件的生命周期是指组件被引用后经历的各个阶段，从创建到移除。

我们的组件可能处于的第一个阶段是它尚不存在。它已被引用，但屏幕上尚未显示任何内容。如果我们想在其他任何事情发生之前做某事，那么这就是生命周期的这个阶段。

例如，在我们尝试显示有关该用户的信息之前，检查全局状态中的 currentUser。
下一个阶段是组件存在，并且正在渲染。这是运行代码最常见的阶段之一。
请注意，在此阶段，您可以对操作和调用进行排序。

这通常是我们放置异步 API 调用并等待其结果的地方。
组件渲染完成后，我们就可以对变化和交互做出反应。这可能会导致组件重新渲染，也可能不会，所以这一点务必牢记。

这是生命周期中我们可以放置表单验证代码的点。
最后，我们进行卸载。例如，离开页面，或者关闭模态框等等。此时我们可能想做很多事情。

取消订阅您的数据流，确保提示未保存的更改等。

这些并非唯一的阶段。有些框架对可用的生命周期方法进行了更细粒度的描述。但我们关注的是大致的描述。

由此可见，这是一个关于组件生命周期的极其抽象且不具体的解释。然而，它适用于所有框架，这正是它如此有价值的原因。

如果我们以这种方式思考 UI 的每个部分，我们就能思考何时需要运行某些逻辑。然后，我们就可以去寻找框架提供的功能来实现这些逻辑。

让我们更进一步。我上周写了一篇关于vue-router 中导航守卫的文章。我们在其中使用了一个名为的函数beforeEach。这考虑到了组件的生命周期！在讨论这个之前，我们先插入一些逻辑。

写代码时感觉更舒服的部分原因是理解底层概念，而不仅仅是具体实现。当你完全掌握 Java 之后，就可以开始探索如何在 Python 中实现同样的功能。

这是相同的概念。我鼓励你研究不同的框架方法，并记下它们的相似之处。

请注意，React 最近添加了钩子，它是结合生命周期和状态的函数，但这超出了我在这里介绍的范围。

这些并非一对一映射。所有这些框架的组件构建和渲染方式都有所不同。尤其是 Angular 的摘要周期非常独特。但从抽象意义上讲，它们是类似的概念。

根据您在组件生命周期中所处的位置，您想要做什么？

我希望这篇文章能帮助到很多人。这类概念可以加速你的学习，但对很多开发者来说，也可能是一大障碍。如果你在代码中看到了与组件生命周期交互的地方，请在评论区留言！如果你在这个概念上遇到困难，也请在评论区留言！