我剛開始學(xué) ReactJS 的時(shí)候是很痛苦的,我沒有真正理解 ReactJS 的用處和好處翁垂,如果時(shí)光能倒流术陶,我很希望當(dāng)時(shí)能有一篇這樣的教程來告訴我答案。
React 是什么?
React 相比 Angular, Ember, Backbone 等等框架有什么不同? 用 React 如何處理數(shù)據(jù)? 如何和服務(wù)器通信? JSX 又是什么? 隨處可見的 "component" 又是什么鬼?
別想了腥椒。
別想太多。
React 只是一個(gè)視圖層(view layer)框架候衍。
React 經(jīng)常被拿來和其他 MV* 框架作比較笼蛛,但是 "React vs Angular" 這種秦瓊戰(zhàn)關(guān)公的比較毫無意義。Angular 是一套完備的框架蛉鹿,包括一套視圖層滨砍,而 React 并不是。這就是 React 為什么容易讓初學(xué)者迷惑之處妖异。它可以和另外的一些完整的 MV* 框架一起工作惋戏,但是它負(fù)責(zé)處理視圖層。
React 提供了一套自己的模板語言他膳,以及一些渲染 HTML 必備的函數(shù)功能(function hooks)响逢, React 輸出的,對(duì)棕孙,就只有 HTML舔亭。你把 HTML 和 JavaScript “捆綁”起來就稱為一個(gè)組件(component)些膨,組件可以讓你存儲(chǔ)一些內(nèi)部狀態(tài)(比如當(dāng)前哪個(gè)標(biāo)簽頁被選中了),不過到最后钦铺,你需要返回(return)的是 HTML订雾。
精粹 (The Good)
在使用 React 一段時(shí)間后,我粗淺的總結(jié)了三點(diǎn)非常重要的益處:
1. 你可以不用切換文件就能告訴一個(gè)組件該如何渲染
這也許是最重要的東西矛洞,盡管這和 Angular 的模板引擎沒多大區(qū)別洼哎,讓我們用實(shí)踐出真知吧:
假設(shè)你想在用戶登錄后用戶名更新網(wǎng)站的頂欄(header),如果你沒有使用 MVC 框架沼本,你也許會(huì)這樣做:
<header>
<div class="name">
Not Logged In
</div>
</header>
$.post('/login', credentials, function( user ) {
// Modify the DOM here
$('header .name').text( user.name );
});
我用實(shí)際經(jīng)驗(yàn)可以向你保證這樣的代碼會(huì)毀了你的項(xiàng)目谱净,這樣該如何 test 你的輸出內(nèi)容呢? 怎么知道是誰更新了頂欄? 還有哪些代碼擁有修改頂欄的權(quán)限? DOM 操作和使用 GOTO
聲明一樣糟糕。
不過如果是使用 React 的話擅威,你可以這樣:
render: function() {
return <header>
{ this.state.name ?
this.state.name :
<span>Not Logged In</span> }
</header>;
}
我們可以告訴這個(gè)組件該如何渲染壕探,如果你知道 state 你就知道是如何輸出的,你不用沿著代碼一段一段找郊丛。當(dāng)你在進(jìn)行一個(gè)復(fù)雜項(xiàng)目時(shí)李请,特別是團(tuán)隊(duì)合作,這點(diǎn)是尤為重要的厉熟。
2. 使用 JSX 編寫 HTML/JavaScript 能讓組件看讓去更具可讀性
哈哈导盅,你一定還會(huì)覺得把 HTML 和 JavaScript 寫在一起是種奇怪的做法,估計(jì)從你懂事起就被告訴不該這樣做了揍瑟。不過在這里你應(yīng)該相信 React白翻,和 JSX 一起工作的話,這樣能行绢片,而且是非常棒的體驗(yàn)滤馍。
傳統(tǒng)意義上我們應(yīng)該把邏輯層(JavaScript)和表現(xiàn)層(HTML)分開來寫,把所有邏輯放到一個(gè) .js
文件里底循,然后其他的放到 .html
文件里巢株,然后你就開始不停地在 .js
和 .html
文件之間切換了,當(dāng)這樣的文件多了起來真是令人絕望熙涤,切你妹啊阁苞,一個(gè)功能不能在一個(gè)地方完成嗎,我快趕不上下一班地鐵了祠挫!
把實(shí)現(xiàn)同一種功能的代碼(邏輯和表現(xiàn))放在一起那槽,讓外部可以引用(portable),自包含的組件會(huì)讓你的項(xiàng)目結(jié)構(gòu)不再那么混亂等舔,你的 JS 代碼知道該怎么驅(qū)使 HTML 來達(dá)到效果骚灸,所以寫在一起有何不可?
3. 你可以在服務(wù)器端使用 React 渲染
如果你想上線一個(gè)網(wǎng)站然后準(zhǔn)備做個(gè)純前端渲染的網(wǎng)站软瞎,你可以一開始就搞錯(cuò)了逢唤。純前端渲染會(huì)讓你的網(wǎng)站顯得很慢,這就是 SoundCloud 和 StackOverflow 的區(qū)別涤浇,前者為純前端渲染鳖藕,而后者相反。
你可以在服務(wù)器端使用 React 渲染只锭,而且你應(yīng)該這樣做著恩。
糟粕(The Bad)
別玩了, React 只是視圖層處理蜻展。
1. 這些是你不能從 React 獲取的:
- 事件監(jiān)聽 (除了純 JS 事件之外)
- 不提供處理 Ajax 請(qǐng)求的功能
- 任何形式的數(shù)據(jù)層處理
- Promises
- 一個(gè)完整的應(yīng)用框架
- 任何實(shí)現(xiàn)以上功能的方法
只靠 React 是沒多大用處的喉誊,這樣的情況導(dǎo)致越來越多人開始造輪子。
2. 糟糕的文檔
再說一次纵顾,這篇文章叫 “笨辦法學(xué) ReactJS” 伍茄,看看 ReactJS 官方文檔 的側(cè)邊欄頂部:

真是令人難過,除了這個(gè) Quick Start 然后下面的部分讓我不明所以施逾。
3. 對(duì)比你所需要的功能敷矫,React 顯得太大了

擁有壓縮后和 Angular 這個(gè)完整框架類似的體積:
你得不使用 react-with-addons 來開發(fā)一個(gè)真正的應(yīng)用
你得不使用 **ES5 Shim ** 來支持 IE8
這個(gè)體積的 React 居然沒有這些任何一個(gè)庫提供的功能。
別再嗶嗶 Flux... Flux... 了
可能你已經(jīng)充斥在討論 Flux 的 React 開發(fā)環(huán)境里了汉额,這是個(gè)比 React 更讓人困惑的東西曹仗,首先這個(gè)名字就不好理解。
Flux 并不是真正存在的東西蠕搜。 它是一個(gè)概念怎茫,而不是一個(gè)庫。不過確實(shí)也有一個(gè)庫叫這個(gè)名字妓灌,實(shí)現(xiàn)了這個(gè)概念:
"Flux 是一種架構(gòu)而勝于是一種框架"
Flux 簡(jiǎn)單地說就是你的視圖層觸發(fā)了一個(gè)事件轨蛤,這個(gè)事件更新了一個(gè)模型(model),然后這個(gè)模型(model)再次觸發(fā)這個(gè)事件虫埂。最后視圖層相應(yīng)來自模型(model)觸發(fā)的事件來重新渲染最新的數(shù)據(jù)俱萍。
這種單向數(shù)據(jù)流動(dòng)/解耦的觀察者模式保證了你的數(shù)據(jù)一直呆在你的模型(model)里。
令人頭痛之處就是有很多人在造 Flux 的輪子告丢,因?yàn)樵?event library, model layer, AJAX layer 等等之上都還沒有一個(gè)共識(shí)和規(guī)范枪蘑。
那我該用 React 嗎?
長話短說:該。
短話長說:除了 React 也沒什么好用的了岖免。
For reasons, please visit http://blog.andrewray.me/reactjs-for-stupid-people/