打造出色 Angular 应用的 10 个技巧

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

这篇文章最初是想解释一下我在 Angular 应用中处理状态管理的方法。但后来，它变成了我使用 Angular 近三年来总结的一些经验教训。我希望你能从中找到一两点有用的信息，或者至少能从我链接的文章中找到一些有用的内容，并以此为起点，开启你自己的探索和学习。祝你阅读愉快！

1. 在 Angular 应用中，状态管理方面有很多库可供选择，例如NGRX、
   Akita和NGXS。
   你甚至可以使用在 React 生态系统中更流行的库，例如Redux和Mobx。但根据我的经验，这些库会增加样板代码和知识开销，通常情况下，使用原生 Angular 并配合 @Input 和 @Output 注解的属性和服务会更好。一篇名为《你可能不需要 Redux》的文章从 React 的角度很好地探讨了这个问题，但我认为同样的原则也适用于 Angular。

2. “属性传递”问题指的是需要在组件树的多个层级之间传递 `@Input` 或 `@Output` 属性。我建议在组件树中传递数据超过三层时，使用服务来管理状态。你甚至可以使用分层依赖注入，使服务仅对特定的组件树可见，而不是对整个应用程序全局可见。

3. 优先使用组合而非继承。由于 Angular 组件使用 TypeScript 类，因此很容易为了共享通用功能而选择继承。但根据我的经验，这会导致架构僵化，难以调试和维护。建议使用组件组合、将共享功能重构为服务，或者使用共享指令。

4. Angular 支持动态组件加载，但在应用层面上几乎没什么用处。我能理解它在库中的用途，但对于应用而言，我从未见过哪个问题不能用简单的 `<div>`*ngFor或 ` *ngIf<div>` 指令更轻松地解决，而需要用动态组件来解决。

5. 使用 OnPush 变更检测策略。这可以提升性能，但这并非我推荐它的主要原因。OnPush 让你可以更好地控制变更检测的运行时机，并强制执行关于不可变性和更改 @Input 属性的最佳实践。Netanel Basal 写了一篇关于 OnPush 的精彩文章，点击此处阅读。

6. 使用异步管道。在组件中订阅流可能会导致内存泄漏，除非在OnDestroy生命周期方法中取消订阅。相反，让异步管道来处理这个问题。它还会在使用 OnPush 变更检测时运行变更检测！

7. 对于数据结构对象 (DTO) 以及与后端通信，请优先使用接口而非类。原因很简单：TypeScript 接口仅在编译时存在，运行时并不存在。而类则会被打包到应用程序中，如果您仅将其用作数据结构，则可能会增加不必要的代码量。

8. 在应用程序中力求实现不可变性。虽然使用像Immutable.js这样的库来强制实现不可变性可能会取得成功，但我发现，使用 OnPush 变更检测并建立良好的代码审查流程，无需第三方库的额外开销，也能达到同样的效果。这其实可以很简单，比如在组件中使用扩展语法，并将值重新赋给数组和对象字段。

9. 使用Spectator进行单元测试。这个库非常棒。我刚开始使用 Angular 时，发现 TestBed 和内置的测试工具非常繁琐，所以我更倾向于为每个组件编写基于类的测试。有了 Spectator，设置测试变得轻而易举，而且它还能帮助你编写更好的测试。它通过模拟测试库系列中使用的选择器来实现这一点。

10. 不要测试组件的实现细节。换句话说，你不应该为每个组件、指令或服务都编写一个测试文件。相反，你应该像用户在组件树的更高层级那样测试应用程序的行为。在面向对象编程（OOP）领域，鲍勃大叔称之为“测试逆向变异”。遵循这种方法，你最终会得到可以同时测试多个组件功能的测试。这使得测试更有价值，并且更不容易因为组件结构的细微重构而失效。

感谢阅读！如果您觉得这篇文章对您有帮助，或者对其中的任何观点有不同意见，请告诉我。

原文发布于https://redgreenrefactor.dev/posts/ten-tips-for-awesome-angular-apps