第一印象：在学习 React/Redux 之后学习 Angular

背景故事：

我刚开始一份新工作，必须快速学习 Angular。自从 AngularJS (1.x) 以来，我就没再碰过它了。现在Angular 8已经发布了，这篇文章包含一个前言，比较了 1.x 版本与我这样的弃用者目前的使用感受。

更新：正如不少读者指出的那样，这份差异列表有些模糊，且不成熟。如果有人对哪些方面或哪些方面需要进一步探索有任何见解，我非常乐意分享！

免责声明：本文将 Angular-cli 与 create-react-app 和 Redux 进行比较。我尚未使用过其他 OG 库。

我曾多次听说，React 从定义上来说并不是一个严格意义上的框架，但可以通过工具来使其表现得像一个框架。

0. 序言：Angular 1.x 与 Angular 现状

• $scope 消失了
• 组件是新的控制器，它们始终是类
• 绑定现在由指令周围的括号表示（即[NgClass]）
• 变化检测会进行 DOM 更新
• 不再需要重复绑定类方法；取而代之的是将组件导出为类
• 业务逻辑由来自提供商的服务处理

1. React 和 Angular 之间的相似之处

• 两者都支持 TypeScript 集成、实时/热重载、延迟加载、作用域样式、模块化组件设计和生命周期钩子
• 两个框架团队都鼓励测试驱动开发：Karma 用于 Angular，jest/mocha 用于 React
• 在大型科技公司的支持下开发：Google 的 Angular，Facebook 的 React
• 鼓励使用不包含业务逻辑的愚蠢组件

2. 痛苦的差异

在这个阶段，我需要忘记 React 中同名功能的具体作用。

文件结构

这可以说是我一开始最大的抱怨。与 React 相比，Angular 的文件结构似乎过于繁琐。每个组件文件夹都包含一个component.ts.js 文件、一个component.spec测试文件和一个component.scss.js 文件。

嵌套（容器）组件 vs NgModules

这两个框架都强调了应用规划的单一职责原则。虽然用户可以选择使用 React Router 来定制自己的路由，但 Angular 的 Router 模块已经涵盖了我们大部分的路由需求。

React 的核心团队和大多数狂热的开发人员已经放弃使用容器组件模式而使用钩子，但为了进行同类比较，这就是我所知道的全部。

当多个组件为 Angular 应用程序中的某个功能执行同一组功能时，可以将它们放入带有.component.module.ts其自己的路由文件的模块文件夹中component.routing.module.ts，以进一步指定哪些组件可供应用程序的其余部分使用。

在 React 中，路由由react-router和控制Provider。然而，Angular 模块中的 Provider 并非起着相同的作用。它们只是一些导入服务的模块属性（可以将服务视为辅助函数）。

使用 TypeScript 进行开发

Angular 样板应用自带 TypeScript。你应该使用 TypeScript。作为一个用 TypeScript 学习 React 的人，这并没有真正改变我对它的看法，但我可以理解这会带来一些阻碍。我确实注意到，与使用 CRA 开发相比，类型声明不再那么频繁，这可能是因为我的项目使用了新版本的 TypeScript。

学习资源

React 拥有更丰富的学习资源和不同经验水平用户的模式设计指南。（感谢@wesbos和 @DanAbramov）一年多以前，由于需要通过 Babel 进行转译、JSX 插值、Webpack 配置等，我根本不会接触它。但现在有很多明星开发者和网站会推荐我学习 React/Redux。

不过，我注意到南亚的 YouTube 博主垄断了 Angular 教程市场😁——这是一个值得欢迎的变化。我唯一的抱怨是 Angular.io 文档缺乏足够的可视化示例。

热重载 || 变更检测

我注意到 React 和 Vue 在本地开发时编译速度非常快。有人说这是因为使用了虚拟 DOM，它只用部分更新来替换状态差异，而不是完全重新渲染页面。

相比之下，Angular 有变化检测功能，它会监听状态变化，但不会更新 DOM。我听说，根据具体情况，它在本地开发过程中可能会有帮助，也可能有害。

JS 模块与 Angular 模块中的导入语句

与 React 中的 JavaScript 模块或通用组件不同，在 React 中，随着嵌套的加深，导入组件变得必不可少。而 Angular 组件中的文件彼此之间已经“对话”，无需显式导入。模块具有声明属性来指定组成它们的组件，而导入仅用于定位需要供特定模块使用的库内模块。

服务和可观察对象 vs [Reducers 和 Actions]

服务包含可重复使用的功能，可以执行数据交换或转换数据——有点像辅助功能。

每个 Angular 模块都有一个 Providers 属性，用于指定哪些服务可供其使用。（然而，这与 React 的 Providers 语义无关。）服务被注入到 Angular 应用的根目录中，以便任何组件都可以使用它们。（参见：依赖注入）

使用 Redux 和 React，Reducer 可以管理并响应状态变化。需要定义 Action，并调度“Action Creator”来更新状态并更改视图。

Angular 没有动作。API 请求和事件返回一个可观察对象 (Observable)。可观察对象就像一个中介：它监听事件，然后将其传递给订阅者。它可以将数据传输到组件，并处理 HTTP 请求。

工具

由于 React 仅在应用程序的视图层上运行，因此开发人员可以选择任何库来实现状态管理、表单验证、数据可视化等功能……不胜枚举。

Angular 的库在安装时就已经内置，开发者通常只需要使用几个相同的库来完成相同的工作。这节省了创建另一个表单或按钮的精力（无需从头编写通用组件）。

双向数据绑定与单向数据流

对我来说，这部分最难适应。Angular 的指令支持双向绑定。每个指令都将其 DOM 属性视为一个模型。更改视图会更改模型中属性的值。你可能会觉得这会带来无数的副作用；但我不确定他们是如何避免这种情况的。

到目前为止，我发现 Angular 中唯一反映单向数据流的方面是其动态表单的概念。

输入绑定在 React 中实现了此功能，而不是将 props 传递到嵌套组件。

Reactive Forms 模块模拟了React 的Flux架构。它用valueChanges可观察对象和subscribe()方法来跟踪类组件中的变更，取代了 Actions 和调度器。表单模型是表单控制的可靠来源。

Promises 与 Thunks

Thunks 是与 Redux 一起使用的众多库模块之一，用于支持异步操作的分派。

除了与可观察对象一起使用之外，Angular 还会获取数据并将其作为普通的旧承诺返回。

这些都是初步的印象，我感觉我会随着时间的推移不断更新。请随时指正我，或者如果有人同时使用这两种语言，我很乐意与你交流！