我剛開始學(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/
