【譯】爲什麼我們要創造React?【React系列文章】

目前已經有很多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 去看看我們已經構建好了的項目吧。

我們的文檔是面向使用這個框架來構建應用的,但如果你有興趣瞭解具體細節的話,就聯繫我們吧。

感謝閱讀完本文!

原文地址:Why did we build React?

 

譯者注:作爲【React系列文章】的開盤菜,還是有必要把官方的自白先引過來,

隨後的文章裏面將會對React的使用與原理進行剖析,並橫向地與Angular進行關聯對比。

敬請期待。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章