【轉】React.js 概覽

原文轉自：http://segmentfault.com/blog/jiyinyiyong/1190000000693651

這裏關於 React 的收集的消息的一個提綱, 具體內容看下邊的連接,
微博是常常更新的, 隔一段時間會同步到後邊的網頁上去:
http://weibo.com/reactchina
http://react-china.org/collections/
GitHub 上有整理的列表:
https://github.com/enaqx/awesome-react

項目來源

目前在視頻和錄音當中據說過兩個說法:

一個是 Facebook 之前用過模版渲染, 用過雙向綁定, 可是應用複雜度增長了
由於數據只有有複雜關係, 後面加入的代碼很是容易把前面的功能破壞了
因而 React 用瞭解決這個問題, 由於 DOM 老是跟着數據渲染的, 不容易出錯

另外一個說法, Facebook 有 XHP 改良了 PHP, 更安全地處理 HTML 轉義:
https://github.com/facebook/xhp
並且 XHP 當中實現了定義和嵌套 Component 的功能, 複用模塊很是清晰
爲了把後端技術的成功複製到前端, 就作了 JSX, 在前端插入相似的數據結構
而且想要作到每當有數據更新, 就對整個頁面進行渲染, 而避免複雜的狀態維護
最後不斷優化性能, 甚至經過 DOM diff 達到了比手寫更好的性能

功能

React 框架自己做爲 MVC 當中的 V 存在, 提供兩個功能:

• 渲染和維護 DOM
• 監聽 DOM 的事件

其餘的好處是:

• React Component 設計得很是適合模塊化
• Component 和 DOM 得益於 Virtual DOM 的 diff 和合並操做, 有性能提高
• 沒有 Model 的複雜關係, 編寫應用邏輯很是清晰
• 服務端渲染

調試工具

Chrome 擴展, 很方便查看 Component 對應的 props 和 state
https://github.com/facebook/react-devtools

因爲 Chrome 已經有 JavaScript 自動編譯的功能, 加上 React 的刷新方式
能夠作到代碼熱替換, 在有修改以後快速更新界面上的代碼

Flux

前端單頁面的應用經常使用的架構之間簡單的區別看這裏:

實際當中結構會更復雜一點, 好比 Backbone 之間模塊的劃分,
至少能夠發現不是圖上展現的單向的一個循環:

並且實際上 MVC 很容易被寫成這樣, 在 View Model 之間產生複雜的關係:

而 Flux 對 MVC 作了調整, 回到近似 MVC 的單向循環當中:

社區活躍人物

Pete Hunt, Instagram 工程師, 即將離開 Facebook
一塊兒開發 React 的工程師能夠看這個相關的帖子:
https://www.facebook.com/pwh/posts/10101869605197995
Pete 九月份有很多關於 React 的演講, 是理解 React 很重要的資源
Twitter 賬號 https://twitter.com/floydophone

Ben Alpert, @spicyj 是 Khan Academy 的工程師
https://github.com/spicyj
社區看到不少他參與的地方

Christopher Chedeau @vjeux 是 Facebook 工程師
http://blog.vjeux.com/
若是在網上搜索教程, 很容易搜到他的博客上, 他也有一個演講的視頻

使用 React 的公司

官方倉庫的 Wiki 上記錄了一些使用的公司:
https://github.com/facebook/react/wiki/Sites-Using-React

Instagram 全站用的 React, Facebook 部分用了 React
Khan Academy 的編輯器用了 React.
其餘公司並不清楚

國內聽到豌豆莢, 豆瓣, WiredCraft 有在生產環境用過 React
信息不是很準確, 之後嘗試收集更多出來..

模塊

模塊目前對比其餘 MV* 框架不夠豐富, 應該的很快能遇上,
目前模塊主要在 npm 上, 經過標籤能夠聲明, 在這裏查看:
http://react-components.com/

函數式編程: 不可變數據

Component 的 props 被認爲是不可修改的, 保證一樣的數據獲得一致的界面
在 Om 當中藉助了 ClojureScript 的數據不變性, 性能甚至更高
Facebook 開源了他們的關於 immutable 數據結構的類庫:
https://github.com/facebook/immutable-js

惰性計算沾點邊.. DOM 樹並非每次更新, 而是計算以後緩存住內容, 避免了多餘的計算

一些函數式編程語言也接納了 React 或者 Virtual DOM 用於編寫界面:
Om(ClojureScript), eliom(OCaml), PureScript, Elm

響應式編程

Functional Reactive Programming, 表明的語言是 Elm
React 和 Elm 很是類似, Component 的組合方式, 數據不變性, Virtual DOM

https://github.com/component/reactive
https://github.com/yang/reactive-coffee
http://reactive-extensions.github.io/RxJS/
http://baconjs.github.io/
http://elm-lang.org/

對比

Ractive: http://blog.ractivejs.org/posts/whats-the-difference-between-react-and-ractive/

Angular: ?

Ember: https://docs.google.com/presentation/d/1afMLTCpRxhJpurQ97VBHCZkLbR1TEsRnd3yyxuSQ5YY/edit

Backbone: ?

Vue: https://github.com/yyx990803/vue/wiki/FAQ

Web Components: http://programmers.stackexchange.com/questions/225400/pros-and-cons-of-facebooks-react-vs-web-components-polymer

性能

Pete 有個演講作了比較深刻的分析 www.youtube.com/watch?v=h3KksH8gfcQ

Todo 的測試: http://vuejs.org/perf/

DOOM 3 渲染架構: http://fabiensanglard.net/doom3/renderer.php