笨辦法學(xué) ReactJS

我剛開始學(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)站顯得很慢,這就是 SoundCloudStackOverflow 的區(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è)邊欄頂部:

sidebar
sidebar

真是令人難過,除了這個(gè) Quick Start 然后下面的部分讓我不明所以施逾。

3. 對(duì)比你所需要的功能敷矫,React 顯得太大了

compare
compare

擁有壓縮后和 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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末岳颇,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子颅湘,更是在濱河造成了極大的恐慌话侧,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件闯参,死亡現(xiàn)場(chǎng)離奇詭異瞻鹏,居然都是意外死亡悲立,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門新博,熙熙樓的掌柜王于貴愁眉苦臉地迎上來薪夕,“玉大人,你說我怎么就攤上這事赫悄≡祝” “怎么了?”我有些...
    開封第一講書人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵埂淮,是天一觀的道長姑隅。 經(jīng)常有香客問我,道長倔撞,這世上最難降的妖魔是什么讲仰? 我笑而不...
    開封第一講書人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮痪蝇,結(jié)果婚禮上叮盘,老公的妹妹穿的比我還像新娘。我一直安慰自己霹俺,他們只是感情好柔吼,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著丙唧,像睡著了一般愈魏。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上想际,一...
    開封第一講書人閱讀 52,807評(píng)論 1 314
  • 那天培漏,我揣著相機(jī)與錄音,去河邊找鬼胡本。 笑死牌柄,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的侧甫。 我是一名探鬼主播珊佣,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼披粟!你這毒婦竟也來了咒锻?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤守屉,失蹤者是張志新(化名)和其女友劉穎惑艇,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡滨巴,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年思灌,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片恭取。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡泰偿,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出秽荤,到底是詐尸還是另有隱情,我是刑警寧澤柠横,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布窃款,位于F島的核電站,受9級(jí)特大地震影響牍氛,放射性物質(zhì)發(fā)生泄漏晨继。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一搬俊、第九天 我趴在偏房一處隱蔽的房頂上張望紊扬。 院中可真熱鬧,春花似錦唉擂、人聲如沸餐屎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽腹缩。三九已至,卻和暖如春空扎,著一層夾襖步出監(jiān)牢的瞬間藏鹊,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來泰國打工转锈, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留盘寡,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓撮慨,卻偏偏與公主長得像竿痰,于是被迫代替她去往敵國和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子砌溺,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • Vue也已經(jīng)升級(jí)到2.0版本了菇曲,到現(xiàn)在為止(2016/11/19)比較流行的MVVM框架有AngularJS(也有...
    彬_仔閱讀 27,228評(píng)論 12 114
  • 原教程內(nèi)容詳見精益 React 學(xué)習(xí)指南,這只是我在學(xué)習(xí)過程中的一些閱讀筆記抚吠,個(gè)人覺得該教程講解深入淺出常潮,比目前大...
    leonaxiong閱讀 2,843評(píng)論 1 18
  • 前端這幾年的技術(shù)發(fā)展很快,細(xì)分下來楷力,主要可以分成四個(gè)方面: 開發(fā)語言技術(shù)喊式,主要是ES6&7孵户,coffeescrip...
    Su丶_33b0閱讀 15,126評(píng)論 3 46
  • 1. 我的老婆叫小荷,我們結(jié)婚一年了岔留,我們爭(zhēng)吵過無數(shù)次夏哭。最近,她告訴我献联,她曾經(jīng)被gay騙過婚竖配,但是她真的很深很深地...
    咬咬薄荷閱讀 524評(píng)論 0 0