为什么我从AngularJS切换到React

本文概述

• AngularJS 1.x中的痛点
• 认识React
• React的优势
• 我有些痛苦地转向了React。
• 总结

2011年, 当我的代码开始因jQuery选择器和回调而混乱不堪时, AngularJS成为了救生员, 它有助于更​​好地管理, 快速开发和提供更多功能。 AngularJS的双向绑定和”将模型作为单一事实来源”的理念使我震惊, 并减少了整个应用程序中的数据冗余。

但是, 随着时间的流逝, 我发现AngularJS有其自身的一些痛点。最终, 这些让我感到沮丧, 以至于我开始四处寻找替代解决方案。

AngularJS 1.x中的痛点

执行DOM

Angular的执行流程严重依赖DOM。在应用程序的默认引导中, 它会扫描DOM并使用指令的优先级对其进行编译, 这使得调试和测试执行顺序变得困难。

自己的依赖注入

JavaScript没有自己的包管理器和依赖项解析器。但是最近, 诸如AMD, UMD和CommonJS之类的实现已经很好地解决了这个问题。可悲的是, AngularJS并没有派上用场。相反, 它引入了自己的依赖项注入(DI)。尽管有使用RequireJS的非官方AngularJS DI实现。

双向装订是一把双刃剑

使用双向绑定很诱人, 但是随着组件复杂性的增加, 可能会导致性能下降。

双向绑定如何影响性能？嗯, JavaScript ES5没有任何实现来通知其变量或对象的任何更改, 因此Angular使用一种称为”脏检查”的方法来跟踪数据更改并将其与UI同步。在Angular范围内执行任何操作($ digest循环)后, 将执行脏检查, 这会导致绑定数量增加而导致性能降低。

双向绑定的另一个问题是页面上的许多不同组件都能够更改数据, 从而导致多个数据输入源。如果处理不当, 可能会导致模棱两可的情况。但是公平地说, 这纯粹是一个实现问题。

Angular有自己的世界

Angular中的每个操作都必须经历其摘要周期, 否则你的组件将不会与数据模型同步。因此, 如果你正在使用任何第三方现有的JavaScript库, 则如果涉及到数据更改, 则需要使用Angular的$ apply函数对其进行包装, 如果它是实用程序库, 则需要将其转换为服务。这就像为Angular重新发明了每个可用的JavaScript模块一样。

太多的概念和陡峭的学习曲线

学习Angular需要学习大量概念, 包括模块, 控制器, 指令, 范围, 模板, 链接功能, 过滤器和依赖项注入。

认识React

React是来自Facebook和Instagram的新的开源JS库, 是编写JavaScript应用程序的另一种方式。当它于2013年5月在JSConf EU上推出时, 观众对其”单向数据流”和”虚拟DOM”的一些设计原则感到震惊。

官方的React网站说：” React是一个用于构建用户界面的JavaScript库”, 是的, 仅界面而已。它不是像AngularJS这样的框架。但是你可以编写独立的组件, 这些组件或多或少与Angular指令相比。快速概述

React重新思考了Web开发中的最佳实践。 Reach鼓励单向数据流, 并坚信组件是由数据驱动的状态机的理念。大多数其他框架都喜欢使用DOM并直接对其进行操作, 而React讨厌DOM并致力于使开发人员免受DOM的侵害。 React只提供了定义任何UI组件所需的基本API, 仅此而已。遵循UNIX理念：小就是美丽。做一件事, 做到最好。

这是Pete Hunt(来自Instagram团队)两者之间很好的比较

这只是一个图书馆。我们需要一个带有React的框架吗？

简短的答案：你的选择。

使用React, 你可以构建用户界面, 但是我们仍然需要管理依赖关系, 进行AJAX调用, 应用数据过滤器。如果确实需要框架, 为什么要放弃AngularJS？

框架是一组程序包和一组规则。如果我不需要某些软件包, 或者想与其他软件包交换该怎么办？我该怎么做？我们需要一个包管理器。我们如何在AngularJS中管理软件包？这是你的选择, 但是Angular拥有自己的世界。你需要将每个外部程序包都包装到Angular的世界中, 然后使用它。但是React只是JavaScript, 而且任何用JavaScript编写的包都不需要在React中进行任何包装。

因此, 最好从npm之类的软件包存储库中选择自己的软件包, 并根据需要组织它们。好消息是, React鼓励使用npm, 它有很多现成的软件包。要开始使用React, 你可能想使用以下Full-Stack Starter Kits之一

React的优势

那为什么我真的切换到React？

反应快！

React采用了与其他框架不同的方法。它不允许你直接使用DOM。相反, 它在JavaScript逻辑和实际DOM之间引入了虚拟DOM层。这有助于大大提高速度。在连续渲染中, React对虚拟DOM进行比较, 并仅更新实际DOM中需要更新的部分。

虚拟DOM还提供了统一的跨浏览器API, 甚至可以在Internet Explorer 8中使用。它还有助于解决跨浏览器问题。

一切都是一个组件(UI小部件)

编写独立的UI组件可将你的应用程序模块化, 并将每个关注点分离。每个组件都可以单独开发和测试, 然后使用其他组件来提高可维护性。

单向数据流取胜！

Flux是一种用于在JavaScript应用程序中创建单向数据层的体系结构。它是在Facebook上与React视图库一起设计的。它使开发更简单, 使查找和修复错误更容易。通量更多的是概念而非实现。它也可以在其他框架中实现。 Alex Rattray在React中使用Backbone Collection和Model很好地实现了Flux。

JavaScript, 别无其他

现代网络应用程序的工作方式与传统网络不同。 View层需要通过用户交互进行更新, 而无需访问服务器。因此, View和Controller需要相互依赖。许多其他框架在其View层使用诸如Handlebars和Mustache的模板引擎, 但是React认为这两个部分是如此相互依赖, 以至于它们必须位于一个位置, 而无需使用任何第三方模板引擎, 也不会超出其范围。 JavaScript。

同构JavaScript

单页JavaScript Web应用程序的最大缺点是, 它在被搜索引擎抓取时具有局限性。 React为此提供了解决方案。 React可以在将服务器上的应用程序发送到浏览器之前对其进行预渲染, 并且它还可以从服务器中预渲染的静态内容中将相同状态恢复到实时应用程序中。由于搜索引擎抓取工具严重依赖服务器响应而不是JavaScript执行, 因此预渲染此类应用有助于搜索引擎优化。

React在RequireJS, Browserify和Webpack方面表现出色

在构建大型应用程序时, 非常需要加载程序和捆绑程序。不幸的是, 尽管即将发布的EcmaScript 6(System.import)版本中建议使用JavaScript, 但当前版本没有提供模块捆绑器或加载器。幸运的是, 我们有一些不错的替代品, 例如RequireJS和Webpack。

React是使用Browserify构建的, 但是如果你想注入图像资源并编译LESS或CoffeeScript, 那么Webpack可能是一个更好的选择。

我有些痛苦地转向了React。

• 由于AngularJS是一个框架, 因此它具有许多优点, 其中包括$ http服务中的AJAX包装器, $ q作为Promise服务, ng-show, ng-hide, ng-class和ng-if作为控制语句。用于模板。

• React不是用来构建UI的框架而是库, 因此你需要自己考虑所有其他内容。我正在开发一个开源项目, 该项目可以与React一起使用, 以简化你的开发, 社区也正在积极贡献类似的可重用组件。

  React-components.com是一个非官方目录网站, 你可以在其中找到此类开源组件。

• React的理念不鼓励你使用双向绑定, 这在你处理表单元素和可编辑数据网格时会带来很多麻烦。但是, 随着你开始了解Flux数据流和存储, 事情变得更加清晰, 简单和容易。

React是新事物, 因此社区成长需要一些时间。

Angular最近获得了极大的普及, 并且具有相对大量的可用扩展, 例如AngularUI和Restangular。 React的开源社区是一个新的社区, 但是它通过诸如React Bootstrap之类的扩展正在快速发展。我们拥有更多可用组​​件只是时间问题, React可以轻松用于快速的Web应用开发。

总结

如果你以前使用过AngularJS, 那么你可能一开始会讨厌React, 主要是因为它是单向数据流并且缺少”框架”, 你需要自己处理许多其他事情。但是, 一旦你熟悉了Flux的设计模式和React的理念, 你就会意识到它的美。

Facebook和Instagram都使用React。 Github的新Atom编辑器是使用React构建的。即将发布的Yahoo Mail将在React中重建。你还需要其他哪些示例？立即尝试一下React。