学习笔记：Angular2与React比较

文章来源：https://www.2cto.com/kf/201609/548587.html

Angular 2与React的选择其实只是一种风格偏好。React专注于渲染速度且能够在客户端或原生应用内处理复杂的UI设计，而Angular 2则更具开发普适性。它既能够引导我们逐步构建自己的应用，同时也提供一定的表现力及可复用UI设计机制。

1. React 快速回顾

React 用于构建高性能及响应式用户界面。

• React负责解决其它JavaScript框架所面对的一大常见难题，即对大规模数据集的处理。
• • 使用虚拟DOM并在发生变更时利用补丁安装机制只对DOM中的dirty部分进行重新渲染，React得以实现远超其它框架的速度表现。

1.1 优势:

1. React伟大之处就在于，提出了虚拟Dom这种新颖的思路。

• 在性能方面，React 只在调用 setState 时更新dom，而且是先更新虚拟 Dom，再和实际Dom比较，最后更新实际Dom。这个过程与 Angular 的bind方式比较，一是更新 dom 的次数少，二是更新 dom 的内容少，速度肯定快。

2. React 更关注UI的组件化和数据的单向更新，提出了 FLUX 架构的新概念。

• React Native 生成的App不是运行在WebView上，而是系统原生的 UI，React通过jsx生成系统原生的UI，iOS和Android的React UI组件还是比较相似的，大量代码可以复用。

3. 维护UI的状态,Angular 里面使用的是 $scope，在 React 里面使用的是 this.setState。

• React 的好处在于，它更简单直观。所有的状态改变都只有唯一一个入口 this.setState()
• Angular 就比较复杂，不知道背后使用了哪些黑魔法。

1.2 劣势:（注：现在 React 生态越来越完善了）

• React 的目标是UI组件，通常可以和其它框架组合使用，目前并不适合单独做一个完整的框架。
• React 即使配上 Flux 的组合，也不能称之一个完整的框架，比如你想用Promise化的AJAX？对不起没有，自己找现成的库去。
• React 的第三方组件远远不如 Angular 多（注：现在 React 生态越来越完善了）。
• React本身只是一个 V 而已，所以如果是大型项目想要一套完整的框架的话，也许还需要引入Flux和route相关的东西。
• （注：现在 React 生态越来越完善了）

2. Angular2 满载强化机制

Angular 2高度关注创建可复用的前端组件。Angular 2还考虑到与TypeScript的协作需求，消除了大量用于保证类型安全的代码。再加上众多性能与框架改进，Angular 2确实给人焕然一新之感。

2.1 优势:

1. Angular 是一套完整的框架。

• 有自带的数据绑定、渲染、UI库,过滤器, 模板, 服务, q(defer), route, http，cookie, 依赖注入, factory, provider等等一系列工具。
• 基本上只要你在做 web 开发用过的东西，它都有一个。但是这些东西 react 自身都没有（注：现在 React 生态越来越完善了）。

2. Angular 的架构清晰，分工明确，扩展性良好。

• model，view，controller谁在什么时候做什么事情说的很清楚。
• 能够让程序员真正专注于业务逻辑，对js能力要求也不高（基本上只需要写业务逻辑，实在用不上那些高级的js技巧和知识呀）
• 因为对html侵入不大，非常易于和designer协作。
• 整个框架充满了DI的思路，耦合性非常低，对象都是被inject的，也就是说每个对象都可以轻易被替换而不影响其他对象。

3. Angular生产效率高。

• react 的单向数据流什么的想法非常好，但是写起来太麻烦！
• 我只想变更个很简单的数据还要经过action、dispatcher、store、view四步，angular里一行代码就搞定的事情在react里却如此麻烦。

4. Angular的背后是Google

• 所以社区基础是不用担心的，整个生态也已经是非常的完整了，从最基本的Tutorial到StackOverflow的问题数到框架本身的剖析都非常多，Angular上手比较容易。
• （注：现在 React 生态越来越完善了）

2.2 劣势:

• 性能：同样是TODO MVC的Sample，Angular完全载入用了1.1s，React只用了0.3s。
• Angular2 几乎是一个推翻重做的框架，估计不会有1.X的升级方案。所以如果现在新开始的项目采用Angular的话，会是一个很尴尬的时机。同样，如此大的改动似乎也反面印证了1.X并不是那么好。

3. 注意事项

值得强调的是，React与Angular（任意版本）之间的比较其实并不对等。

• Angular是一套前端框架，负责为应用客户端提供完整架构，并允许我们将客户端代码作为强大的功能套件。
• React则是一套库，其提供的功能并不丰富——其主要作用是充当完整项目的组成部分，而非主导整体代码结构。
• 当然，二者之间也存在着相当程度的相似性，而这也正是此次比较存在的理由所在。

3.1 架构

• React 并不真正关注架构——它更像是一款作用于应用内大型客户端代码中的工具。
• Angular2 则以框架的角色指明了前端代码的“正确设计方式”。其专注于组件与类型安全，允许大家将注意力集中在代码本身，并在强调复用性与封装的同时建立面向对象前端。
• React 适合那些希望以更为灵活的方式构建代码架构的朋友。
• Angular 2则属于应用前端的整体架构选项。

3.2 模板

两套方案皆提供模板工具，但采用的模板管理方式则区别很大。

• React以JSX为基础构建模板对象，大家可以构建内联模板并将所有模板代码进行集中保存。
• Angular 2则以物理方式将用于驱动应用的JavaScript与作为渲染对象的HTML加以分离。
• Angular 更关注组件化且能够与TypeScript顺畅协作，因此大家往往能够凭借Angular 实现更出色的复用性与灵活性。
• React模板更紧凑且渲染速度更快。
• Angular 2组件则更具复用性，并通过无处不在的双向数据绑定简化应用对象管理流程。

3.3 原生支持

Angular 2与React有着不同的底层目标，这也意味着二者在支持原生设备代码时有着截然不同的表现。

• Angular 2团队决定专注于框架本身，并将设备可运行代码方面的工作交给其它供应商。
• React生态系统则推出了React Native——这套框架能够将React代码翻译为原生应用体验，从而带来远超传统混合型Web应用的性能表现。
• 如果希望自己的移动应用体验快如闪电，那么选择 React。
• 如果希望采用组件化程度更高的应用架构，同时愿意牺牲部分性能以提升代码结构一致性，那么选择 Angular 2与Ionic等框架。

4. 总结

• Angular是真正的大而全的Framework，它有一套生态体系和思路，基本你按照它的思路往里面填代码就OK。
• React是一个简短有力的library，它只负责解决你某个单一的“痛点”。
• 开发大项目或者比较正规的项目,建议使用Angular，angular 是最适合CRUD的SPA 单页面的应用程序。 和 angularUI 一起使用就可以搭建还不错的web app.
• yeoman+bower+gulp可以很快的把架子搭起来,终归比较简单实用。
• 对于移动端，React比Angular更有潜力, react 的模块化 + vdom + 搜索友好, 轻巧高效。
• 大型复杂用户界面外加出色性能是React的王牌。
• 开发流程与代码架构则是Angular 2的主场。

（注：现在 React 生态越来越完善了）