何处创造新组件？基于组件架构决策过程剖析

何时创建新组件？剖析基于组件的框架的决策过程

简介

在基于组件的框架中工作，如 Angular 或 AngularJS，你可能遇到一个难题：何时应该创建一个新组件？乍看之下，创建新组件的指导方针似乎很简单：组件应该抽象且可重用。但当深入研究 Angular 文档时，我们发现一个有趣的说法：每个独立的路由都对应一个特定的组件。这引发了一个问题：这样的组件如何被重用？

为了解决这个困惑，我们将探讨决定何时创建新组件的关键因素，以及自问的问题，以指导我们的决策过程。

何时创建新组件

创建新组件的决定是一个多方面的过程，取决于以下因素：

• 功能分离： 组件应该负责特定功能或行为。如果一个组件试图承担太多职责，它可能需要被分解成更小的、更集中的组件。
• 可重用性： 组件应该能够在应用程序的不同部分重用。如果一个组件只能在一个地方使用，那么创建它作为独立组件的价值就值得怀疑。
• 抽象性： 组件应该抽象出底层实现细节，使其易于使用和维护。避免创建紧密耦合的组件，因为它们难以在不同的上下文中使用。
• 性能： 在创建新组件时，需要考虑性能影响。过多的组件可能会导致应用程序变慢或内存消耗增加。

自问的问题

在评估是否创建新组件时，可以自问以下问题：

• 该组件是否负责特定功能或行为？
• 该组件是否可以在应用程序的不同部分重用？
• 该组件是否抽象出底层实现细节？
• 创建这个组件是否有助于提高应用程序的性能？

如果答案大多是肯定的，那么创建一个新组件可能是有意义的。另一方面，如果答案大多是否定的，那么考虑其他选择，如将功能添加到现有组件或探索不同的设计模式，可能更合适。

Angular 中的路由组件：一个特殊的例子

Angular 文档中的示例表明，每个路由都对应一个特定的组件。这并不意味着每个组件都必须是可重用的。相反，路由组件通常是页面特定的，只在该页面中使用。

然而，有时创建可重用的路由组件是有意义的。例如，你可能有一个导航栏组件，它可以在应用程序的多个页面中使用。在这种情况下，创建一个可重用的路由组件是有意义的，因为它可以跨页面使用，并且易于维护。

结论

决定是否创建新组件是一个权衡的过程。你需要考虑各种因素，如功能分离、可重用性、抽象性、性能和开发成本。通过自问上面提到的问题，你可以做出明智的决定，判断何时创建新组件，何时重用现有组件，以及何时探索其他选项。

常见问题解答

• 我应该将小功能组件化为一个大组件吗？

不，最好保持组件的精简和专注。大组件往往难以维护和调试。

• 我应该为每个视觉元素创建一个组件吗？

没有必要。只有在视觉元素代表特定功能或行为时才创建组件。

• 我应该在框架中使用现成的组件还是自己构建？

如果现有组件满足你的需求，请使用它们。自己构建组件是有意义的，前提是你需要定制或没有合适的现有组件。

• 创建新组件会影响应用程序的性能吗？

过多的组件可能会影响性能。但是，如果组件设计良好并且使用得当，对性能的影响应该是可以忽略的。

• 是否有任何指导方针来确定组件的粒度？

没有固定的规则。粒度取决于应用程序的特定需求和架构。一般来说，组件应该尽可能小，但又足够大，可以包含有意义的功能。