如何判断何时创建新组件？答案

【问题标题】：How to tell when to create a new component?如何判断何时创建新组件？
【发布时间】：2017-09-13 08:19:05
【问题描述】：

我一直在寻找当有人在 angularjs / angular 上的 Web 应用程序中创建新组件时的逻辑，但我认为这更通用，可能适用于所有基于组件的前端结束框架。

我知道有一些原则，比如它应该是抽象的和可重用的，但是例如我在 angular docs 上看到每条单独的路由都查看一个特定的组件（这怎么可能是可重用的）。 在创建新组件之前我可能会问任何可靠的问题？

【问题讨论】：

我会说它类似于类。一个组件应该做一件事并且应该做好。
Gunter 说过……至少，应用程序的每个“页面”都应该是一个组件。如果页面上有任何东西可以重复使用，例如一组用于搜索的控件，那么它们也可以是一个单独的组件。
组件可以在应用程序的任何地方重用。如果您计划在项目的不同部分多次重用组件，那么创建一个组件将是一个好主意。
@korte 只使用 angular 然后不要混淆 angular 和 angular js
@RahulSingh，我没有问任何问题。您的评论 angular js has nothing called components 不正确，所以我只提到了官方文档。此外，Angular 组件基本上是对 AngularJs 组件的升级。

标签： angular reactjs functional-programming vue.js web-component

【解决方案1】：

为了决定是否必须创建组件，我认为您必须回答以下问题：

您的代码块是否可以重用？如果是，那么构建一个新组件似乎是个好主意。
您的代码很复杂吗？如果是，那么最好将其拆分为单独的组件，以使您的代码更具可读性和可维护性。

【讨论】：

【解决方案2】：

在决定编写新组件之前，请按照步骤操作，

(i) Identify the responsibility - 你应该在写之前定义一个components responsibility，这样你就知道什么时候开始写了。

(ii) When it is large - 根据经验，如果您的组件代码超过 600 行，则将其分成更小的组件，以使您的代码易于阅读和维护

(iii) When you want to reuse - 当你发现一个组件被多个模块使用时，你应该把它设为共享组件。

以上 3 条规则将帮助您确定何时需要编写新组件。希望对你有帮助

【讨论】：

【解决方案3】：

来自 React 文档：

但是你怎么知道它自己的组件应该是什么？只需使用相同的技术来决定是否应该创建新函数或对象。一种这样的技术是单一职责原则，即一个组件在理想情况下应该只做一件事。如果它最终增长，则应将其分解为更小的子组件。

由于您经常向用户显示 JSON 数据模型，您会发现如果您的模型构建正确，您的 UI（以及因此您的组件结构）将会很好地映射。这是因为 UI 和数据模型倾向于遵循相同的信息架构，这意味着将 UI 分成组件的工作通常很简单。只需将其分解为恰好代表您数据模型的一部分的组件即可。https://facebook.github.io/react/docs/thinking-in-react.html

PS。还要考虑性能。通过分离组件，您可以管理小视图的生命周期，因此基本上如果您的组件显示数据的单个（原子）部分，您可以轻松定义组件何时应该更新。见shouldComponentUpdate()。

【讨论】：

【解决方案4】：

此建议适用于任何框架。制造新组件通常出于以下两个原因之一：

(1) 可重复性

您将重复使用此组件。重复使用水平各不相同。有些代码可能是特定于项目的，但可能会在您的项目中的两个地方使用，但绝不会在您的项目之外使用。它仍在重复使用。

但是，如果它是一段高度可重用的代码，你真的应该对其进行改进，并可能将其发布到全世界！

(2) 组织

有时代码可能会持续太久。可能有数百行，而且它只是不可读。将代码分解成组件有助于提高可读性和代码组织。这里，新组件应该是父组件的子组件。

代码结构：

您应该考虑将高度重用的组件放在名为 components 的文件夹中。可以制成第三方库/一部分的组件类型。

将可重用组件投影到名为 apponents 的文件夹中。

最后，组织组件应该是其父组件的子组件，并且应该放置在其父组件的子文件夹中。

【讨论】：

【解决方案5】：

我使用 Angular 的时间越长，我就越认为，在合理的范围内，你可以制作的组件越多越好。当然，有可重用的因素，但我认为它们通常会使您的代码更易于维护。

我不经常使用 Ionic，但它确实影响了我对组件的看法

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list>
    <ion-item *ngFor="let u of users">
      <ion-avatar item-left>
        <img src="{{u.ImgUrl}}">
      </ion-avatar>
      <h2>{{u.Name}}</h2>
      <p>{{u.Status}}</p>
    </ion-item>
  </ion-list>
</ion-content>

它们使用组件的频率与您使用引导类的频率一样！但是看看代码的可读性如何。离子列表，有离子项目。您通常可以猜测 ion-avatar 的外观，但实际上组件内部可能会发生几件事。所有这些都被抽象掉了。复杂的事物被分解成易于理解的小组件。每个组件本身通常都很简单。

对于任何 html 元素，我认为值得考虑其意义何在，以及是否值得将其制作成一个角度组件，以使代码更加分隔并更易于从高层次上理解。

【讨论】：

【解决方案6】：

你提供给路由的实际上是一个视图/容器，但这在 Angular 中并不是一个真正有名的术语，所以我们只是将它称为组件。

视图/容器

这些实际上是传递给路由的组件和路由所有组件的父级。它们连接到存储并将数据传递给组件（大多数情况下）。这些是不可重用的并且特定于路线。它们只是一个组件，它结合了所有较小的组件来创建路由。

组件最好是可重用的和哑的。我所说的愚蠢，是指只接收数据并显示它而不直接连接到存储的组件。

在 AngularJS 中只有组件，但在 React 中有容器/视图和组件（即使在代码中它们看起来都一样）。在大部分react项目中，你会发现views和components有不同的目录。

因此，您认为组件应该是可重用和抽象的，这实际上是正确的。您感到困惑的是视图和组件之间。我希望这些术语在 Angular 世界中也很流行。如果您发现某个特定组件不值得被分开，那就让它成为 View 的一部分。

【讨论】：