为什么React.js这么火

jopen 10年前

by @goddyzhao

就当大家还沉浸在Angular.js巨爽无比的双向数据绑定（Two-Way Data Binding）以及快速的代码编写时，非死book用React.js瞬间就完成了逆袭。一时间，各大技术社区，论坛，充斥着关于React.js的新闻，大家都开始重新思考前端的框架到底应该是怎么样的，连Angular在2.0中也来了个翻天覆地的变化。

其实Angular和React不属于同一类的东西，Angular是一个框架，而React更多是负责UI视图部分，大家普遍认为React是MVC中的V。

那么到底为什么React.js一下子就火起来了呢？个人觉得可能主要是因为以下几个因素所导致的：

单向数据绑定

就在满世界夸赞双向Data Binding好的时候，React说我默认只支持单向数据流，因为在冯诺依曼体系中，数据就是单向流动的。这么一来，小伙伴们都震惊了，纷纷去Google双向和单向数据绑定的区别。单向绑定确实相比之下要更加轻，但事实上呢，双向绑定的需求也确实是存在的，比如：用户填写表单的时候，填写的值就需要更新到Model中，所以，React其实也有通过addon React Link来提供这个功能。只是他默认是不支持双向数据绑定的。

虚拟DOM

关于虚拟DOM的好坏，业界众说纷纭，这里不做评价。但单从这个概念本身起码让大家觉得是个新东西。所谓虚拟DOM就是说，在React中如下这段代码： 

  React.render(      <div className="commentBox">        Hello, world! I am a CommentBox.      </div>    );

这里的div其实和DOM中的div完全是两码事儿了，只不过React提供了和DOM类似的Tag和API，事实上React会通过他自己的逻辑去转化为真正的DOM。所以，把这种重做虚拟DOM。

那么这样做有什么好处呢？最明显的一点好处就是React所谓的dom diff，能够实现delta级别的dom更新。当有数据变动导致DOM变动时，React不是全局刷新，而是通过它内部的dom diff算法计算出不同点，然后以最小粒度进行更新。这也是React号称性能好的原因。

其次，还有一点非常好的地方就在于，有了虚拟DOM就可以让UI脱离设备，换句话说，只要有对应的转化关系，如：虚拟DOM -> 浏览器DOM，就能进行渲染。React Native就是一个很好的例子，它把虚拟DOM转化为Native UI组件，这样理论上就解决了DOM在移动端性能的问题。当然，缺点也是有的，比如：就无法和已有的原生DOM组件进行兼容。

JSX

JSX其实本质上是一种新的语言，只不过它设计成JavaScript一种扩展，所以，其语法绝大部分都和JavaScript一样。而同时它搭配一个JSX Transform的工具可以将JSX编译为原生的JavaScript。

那么这样做好处是什么呢？当然了，首要任务就是让你写代码方便点，否则想想每次都要React.createElement也是醉了！

其次呢，另一个好处就是它可以让你书写ES6之类的语法，就和CoffeeScript是一个道理，最终它会翻译到浏览器兼容的语法。

背后有非死book这条大腿

非死book这条大腿支撑着React的开发，在项目活跃度和质量上自然是可以得到保证的。就好比Angular背后有Google一样，相比之下，Ember.js就薄弱了不少，尽管有@wycats、@tomdale这样的大牛，但是毕竟个人和大企业还是不能相比的。

其实纵观以上几点都有一个共性就是推陈出新，上述这些点是否真的如它描述的那么好另当别论，但最起码，它提出了一些新的概念。新鲜的东西总是能够吸引大家的眼球的。

本文仅表达个人对React火爆原因的粗浅分析，不对其好坏做评价。其实，说React比Angular好或者反过来都是没有意义的，各自都有各自的优缺点，大家也不要盲目的从众，根据自己应用的特点选择合适的才是王道。

来自：http://du.jie.io/p/2015-03-10-why-react-is-so-hot-by-goddyzhao.html