我为什么从Angular转向React?

  英语原贴：Why I Ditched Angular for React by Kumar Sanket

  几年前，我大量的使用jQuery选择器和回调函数来编写我的代码，这让代码看起来很凌乱，直到AngularJS的出现，拯救了我。

  Angular帮助我更好的维护我的开发项目。Angular拥有很多简单易用的功能，能够在开发大型Web应用时，方便快捷开发出应用程序的样式。

  Angular的双向数据绑定和把Model作为单一数据源的设计思想让我感到震惊。它让我在整个程序中减少了数据冗余。

  后来，我在开发的过程中逐渐发现了Angular的一些缺陷。最后，它把我惹烦了，我开始寻找它的替代品。

  下面是我所在意的Angular的缺陷：

  基于DOM的程序执行：在Angular程序执行的过程中过度的依赖DOM结构。在程序启动时，Angular会先扫描DOM结构，然后再按照指令的优先顺序进行编译，这让开发中很难调试，很难测试指令的执行顺序。

  双向数据绑定是一把双刃剑：随着你开发的组件复杂度的增加，这将导致一些性能问题。

  这怎么会导致性能问题呢？在JavaScript(ES5)中，当变量和对象改变时，并没有相应的通知机制。所以Angular使用一种叫做“dirty checking”的机制来追踪数据的变化并同步给用户界面（当scope中的一块数据发生改变时，你能够得到通知）。

  在Angular的scope中，任何操作都会触发dirty checking，所以当绑定增加时会降低性能。

  有关双向数据绑定的另外一个问题是，当页面上有很多动态数据，也就意味着有多个数据输入源。若是处理不好，就会让你感到一团糟。当然，公平的说，这并不是Angular本身的问题，而是你的实现问题。

  Angular自成体系：在Angular的任何操作都必须循环遍历，否则你的组件将不能够与你的数据模型同步。这会导致与其它依赖模块的兼容性问题（好在Angular本身有足够多的支持）。

  如果你使用其它第三方包含有动态数据的JavaScript库，那么你需要用Angular的$apply函数去封装它。如果使用工具库，你就需要把它转换为一种服务。就好像为了与Angular兼容，你必须去重新定义你所使用的JavaScript库。

  依赖注入：JavaScript目前还没有自己的包管理工具和依赖解析器。AMD、UMD和CommonJS能够很好的解决这个问题。但是，目前为止，Angular并没有很好的兼容这些模式。当然啦，Angular引入了自己的一套依赖注入机制。尽管已经有用RequireJS实现的非官方依赖注入机制。

  难以学习：

  使用Angular需要学习很多相关的概念，不仅仅包括下面列举的：

• 模块
• 控制器
• 指令
• 作用域
• 模板
• 链式函数
• 过滤器
• 依赖注入

  这使得Angular难以学习。

  所有以上的原因，使得我转向React。

  React有什么牛X之处？

  React是为构建用户界面而生的一个新框架，由Facebook和Instagram领导。它使用不同的方式来开发JavaScript应用程序。

  需要明确的是：React并不是一个像AngularJS一样应用开发框架，所以把它们放在一起比较是不公平的。

  2013年5月，当React在JSConf EU大会上被推出时，观众被“单向数据流”“虚拟DOM”等概念震撼到了。

  React专为构建用户界面而生。用官方最直接的说法：“对使用React的开发者来说，它就相当于MVC中的”V“。你可以用它编写自己的组件，从这点上说，或多或少要比Angular要好。

  React反思目前的Web开发思想，并作出了最好的实践。

  例如它鼓励使用单向数据流，并相信组件是被数据驱动的状态机。

  大部分类似的框架都喜欢直接操作DOM，而React讨厌这种方式并希望开发者能够避免它。

  React恰好提供定义UI界面所需的最少API，不多不少。它遵循UNIX的设计哲学：小而美。专注于一件事，并把它做到极致。

  关于React与Angular比较更详细的文章可以查看Pete Hunte（就职于Facebook/Instagram）写的Facebook's React vs AngularJS: A Closer Look。

 我为什么转向React？

 以下是一些原因。

   速度快

 相比于其它的框架，React采用了不同的方式去操作DOM。

  不对DOM直接操作。

  它在JavaScript逻辑层和与DOM层之间引入一个虚拟DOM层

  

  这个虚拟DOM层提高了Web的性能。在连续的渲染中，React在虚拟层产生微小的改变，并在实际的DOM中实现局部更新。

 跨浏览器兼容

 虚拟DOM层也解决了跨浏览器问题，因为它提供了标准的API接口，这样的话即使在IE8上也能正常的使用。

 模块化

 你可以编写UI组件来模块化你的应用程序，以便于某个组件出现问题时能够隔离它。

  每个组件都能单独的开发和测试，并能使用其它的组件。这相当于提高了代码的可维护性。

 单向数据流使事情更清晰

 Flux是一个在JavaScript应用程序中创建单向数据层的架构，随着React视图库的出现而被Facebook概念化。Flux使得大规模的开发应用程序变得简单化。

  Flux是一个概念，而不是特定的实现工具，被包含于其它的框架中。Alex Rattray是一个很好的例子，它使用Backbone集合和React模型。

 单纯的JavaScript

 相比于传统的Web应用，现代的Web应用有些不同的工作方式。

  例如，视图层的更新只依赖于用户的交互操作而无需干涉服务器。今后，视图层和控制层将非常依赖彼此。

  很多框架使用类似Handlebars或者Mustache的模板引擎去处理视图层。但React相信视图和控制是相互依存的，不需要第三方模板引擎。这些都属于JavaScript的领地。

 同构JavaScript

 单页的JS应用程序最大的缺陷是不利于搜索引擎搜索，而React解决了这个问题。

  React在传送数据给用户端前已经在服务上预渲染了应用程序。这使得它能够从服务器上恢复相同的状态给活动的应用程序。

  因为爬虫程序依赖于服务器的响应而不是JavaScript程序的执行，所以预渲染应用能够帮助你优化搜索。

 与其它框架的友好兼容

 当你开发大型应用时，需要RequireJS、Browserify和Webpack来加载和打包。这些工具使你的工作变得容易些。

  不幸的是，目前的JavaScript版本并没有提供加载和打包的模块（尽管已经提议在即将到来的ES6版本中使用System.import来解决）。

  幸运的是，我们拥有像RequireJS、Webpack这么优雅的替代工具。React由Browserify构建，当你需要注入图片资源，编译Less或者CoffeeScript，Webpack将是一个很好的选择。

 除了React，我还需要其它的开发框架吗？

 使用React，你可以构建用户界面，但是仍然需要Ajax调用，数据过滤以及其它Angular已经实现了的功能。

  既然我们还需要其它的JavaScript开发框架，为什么还要放弃Angular？

  框架由一系列的模块和规则组成，如果我不需要其中的一些模块，或者为了我的工作需要用另外的模块代替时，我该怎么办？

  为了达到模块化和更好的依赖性管理，其中一种方法是通过包管理工具。

  不过，在Angular上我们怎么管理包呢？这取决于你，但是，你必须知道，Angular有自己的一套体系。所以你极有可能需要让第三方包适应Angular。

  另一方面，React只是一种JavaScript语言，任何由JavaScript编写的包都不需要重新封装。

  对我来说，使用npm 和Bower这类的包管理工具是更好的。我们可以选择自己的组件和工具包。但是，这比单纯的使用Angular开发框架更加复杂。

  相对而言，React希望你去使用npm管理工具，npm本身已经提供了很多现成的扩展包。例如，你可以使用这个full-stack starter kits工具集来开始构建React应用。

 React的不便之处

 因为Angular是一个开发框架，它带来了很多的好处。我放弃了一些很多的特性，例如用于$http服务已封装的AJAX，$q用于应答服务，ng-show，ng-hide，ng-class，ng-if作为模块的状态控制，这些都令我感到遗憾。

  React不是一个应用开发框架，所以你需要考虑怎么处理构建应用的其它方面。例如，我正在参与一个叫react-utils的开源项目，它能让你更好的开发React应用。

  社区也在积极的贡献可复用的类似组件来填补这方面的空白。React Components是一个非官方的网站，在那里，你可以找到一些类似功能的组件。

  由于React的设计思想，它不允许你使用双向数据绑定，这会使你在处理表单数据和可编辑的表格时有很多痛苦。

  然而，当你开始理解Flux数据流和存储，事情就变得清晰、简单、容易了。

  React刚刚起步，需要时间让周边社区成长。而Angular已经非常流行了，拥有相当多的可用性的扩展（例如AngularUI，Restangular）。

  然而，尽管React社区刚刚起步，但是它成长得很快。React Bootstrap就是一个证明。它只是需要时间去开发更多的可用组件。

 结论

 如果你喜欢Angular的开发方式，那么你刚开始并不喜欢React。主要因为它的单向数据流和缺乏应用开发的特性。很多问题还需要你自己去考虑。

  但是，一旦你理解了Flux的设计模式和React的设计思想，你就能感到舒适。我相信你能看到它的优美。

  Facebook和Instagram已经开始使用React（因为他们在领导这个项目）。

  GitHub上源码编辑器Atom也正在使用React。

  雅虎邮箱也正在使用React进行重建。

  目前已有大规模的应用程序和大量的科技公司正在关注它。