【轉】React.js 概覽

標籤：blog   http   io   ar   os   使用   java   sp   資料   

原文轉自：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

【轉】React.js 概覽