浅谈angular和react（面试马后炮1）

/*

好死不死，小墨又去面试了。

引发一连串的蝴蝶效应：

首先ZCOOL技术博文的开篇之作：

一家小墨表现灰常不错的公司，只是被问到这个问题是略显尴尬：你有技术类的博客么？

恩………………没有

PS：我写在worktile里了，不想给你看啊！

于是我决定把博客类的文章和学习新技术的比较整理到zcool的文章页来，至于能整多少篇？！

沃太富！

另一家公司不知道是不是由于等了太长的时间，导致大脑缺氧，智商不在线，完全体验被推土机碾压的感受~

一、关于框架

推土机：你们用什么框架开发

M：angularjs

推土机：为什么不用react

M：综合考虑比对我们的系统更适合用angularjs

推土机：angularjs能做的react都能做，react 4w多的受众，angular才1w，吧啦吧啦吧啦……

PS：后面听不懂了

二、关于less

推土机：css用什么工具

M：less

推土机：winless用么

M：用

推土机：运算相关应用你怎么理解

M：what

推土机：@

M：*&&*@#…………@&&

推土机：你用less做什么

M：写样式啊

推土机：吧啦吧啦吧啦……

PS：回去查了一下才反应过来他应该是想要问@定义的属性相关的组合嵌套使用，专业名词是硬伤。

三、关于jq

推土机：jq插件写过么

M：写过

推土机：生命周期怎么定义的

M：*&&*@#…………@&&

推土机：所有插件都有什么周期

M：……

PS：需要时触发绑定，不需要时解绑呗，当时又被绕进去了。

回去一查不知道他说的是不是react组件的生命周期。

还有一些其他的，撇下不谈，

就react这个最近大热的家伙的被推崇，还有之前一直被我们钟爱的angularjs被嫌弃的事发表一些议论：

*/

注意以上都是废话，要说的从这里开始：

粗略的认识一下react，并且扒一扒它和angular的关系。

其实之前虽然看了一些react的教程，其实对react到底能做些什么还不是很清楚，也不明确它和我们一直用的angularjs的关系和区别，才会被质问的哑口无言。

回去科普了一下，觉得我需要为没有给angular君做成合理的辩解和维护表示深深的歉意。

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

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

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

AngularJS和React还有一个不同点在于它们所选择的架构。

最初AngularJS使用了MVC(模型-视图-控制器)模式构建, 然后逐渐演化成了MVVM(模型-视图-视图模型)-MVC混合架构。

React却是另一方面, 它的关注点只在MVC模型的"V"上 – 它被设计用来展现数据, 而将其他方面交由应用架构中编程人员选择的其他组件负责. 有一件值得注意的有趣的事是, 由于这样的架构选型, AngularJS的某些棘手的组件完全可以通过React来增强。

如果应用时常要处理大量的动态数据集，并以相对简便和高性能的方式对大型数据表进行显示和变更，React是相当不错的选择。

但是React不像AngularJS那样包含完整的功能，举例来说，React没有负责数据展现的控制器（Controller）层。

两者最大的区别就是轻和重的区别，建议就是，大访问量轻逻辑的页面用React，小访问量重逻辑的页面用Angular。

Angular是真正的大而全的framework，他有自己一套思路，基本你follow这个思路往里面填代码就OK。

React是一个简短有力的library，他只负责解决你某个单一的“痛点”。

还是同事说的对：react 和 angular 没有明显的高下之分，而是应用场景的不同。 

第一篇文章写的有点乱~