从jQuery到AngularJS，再到React，前端必须走在最前端

本文主要是介绍从jQuery到AngularJS，再到React，前端必须走在最前端，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

前言

最近很认真地在学习AngularJS，正准备在项目中实践，却不小心地知道了React，根据我师傅说的 React相比AngularJS对DOM的操作思想又是不一样的，React的虚拟文档对象模型(DOM)和拼接机制很有可能是新的一种趋势。这让我很忧郁啊 * _ * ，就像以前初学JavaScript的时候，jQuery的编程思想让我耳目一新，于是没有深入学JavaScript而是花了很长一段时间去研究jQuery，接着在熟练掌握了jQuery之后又被AngularJS给洗脑。而现在呢，AngularJS还没有使地很6，又要去学React吗？前端的新技术兴起速度快得出乎你的想象。唉，没办法。“沉舟侧畔千帆过，病树前头万木春”，学技术的，总是要不断地“抛弃”原有的技术，去研究新的技术。

简单分析一下三者的区别

jQuery

jQuery不能跟AngularJS、 ReactJS归到同一类，因为JQ只是一个库，其他两个才算是重框架；毕竟是“先入为主”，jQuery 存在的时间最早，各种插件、组件、UI库多的根本数不清。也正是因为跟“大白菜”一样的逻辑，jQuery的学习和应用都非常容易，所以很适合初学者使用。

AngularJS

AngularJS 这个框架比较重且兼容性一般般，比起jquery1.xIE全兼容，这货只能兼容IE8及以上（对于IE8以下版本，使用ng IE补丁插件毕竟是费力不讨好的事情），但无可否认它是能明显提高前端开发效率的工具。它比较适合做前端后台管理界面、或ERP类web app（例如：worktile就是用ng实现）。有一点必须承认，AngularJS最吸引人的是它的编程思想，它把很多后端的思想比如“依赖注入、指令”应用到前端，这使得它的门槛变得有点高，所以初学者不建议直接去学习AngularJS（因为你根本不会用，哈哈）。

ReactJS

React是脸谱开发的一种JavaScript框架，它的唯一目标就是构建高性能的用户接口。开发React就是为了解决其他JavaScript框架都未能解决的一个问题-高效地渲染大型数据集。它采用了虚拟文档对象模型(DOM)和拼接机制，这样，每一次对网页做了更改后，React就只更新与更改相关的部分，而不需要重新对整个站点进行渲染。

最为最近很火的一个前端解决方案，这货一开始只是Facebook 内部使用的UI库（类似bootstrap），后来慢慢发展成一整套前后端通吃的 Web App 解决方案（野心很大，让现在的Hybrid 之流怎么活？估计之前facebook HTML5大跃进失败了，想要用它继续完成三端同步的梦想），所以这框架适合Web移动开发。（据说ReactJS项目组能调用android ios一些不为人知的接口，从而显著提高android ios原生项目效率）目前使用react在实际应用中，必须使用其扩展插件，而使用了插件的reactjs的确算是重框架React 的大小和 Angular 相当，但 Angular 是一个完整的应用框架。React 显而易见的臃肿，但是你只获得了很少的功能。

重点分析AngularJS和React

通常认为Angular是一种“固执己见”的框架。意思就是AngularJS的开发者认为一个“好的”应用前端架构就应改像AngularJS这样，他们也在AngularJS的核心也采用的是这样的架构。因此，当你的应用满足上面所说的限制的话，Angular就运行的非常良好。然而，如果你发现你的应用框架构与Angular所期望的架构相差很大，那么你会感觉到非常痛苦。相比之下，React并不打算给你提供一个适合你编码的理想架构。它让你减少要装载的组件，降低装载时间，让你更加自由地管理数据的表现形式。

模版

Angular的指令（Directive）用于数据驱动显示，通过它来编写显示模版相当容易，这是使用Angular的一大好处。当你为数据构建UI时，使用Angular是非常直接的。对于数据展现而言，只要放弃对某些环节的控制，你就能以一种更直观的方式，给用户界面带来更少的代码以及“显而易见”的感觉。然而，React趋向于由你提供自定义函数来驱动数据的展现。这通常意味着，在数据被通过代码融入DOM前，你得自己定义你的数据将如何被展现。这使得在尝试决定某个元素具体该如何被渲染时，逻辑上会出现一定的断层。

性能

虽然Angular的数据的表达能够非常紧凑, 但是渲染大型数据集依旧被证明是一个痛点. 由于双向数据绑定需要监听每一个可变元素, 数据量变大就会带来显著的性能问题. React, 在另一方面, 使用虚拟DOM来跟踪元素的变化. 当检测到变化时, React会构建一个针对DOM变化的补丁, 然后应用这些补丁. 由于不必在每个元素每次变化时重新渲染整个巨大的table, React相对于其他JavaScript框架有显著的性能提升.

应用架构

AngularJS和React还有一个不同点在于它们所选择的架构. 最初AngularJS使用了MVC(模型-视图-控制器)模式构建, 然后逐渐演化成了MVVM(模型-视图-视图模型)-MVC混合架构. React却是另一方面, 它的关注点只在MVC模型的”V”上 – 它被设计用来展现数据, 而将其他方面交由应用架构中编程人员选择的其他组件负责. 有一件值得注意的有趣的事是, 由于这样的架构选型, AngularJS的某些棘手的组件完全可以通过React来增强.

结论

这里写图片描述

Angular 和 React 相同的是 Model Driven View 的套路, 自动维护 View, 减少手工状态维护.把两者都当作是对 Backbone MVP 模式的改进的话, 上边这一点差不多的.不同的地方是 React 采用的方案有点像函数式的做法, Component, Immutable data 等等更着重于将 DOM 封装可以相互组合的 Component, 并且将 DOM 操作抽象为状态的改变.这样抽象之后, 学习和编写复杂应用的成本降下来很多React 的问题主要在它实现功能近似与 jQuery 的 DOM 操作和事件监听,要写完整的应用需要 MVC, 对 React 来说就是后来发布的 Flux 模型,而 Flux 并不是完整的一个框架, 只是 Facebook 发布的一套架构体系所以要写完整的大应用估计还有不少坑要淌过去.. 在这方面 Angular 东西多多了.

在为你的应用选择JavaScript框架时，要考虑每个框架的优势和劣势，这需要对相关的知识有深入的了解。正如上文所述，如果应用时常要处理大量的动态数据集，并以相对简便和高性能的方式对大型数据表进行显示和变更，React是相当不错的选择。但是React不像AngularJS那样包含完整的功能，举例来说，React没有负责数据展现的控制器（Controller）层。总而言之，在AngularJS和React之间做出选择意味着回答一个看似简单的问题：为了解决应用潜在的性能问题，是否值得你去花精力学习和使用React？或者说，是否可能将React的组件（Component）在AngularJS中实现（当然这样会使得架构整体变得冗余）[译者注：AngularJS中的指令和React的组件扮演着类似的角色]？要回答这个问题并不容易，你要根据具体的应用场景来做出决定。