為什么React.js這么火

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