目前,Anguar 2和React是最受欢迎的前端框架和库,正在改变web开发领域。尽管如此,二者并不相关,因为Angular是一个框架,而React是一个库,仅仅是MVC中的View层。
在我的上一篇文章(Angular.JS VS React)中,我也彻底地解释了二者的不同。现在我们都知道,Angular 2已经改变了web开发(web development)。Angular 2整个框架用TypeScript进行了重写。因此,现在它们有了切实的区别。
Angular 2是什么?
Angular 2是web最先进的框架。Angular团队使用TypeScript重新建立了整个框架。因此,对于开发者而言,使用Angular 2是一个全新的开始。
Angular 2的主要目标是给开发人员提供一个简单而且精细的框架,以在没有任何代码复杂性和延迟的情况下开发一种组成代码的高效的方式。
Angular 2比起旧版本改进了很多东西,例如在语法和语义上比Angular 1更加简单。
什么是React?
React是从Facebook起源的最著名的库。它使你的前端非常舒适,是一个非常独特的客户端库。React.JS的核心目标是使前端能够高效开发和重用声明的插件。这就是使React在架构上更加高效的原因。
Angular处理代码的原理
Angular的定制组件让Angular更高效、更具响应性。Angular的后端机制启发自Backbone.JS,,Knockout以及许多其它的web框架。
如图: Angular 2 构架
Angular 2的整体构架由模块(Module),组件(Component),模板(Template),元数据(Metadata),数据绑定(Data Binding),服务(Service),指令(Directive)以及依赖注入(Dependency Injection)组成。
React 架构
React处理代码借助的程序独立于React代码架构,比如Flux。Flux保障单向数据流动。正如你只需更加关注视图层(View),React架构的主要组成就是由多个视图层(Views),分配器(Dispatcher)和储值(the Stores)构成。
Flux被认为是继HTML和CSS之后最便捷的架构。Flux的主要模型如下:
如图: React’s Flux 构架
React与Angular 2.x之间的对比
从根本上讲,Angular 2比React带来更多的便利。Angular 2让你在JavaScript框架中借助于加强的依赖注入和服务能够在做东西时拥有更多选择。 它完全给予你了分离关注点的一条路线。
看看下表的对比,它是写这篇文章时的最新调查。
Features |
Angular2 |
React |
Author(开发者) |
|
|
Language(语言) |
TypeScript |
JSX, ES5, ES6 |
Designing(设计) |
JavaScript into HTML(JS置入HTML) |
JavaScript Centric(JS为主) |
JavaScript |
Less(少) |
More(多) |
Failure(故障) |
Run-time(运行时) |
Compile-time(编译时) |
DOM |
Regular(常规) |
Virtual(虚拟) |
Binding(数据绑定) |
1 / 2- way(单/双项) |
Uni-directional(单向) |
Templating(模板) |
In.ts files |
In.jsx file |
Mobile Support(移动支持) |
Ionic Framework |
React Native |
MVC |
Yes |
V-only(只有视图) |
Rendering(渲染) |
Server-side(服务器端) |
Server-side(服务器端) |
是什么使Angular 2如此独特?
许多事情使Angular 2在其上下文中更加独特和与众不同。现在,在Angular 2中,我们有更安全和更能简化的代码得方法。
Angular 2 不仅是React的令人信服的替代选择,也是所有前端库和框架的可替代选择。理由如下:
- Typescript
Angular 2的其中一个明显的更新是TypeScript。TypeScript确保了代码更安全。大部分的编程人员都错误理解了TypeScript的核心目标。他们以为是代码更少了,但其实,TypeScript确保了你可以编写更安全的代码。
TypeScript是由Microsoft开发的,它是JavaScript的超集(父集),能够把你的代码编译成普通的JavaScript。TypeScript可以很容易地跟踪你的代码中的bug。现在,你不需要担心程序的纠错了。
代码的纠错以前也曾通过其他方法做过,例如使用TDD或代码审查。大多数bug都和打字问题(语法)有关,所以 TypeScript 给你提供了一整套针对程序员的先进的智能感知体验特性。 - 依赖注入
当你在你的应用程序中需要导入任何依赖时,依赖注入就起作用了。这是一种给予一个类的新对象所需的依赖的方法。大多数情况下,依赖是服务。为了用服务提供新的组件,Angular使用DI (依赖注入Dependency Injection)。
它会通过查看构造函数参数自动讲述服务。当它创建组件时,它会为服务要求一个注射器(Injector )。如果被请求的服务不在容器中,Angular注入会把服务自动创建并注入到组件中。
Fig : 依赖注入
- Jasmine
Angular 2的Jasmine提供了一个API,这个API试图去读句子。此外,它提供了一些非必要的断言。所以,Angular 2给了你较少的模板文件。
很多其他的事情让Angular 2显得与众不同。我在这里只讨论了更突出的地方。想了解Angular 2的更多详情,你可以看看我的其他关于Angular 2的博客。
什么使React与众不同?
很多的事情使React是更加方便的。其中一个与众不同的特性是它的‘Flux架构’。React有很多对于新参与开发的开发人员来说更加方便的库。此外,在帮助你迁移你的JQuery代码时,React非常好用。
以下是React为何能提供Angular 2没有的特性的原因。
- 合成事件的功能
合成事件的功能使React更加独特,尤其是当你要处理SVG时。 - Ng2
Ng2是标准的HTML的增强形式,但在这种情况下,你必须稍微学习Angular。 - JSX
React不需要使用模板。JSX使它真正独一无二的。它在编译时编译JavaScript。此外,它支持许多工具,例如ESLint、Babel等。
所以,使用React,你可以自由地标记自定义组件。 - Redux和Mobex
你可以用Redux(对于大规模的应用程序)和Mobex(对于开发更小规模的应用程序)构建React应用程序。这是继Flux之后的最先进的想法。
Angular 2和React一起使用
你可以在你的Angular 2项目里面使用React。只需要简单地include这个库,并相应地使用它的函数。因为Angular 2和React两者都关注前端,因此可以共同使用。此外,你可以结合Redux,可预测状态的JavaScript应用程序容器,使用Angular 2构建最强大的应用程序(考虑到性能)。