轉(zhuǎn)載

如果你是一個(gè) React (或者前端) 新手, 出于以下的原因, 你可能會(huì)對(duì)這個(gè)生態(tài)圈感到困惑:
React 的目標(biāo)群體歷來是喜歡嘗試新事物的開發(fā)者和前端專家.
Facebook 只開源了他們?cè)趯?shí)際使用的, 因此他們沒有關(guān)注那些比 Facebook 小的工程需求.
現(xiàn)有的 React 指引水平層次不齊.

在本文中, 我會(huì)假設(shè)你已有使用 HTML, CSS 和 JavaScript 開發(fā)網(wǎng)頁(yè)的基礎(chǔ).
為什么要聽我的?關(guān)于 React, 現(xiàn)在已經(jīng)有大量的相互沖突的建議了, 為什么要聽我的?
因?yàn)槲沂窃?Facebook 構(gòu)建并開源 React 的最初成員之一. 現(xiàn)在我離開了 Facebook 并加入了一家初創(chuàng)公司, 所以我也不會(huì)站在 Facebook 的立場(chǎng)上來表態(tài).
如何踏入 React 生態(tài)圈所有的軟件都是建立在某個(gè)技術(shù)棧之上的, 你需要對(duì)整個(gè)技術(shù)棧有足夠深入的理解, 才能建造你的應(yīng)用. 為什么 React 生態(tài)圈的工具似乎總讓人感覺壓力山大呢, 因?yàn)樗偸且藻e(cuò)誤的順序被解釋:
你應(yīng)該按照以下的順序進(jìn)行學(xué)習(xí), 而不是跳著學(xué)或者同時(shí)學(xué)習(xí):
React
npm

JavaScript “打包工具”
ES6
Routing
Flux

你不需要把這些都學(xué)完才去使用 React. 只需要在你遇到問題需要解決的時(shí)候, 才進(jìn)入下一步的學(xué)習(xí).
另外, 在 React 社區(qū)中, 有一些前沿主題是經(jīng)常被提及到的, 以下的這些主題很有意思, 但也很難弄懂, 所以它們遠(yuǎn)沒有上面的主題流行, 大多數(shù)應(yīng)用也不需要用到這些.
內(nèi)聯(lián)樣式
服務(wù)器端渲染
Immutable.js
Relay, Falcor 等

學(xué)習(xí) React 本身有一種常見的誤解是: 你需要花費(fèi)大量時(shí)間在配置工具上, 然后才開始學(xué)習(xí) React. 在官方文檔里, 你可以找到 copy-paste HTML template. 只需要保存為.html
文件, 你就可以馬上開始學(xué)習(xí)了. 這個(gè)步驟不需要任何工具, 你也無需額外學(xué)習(xí)工具使用, 直到你能熟練掌握 React 基礎(chǔ).
我依然覺得, 學(xué)習(xí) React 最簡(jiǎn)單的方法是通過官方教程 the official tutorial.
**學(xué)習(xí)npm
**npm
是 Node.js 包管理工具, 也是前端工程師和設(shè)計(jì)師分享 JavaScript 代碼最流行的方式. 它包含了名為CommonJS
的模塊系統(tǒng), 讓你可以安裝 JavaScript 寫的命令行工具. 作為背景知識(shí), 可以閱讀 這篇文章 了解CommonJS
對(duì)于瀏覽器的重要性, 閱讀 CommonJS Spec Wiki 了解關(guān)于CommonJS
API 的更多內(nèi)容
在 React 生態(tài)圈中, 大部分可重用的組件弥激、庫(kù)和工具遵循CommonJS
模塊規(guī)范, 可通過npm
來安裝.
學(xué)習(xí) JavaScript 打包工具出于若干技術(shù)原因,CommonJS
模塊 (也就是npm
里的所有內(nèi)容) 不能直接用到瀏覽器. 你需要一個(gè) JavaScript “打包工具(bundler)” 來把這些模塊打包成.js
文件, 使你可以在網(wǎng)頁(yè)中通過<script>
標(biāo)簽引入它們.
JavaScript 打包工具包括有webpack
和browserify
. 它們都是好的選擇, 但我個(gè)人更喜歡webpack
, 因?yàn)樗性S多功能簡(jiǎn)化大型應(yīng)用開發(fā). 鑒于 webpack 文檔可能令人感到困惑, 我也寫了兩篇文章: plug-and-play template for getting started 和針對(duì)更復(fù)雜用例的 how-to guide for webpack.
要記住的一點(diǎn):CommonJS
使用了require()
函數(shù)來引入模塊, 因此許多人對(duì)此感到疑惑, 并認(rèn)為需要導(dǎo)入require.js
到工程里. 出于若干技術(shù)原因, 我建議你避免使用require.js
. 它在 React 生態(tài)圈并不流行.
學(xué)習(xí) ES6在 JSX (你會(huì)在 React tutorial 中學(xué)習(xí)到) 以外, 你可能會(huì)注意到 React 例子中一些有趣的語(yǔ)法. 這被稱為 ECMAScript6, 是 JavaScript 的最新版本. 由于 ES6 很新, 你可能還沒學(xué)習(xí)到, 瀏覽器也可能尚未兼容, 但別擔(dān)心, 通過合適的配置, 你的打包工具會(huì)為你自動(dòng)轉(zhuǎn)換成兼容代碼.
如果你只想要使用 React 來把事情做完, 你可以跳過 ES6 的學(xué)習(xí), 或者留到以后再學(xué)習(xí).
你可能會(huì)看到一些討論說更適合用 ES6 的 class 來創(chuàng)建 React 組件. 這并不是真的, 大多數(shù)人 (包括 Facebook) 用的還是React.createClass()
.
學(xué)習(xí)路由 (routing)“單頁(yè)面應(yīng)用” 是時(shí)下的技術(shù)熱點(diǎn). 當(dāng)網(wǎng)頁(yè)加載完成, 用戶點(diǎn)擊鏈接或者按鈕的時(shí)候, JavaScript 會(huì)更新頁(yè)面和改變地址欄, 但網(wǎng)頁(yè)不會(huì)刷新. 地址欄的管理就是通過 路由(router) 來完成的.
目前 React 生態(tài)圈最受歡迎的路由解決方案是 react-router. 如果你正在創(chuàng)建一個(gè)單頁(yè)面應(yīng)用, 有什么理由不去使用它呢?
如果你創(chuàng)建的并非單頁(yè)面應(yīng)用, 請(qǐng)不要使用路由. 無論如何, 大部分項(xiàng)目都是從大型應(yīng)用中的小組件開始的.
學(xué)習(xí)內(nèi)聯(lián)樣式在 React 出現(xiàn)之前, 很多人通過像 SASS 這樣的預(yù)處理器來重用復(fù)雜的 CSS 樣式表. 鑒于 React 使開發(fā)可重用組件變得容易, 你的樣式表可以變得沒那么復(fù)雜了. 社區(qū)中許多人 (包括我) 正嘗試完全拋棄樣式表.
由于一些原因, 其實(shí)這是個(gè)相當(dāng)瘋狂的主意. 這讓媒體查詢 (media quries) 更加困難了, 而且這種技術(shù)可能有性能上的局限性. 當(dāng)你開始用 React 的時(shí)候, 只要用你平常使用的方法去寫就好了.
一旦你找到了用 React 開發(fā)的感覺, 你就可以關(guān)注那些可作為替代的技術(shù)了. 其中一種流行技術(shù)是 BEM. 我建議你逐漸停用 CSS 預(yù)處理器, 因?yàn)?React 給了你一種更強(qiáng)大的方式去重用樣式 (通過重用組件), 并且 JavaScript 打包工具可以為你生成更高效的樣式表 (我曾經(jīng)在 OSCON 上發(fā)表過關(guān)于這個(gè)的演講). 說了這么多, 總之 React 就像其他 JavaScript 庫(kù)一樣, 可以和 CSS 預(yù)處理器很好地配合工作.
學(xué)習(xí)服務(wù)器端渲染服務(wù)器端渲染經(jīng)常被稱為 "universal" 或 "isomorphic" JS. 這意味著你可以用 React 組件在服務(wù)器端渲染出靜態(tài) HTML. 這樣做可以提高初始化加載的性能, 因?yàn)橛脩舨挥玫鹊?JS 下載完才看得見初始界面, 并且 React 可以重用服務(wù)器端渲染出的 HTML, 無需客戶端重新生成.
如果你發(fā)現(xiàn)首屏渲染速度過慢, 或者想提高網(wǎng)站在搜索引擎的排行, 你就需要服務(wù)器端渲染了. 盡管 Google 現(xiàn)在也會(huì)索引客戶端渲染的內(nèi)容, 但截至 2016 年 1 月, 這樣做被證實(shí)會(huì)對(duì)排行有負(fù)面影響, 這可能是由于客戶端渲染的性能問題所造成的.
服務(wù)器端渲染還需要許多工具的輔助, 因?yàn)轱@然 React 組件不是在考慮服務(wù)器端渲染的情況下寫出來的, 你應(yīng)該先構(gòu)建你的應(yīng)用, 之后再關(guān)心服務(wù)器端渲染的問題. 你不用擔(dān)心重寫所有組件才能支持它.
學(xué)習(xí) Flux你可能聽過 Flux, 不過關(guān)于 Flux 有大量的錯(cuò)誤資訊.
許多人一坐下來剛開始構(gòu)建應(yīng)用, 就認(rèn)為需要用 Flux 來定義他們的數(shù)據(jù)模型. 這樣采用 Flux 是不對(duì)的, Flux 應(yīng)該在大量組件被建立完成以后才被引入.
React 組件之間存在層級(jí)關(guān)系. 在很多時(shí)候, 你的數(shù)據(jù)模型也跟隨這種層級(jí). 這種情況下, Flux 不會(huì)給你很大幫助. 但有些時(shí)候, 你的數(shù)據(jù)模型沒有層次, 當(dāng)你的 React 組件開始接受沒有關(guān)聯(lián)的props
的時(shí)候, 或者當(dāng)小部分組件開始變得復(fù)雜的時(shí)候, 你才可能需要看看 Flux.
你會(huì)知道什么時(shí)候需要用 Flux. 如果你不確定是否需要用它, 你就不需要它.
如果你決定使用 Flux, 現(xiàn)在最流行的、文檔最全的 Flux 庫(kù)是 Redux. 當(dāng)然也有許多其他選擇, 你或者會(huì)有興趣嘗試使用它們, 但我的建議是只需要用最流行的那一個(gè)就足夠了.
學(xué)習(xí) Immutable.jsImmutable.js 提供了一系列的數(shù)據(jù)結(jié)構(gòu), 以幫助解決構(gòu)造 React 應(yīng)用時(shí)的某些性能問題. 這是一個(gè)很棒的庫(kù), 你可能會(huì)在應(yīng)用發(fā)展的過程里大量用到它, 但直到你在意識(shí)到性能問題以前, 它是完全不必要的.
學(xué)習(xí) Relay, Falcor 等這些技術(shù)可以幫你減少 AJAX 請(qǐng)求數(shù), 它們?nèi)匀皇欠浅Ｇ把氐? 所以如果你沒有遇到過多 AJAX 請(qǐng)求的問題, 就不需要用到 Relay 或者 Falcor.