Angular 如何判断何时创建新组件？

我一直在研究的逻辑，当有人在angularjs/angular上的web应用程序中创建一个新组件时，我认为这更通用，可能适用于所有基于组件的前端框架

---

我知道有一些原则，比如它应该是抽象的和可重用的，但例如，我在angular docs上看到，每个单独的路线都是针对一个特定的组件的（如何可以重用）在创建新组件之前，我可能会问一些具体问题吗？

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

您的代码块是否可以重用？如果是的话，构建一个新组件似乎是个好主意

你的代码很复杂吗？如果是的话，最好将代码分成不同的组件，以使代码更具可读性和可维护性

---

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

（1） 可恢复性

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

然而，如果它是一段高度可重用的代码，那么您应该真正地对它进行优化，并可能将其发布到世界各地

（2） 组织机构

有时代码可能会持续太长时间。可能有几百行，而且它只是无法理解。将代码分解为组件有助于可读性和代码组织。在这里，新组件应该是父组件的子组件

代码结构：

您应该考虑将高度重用的组件放置在一个称为组件的文件夹中。可以构成第三方库的组件

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

---

最后，组织组件应该是他们父母的孩子，并且应该放在他们父母组件的子文件夹中。

我与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>

家
{{u.Name}
{{u.Status}}

它们使用组件的频率与您使用引导类的频率相同！但看看代码的可读性有多强。离子列表，有离子项。你通常可以猜到一个离子化身是什么样子的，但实际上组件内部可能会发生一些事情。所有这些都被抽象掉了。复杂的事物被分解成易于理解的小组件。每个组件本身通常都很简单

---

对于任何html元素，我认为值得考虑它的要点是什么，以及是否值得将其转换为一个角度组件，以使代码更具条理，更易于从高层理解。

在决定编写新组件之前，请遵循以下步骤

（i）

确定责任

-您应该在编写前定义

组件责任

，因此您知道何时开始编写

（ii）

较大时

-根据经验，如果您的组件代码超过600行，请将其划分为较小的组件，以便代码易于阅读和维护

（iii）

当您想要重用时

-当您发现某个组件正在各个模块中使用时，您应该将其作为共享组件

---

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

您为路线提供的实际上是一个视图/容器，但这并不是Angular中的一个著名术语，因此我们仅将其称为组件

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

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

在AngularJS中只有组件，但在React中有容器/视图和组件（即使在代码中它们看起来都一样）。在大多数react项目中，您会发现

视图

和

组件

有不同的目录

因此，您认为组件应该是可重用和抽象的，这是对的。您混淆的是视图和组件之间的关系。我希望这些术语在角度世界中也很流行。如果您发现某个特定组件不值得单独使用，就让它成为视图的一部分。

来自React docs:

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

因为您经常向用户显示JSON数据模型，所以您会发现，如果您的模型构建正确，您的UI（以及组件结构）将很好地映射。这是因为UI和数据模型倾向于遵循相同的信息体系结构，这意味着将UI划分为组件的工作通常是微不足道的。就b