目前已經有很多JavaScript MVC框架了。爲什麼我們還要創造React而爲什麼你會想使用它呢?
React 不是一個MVC框架
React 是一個用來構建可拼裝化的UI界面的js庫。它鼓勵創造可複用性的UI組件,這些組件的特點之一是當前數據會隨着時間發生改變。
React 不使用模版
習慣上,web應用的UI界面是通過模版或HTML指令來搭建的。你可以使用這一整套將頁面抽象化了的模版來構造你的UI界面。
React 在處理構建UI界面的不同之處在於它是以組件形式將UI界面阻斷。這意味着React用的是一門真實的,全能的編程語言去渲染視圖(View層),同時我們也看到了比採用模版更優秀的一些原因:
- JavaScript是一門靈活的強大的,並且有能力構建各種抽象的編程語言。這一點在大型的應用中是非常重要的。
- 通過將你的標識和它們相關聯的View層的邏輯統一起來,React實際上就可以讓View層更容易擴展和維護。
- 通過將對標記元素和內容的理解融入JavaScript之中,沒有手動添加的字符串拼接,因此很少有引發XSS漏洞的地方。
此外,我們也創造了JSX,一種可選的語法擴展,如果相對於原生JavaScript,你更喜歡HTML的可讀性,那麼你將會愛上它。
簡單到要命的響應式更新
當你的數據是動態變化時,React真的是好用到爆了。
在一般的JavaScript應用中,你需要關注數據的變化還有與之相關的DOM的更新。即使是AngularJS也一樣,它只是通過指令和數據綁定(這需要一個關聯函數手動地更新DOM節點)來提供一個聲明接口。
React採用了不同的方法。
當你的組件第一次被初始化時,render方法將被調用,繼而生成一個輕量級的View層的展示層。對於這個展示層,它產生了一連串的標識,另外它也被注入到document之中了。當你的數據變化時,這個render方法將再次被調用。爲了儘可能高效地執行更新,我們對先前調用的render方法的返回值與新的值進行差異對比,由此生成最小的變化集合來應用到DOM的更新上面。
從render方法返回的數據既不是一個字符串又不是一個DOM節點——它是一個輕量級的關於DOM應該是什麼樣的描述。
我們稱這個過程叫做reconciliation(調節)。 點擊這個jsFiddle去看看一個採用reconciliation跑起來的例子。
因爲這個重新渲染是非常快的(對於TodoMVC只花了大概1毫秒),所以開發者並不需要明確地指定數據的綁定。我們發現這個方式可以讓構建應用程序變得更加容易。
HTML僅僅是個開始。
因爲React擁有自己的輕量的document展示層,所以我們可以用這個來做一些很酷的東西:
- Facebook有用<canvas>而不是HTML來渲染的動態圖表。
- Instagram 是一個完全採用React和Backbone.Router 構建的單頁應用。設計者會定期地貢獻使用JSX編寫的React代碼。
- 我們已經構建了在一個web worker中運行React應用程序的內部原型還有使用React通過Objective-C的橋接接口來操縱原生的iOS視圖層
- 爲了SEO、性能、共享代碼還有項目整體的靈活性,你可以在服務器端運行React。
- 事件在全部現代瀏覽器(包括IE8)下表現一致性還有符合標準化,同時也自動地採用了事件委託 。
趕緊到facebook.github.io/react 去看看我們已經構建好了的項目吧。
我們的文檔是面向使用這個框架來構建應用的,但如果你有興趣瞭解具體細節的話,就聯繫我們吧。
感謝閱讀完本文!
譯者注:作爲【React系列文章】的開盤菜,還是有必要把官方的自白先引過來,
隨後的文章裏面將會對React的使用與原理進行剖析,並橫向地與Angular進行關聯對比。
敬請期待。