当你在选择React和Angular 2时感到犹豫，需要考虑的因素有：

1 年 ago
文, 翔
2 minutes

前言

最近我们公司举办了一次LT大会，我做了一个关于Angular2的演讲（正好是在正式发布之前）。内容比较多是关于React和Angular2的比较，所以我写了一篇文章叫做“在选择React和Angular2时需要考虑的事情”。

※1 这篇文章纯粹是我个人的感受，所以请别见怪。
※2 而且，这篇文章的内容是基于2016年9月18日的情况。

react-angular.png

React是一个库，Angular是一个框架。

Angular曾经在React开始流行的时候经常被进行比较，我觉得可能是因为它们两者在类似的时间内兴起，并且在解决DOM相关问题上所声称拥有的功能略有不同。(由于它们分别具有关于构建DOM和数据绑定的功能，而且略有不同，所以人们进行了比较它们的优点和缺点。)

尽管这已经在许多文章中被多次提及，但React只是一个库，而Angular是一个框架，因此它们尝试解决的问题本身就不同。首先让我们分别将重点放在它们上面，以加深我们的理解。

React尝试解决的问题

当React刚开始推出时，它以以下方式宣传自己。(目前，React本身以及周围的环境都发生了一些变化，这些文本已不再出现在React文档的网站上。)

    • JUST THE UI

 

    • VIRTUAL DOM

 

    DATA FLOW

只需要用户界面

关于UI方面，React只是一个视图库。它的方针是将逻辑部分和视图部分分开。
或许这也成为我们思考的契机，我们实际上只是想要使用jQuery来操作DOM和绑定事件，那只使用React部分是否就足够了呢？
（最近流行的“不再需要jQuery”的趋势。参考：http://qiita.com/tatesuke/items/b9548dd484b01b139b74 ）

考虑到jQuery本身不具备将视图和逻辑代码分离的思想，因此出现这样的观点也是可以理解的。

虚拟 DOM

并且，它宣称在修改DOM的情况下不会成为处理速度的瓶颈。
（比使用jQuery进行DOM操作还要快！）

数据流

关于数据流，每个人都独立实施了事件触发→数据修改→DOM修改的处理部分，现在的想法是在React的单向数据绑定上进行开发。
近年来，这方面的设计理念已传承到代表为Redux的Flux。
（角色已从React本身转移到周边库中）

出于解决上述JS开发中的问题而采取『简单』方式，React至今仍以库的形式提供（需要对此进行进一步引用）。虽然我提到了一些过时的指导方针，但我认为它的核心思想基本上仍然没有改变。

学一次，随处写作

最近，有一个流行的理念叫做”一次学习，随处编写”（就像React Native的例子，只要学会React，就能开发其他应用）。我觉得React已经逐渐成为一种设计概念了（个人观点）。

我觉得React相对于Angular来说，有着更丰富的信息量，而且作为一项技术，它也越来越稳定。因为Angular 2刚刚发布，而且似乎已经没有像NgModule这样的重大更改了… 关于NgModule的介绍可以参考这篇简明的博客文章：https://ng2-info.github.io/2016/07/preparing-for-ngmodule/。

Angular所试图解决的问题

Angular被视为一种JavaScript框架。顺便提一下，从Angular2开始，也可以用TypeScript编写，所以似乎倾向于以『Angular2』而不是『AngularJS2』来命名。

与React类似，旨在解决DOM周边问题的东西。

Angular也是为了解决与DOM相关的问题而诞生的，但正因为有了强大的React库，Angular与之经常被拿来做比较（并不是贬义）。
在Angular2中，我们也借鉴了React的优点，实现了单向数据绑定。

框架思想

我认为，React与Angular的一个显著区别是它旨在作为一个“相对完整的框架”存在。

最近，与 React 相比，这一点变得更加明显。React 的周边环境变得越来越复杂，不再仅限于 React 本身。我认为，React 的周边环境通常是以下这样的。

    • React (本体)

 

    • Redux (Fluxアーキテクチャ構築)

 

    • ReactRouter (ルーティング)

 

    JSX、ES2015( + Babelやそのほかコーディング補助ツールなど)

Angular2的基本形式是什么。

    • Angular

 

    TypeScript( + TypeScript周辺ツール)

我认为这是可能的。React的相关库正在逐渐成为事实上的标准，但是也有可能因为不同的生产环境而改变库的配置吧？
在这个意义上，个人认为团队开发中，拥有统一的设计思想、编码规则和实现方法对于大家能够持有相同认知来说，仍然是框架的优点。
（关于框架带来的好处，我认为还有很多优秀的文章可以参考，如果你感兴趣的话，请去看看吧m(_ _)m）

Angular CLI是一个命令行界面工具。

另外，我们还致力于将自动化纳入框架中，并为最近流行的框架提供了许多CLI工具。（从Angular2开始）

以下是对给出的网址进行的中文翻译：

https://cli.angular.io/（官方网站）
https://github.com/angular/angular-cli（读我文件和用户手册）

现在开始的人可以通过CLI执行初始构建并进行构建，这也是一个令人高兴的功能。

$ ng new [作成するアプリケーション名]

在提到CLI工具时，我认为它能够自动化支持编码规则，例如在创建文件时自动命名规则，自动将其放置在指定的目录中等，这样能够为我们提供很多方面的好处。然而，Angular-CLI在功能上仍然相对薄弱。
但我认为，根据未来的发展情况，它有潜力成为一个强大的自动化工具，并且在其他JS框架方面有所突破。

我想写的其他事情很多。

关于最近使用React进行的服务设计

最近在 React 学习会上，我在 Hikarabo 上观看了一个关于 React 引入实例的讲座（链接：https://atnd.org/events/79320 ），我真的感受到了能够熟练运用 React 并发挥其优势的感觉。

    • フロントエンド：React

 

    • サーバーサイドレンダリング：Node.js + React

 

    アプリ(iOS, Android):ReactNative

这个结构，可以在一定程度上实现代码共享，并且给人一种这就是React的感觉。
（然而，他们也说React Native和其他部分有一些不同，共享化有一定难度。）

我只是个新手，从未构建过这样的东西，但在新媒体领域似乎有巨大的选择价值。

React可以根据不同的服务进行选择和抉择。

即使不从一开始就准备好Redux、ReactRouter等，也可以根据自己当前的服务来选择使用库进行更改。在需要的时候再引入新的React库来进行尝试。如果你觉得这样做很有趣，我认为你应该选择React。相反，如果你觉得这样做很烦人，可能会在选择React之后的适应过程中遇到困难…。

与设计师的合作

我个人在项目中使用并认为，在上述Hikalabo的学习会上也提到过这个话题，我觉得使用React很难与设计师合作。原因是，

    • コンポーネントの設計がデザイナーに共有されづらく、デザイナーが触りづらいこと

 

    HTMLの大多数をJSファイルに書く点(それをJSXで)

可以举出类似的例子。

※ React教程中的视图部分

// tutorial1.js
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});
ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

Angular2 中，视图模板是一个HTML文件，其中包含了Angular的属性描述（以ng◯◯的形式）。因此，我认为对于设计师来说，相对来说并不难入门。

※ Angular2教程的视图部分

<h3>Top Heroes</h3>
<div class="grid grid-pad">
  <div *ngFor="let hero of heroes" (click)="gotoDetail(hero)" class="col-1-4">
    <div class="module hero">
      <h4>{{hero.name}}</h4>
    </div>
  </div>
</div>
<hero-search></hero-search>

关于Angular2的TypeScript

Angular2是对TypeScript的推荐。TypeScript在最终会被转换成JS然后在Web上使用，但其实就是将ES6规范和独特的AltJS结合在一起。

正如其名，TypeScript具有类型，所以在单向数据绑定的数据修改方面，我觉得这非常有优势。

基本上，如果你已经接触过ES2015之类的东西，那么对于TypeScript可能并不需要太过担心（※这是个人感受）。

Angular-CLI的帮助下，初始配置变得简单容易。

$ ng new [作成するアプリケーション名]

所以，TypeScript提供了执行环境和内置服务器。

总结

在了解上述情况的基础上，我认为我们应该考虑在当前所处的环境中哪个选项更有优势。
不是考虑哪个选项更出色，而是考虑我们想解决什么问题，以及选择该选项将对团队带来什么结果，这样我们就能看清楚要选择的是什么了，不是吗？

✖
广告
将在 10 秒后关闭
bannerAds