既生AngularJs何生ReactJs

此文已由作者杨介正授权网易云社区发布。

欢迎访问网易云社区，了解更多网易技术产品运营经验。

angularJs如此优秀的框架为啥一下子就被以reactJs为代表凭借virtual Dom为技术核心的众框架打败。抱着这个疑问，查阅了很多相关文章，结合自己的大胆的臆测和试验，得出了一些结论。我把自己的结论分享在这篇文章里，希望大家一起交流学习，也欢迎各位同学指正错误的地方，毕竟有很多纯属个人理解和臆测。

var
    dom = document.getElementById('test');

dom.style.color = 'green';

好了，下面开始分析既生“瑜（ang u lar）”何生“亮（ r eact） ”了。

2.AngularJs的工作原理及性能瓶颈

先来看一下angular的工作流

<div  ng-controller="ctrl">
 <h2 ng-bind="title"></h2>   
 <div ng-bind="content"></div>
 <div>
  <span ng-bind="praise"></span>
  <a ng-click="praiseHandler">赞</a>
 </div>
</div>

//ng-bind简易代码
Angular.directive('ng-bind', {
  
  link: function(element, attr, scope){
   //获取绑定数据名称(title/content/praise)
    var key = attr.ngBind;
    scope.$watch(key, function(nVal, oVal){
      element.innerText = nVal;
    })
  }  

});

//controller简易代码
Angular.controller('ctrl', function($scope){  
  $scope.title = '标题';
  $scope.content = 'hello world!';
  $scope.praiseHandler = function(){    
     //ajax...
    $scope.praise = ret.count; 
   
  }

})
Angular.compile(document.getElementsByClassName('article')[0])($rootScope);//一个简易的编译

3.ReactJs的工作原理

很多人都说，virtual dom可以减少对real dom的操作，将操作累积起来一次性dump进real dom里，从而提高性能。以我个人的理解来说，这是不对的。虽然real dom 的操作有上下文的切换，相对virtual dom 体积也更大，但以现在浏览器上下文切换的速度和hash map的速度加上浏览器自身的各种优化处理，我想不会有人为了这点开销而去建这么大一颗虚拟树然后再进行各种diff。virtual dom之所以会被引用进js里（其他领域也有这个概念），主要是为了实现一种更高效、更彻底的数据和结构分离的开发模式：react用virtual dom保留dom的引用，用diff快速对比出state发生变化的virtual dom，然后将变化dump进real dom。为什么说更彻底，react virtual dom没有提供dom选择器的功能，尽可能的杜绝了数据和结构耦合的可能性。相反，如果你用angular的directive开发组件，你有时候会不得不去获取子节点或者父节点。从这点上说，virtual dom真的好适合做组件化。

接下来，同样先来看下reactjs的工作流

react通过virtual dom将数据监听函数注册在restore里，当dispatcher发来一个action，restore监听到有数据发生变化时，相比较angular反复的查看scope里数据是否稳定，react的处理更为简单粗暴，一次处理完直接走人（所以也称单向数据流）。这带来的坏处就是，为了能让数据间的变化增加互动（一个数据的变化引起其他数据跟着变化等），相比较angular的一劳永逸，在react里你可能需要手动往restore里注册更多的监听函数。virtual dom处理完监听函数之后，这时就进入了diff阶段，最后就是将patch dump进real dom tree。

4.总结

angularjs和reactjs一样，都是要实现数据和结构分离的框架，各有各的优势。先说说angular，它的优势就是结构给人更加MVC的感觉，数据绑定得益于它的循环算法，一劳永逸。directive作为attribute，可以运用到任何dom上。比如你想给一些button、a、img在点击后加上加载中的loading功能，只需要写一个loadingDirective，然后作为attribute分别分配给它们就好了，非常简单。这个给react去实现的话，就稍微复杂一点，你可能要写个mixin，然后分别注入到button类，a类，img类中。angular的劣势就是它的scope dirty check算法。反复的检查，在大型数据结构中真滴是很慢。那么有没有一种改进的方法呢，我想出了一种。scope的dirty check之所以需要从头到脚反复检查，主要原因是scope事先不知道哪些值发生了变化，因为用户都是通过scope.a = 1的方式去改变scope里的数据的。那么，有没有办法可以让scope事先就知道是哪些值发生了变化，然后直接调用其监听函数呢。有，通过函数赋值的方式。不要直接scope.a = 1,而是通过类似scope.set('a', 1)的方式进行赋值，这样scope就能直接记录下a这个key发生了变化。react中需要调用方法setState来改变状态，我猜也有类似的原因，这里不深讲了，欢饮各位感兴趣的同学与我私下交流。react的优势不用多说了吧，快、准、狠，virtual dom的组件化方案能够实现数据和结构的完全分离，这点我比较喜欢。它的劣势就是，没有正儿八经的mvc模式，事件、结构、数据全在一起，干啥事都得写个组件，我只想显示一行hello world呀！纯js，你能看到html文件和浏览器html parser生无可恋的表情吗？不管对于不对，希望这篇文章能给大伙带来一丝丝帮助和灵感。好了，整篇文章充满了个人理解与臆测，恭迎各位同学指正，说好不许打脸！

网易云免费体验馆，0成本体验20+款云产品！ 

更多网易技术、产品、运营经验分享请点击。