為什麽要學習React，學習React在大數據開發上有什麽好處
分享之前我還是要推薦下我自己創建的大數據學習資料分享群716581014，這是全國最大的大數據學習交流的地方，2000人聚集，不管你是小白還是大牛，小編我都挺歡迎，今天的源碼已經上傳到群文件，不定期分享幹貨，包括我自己整理的一份最新的適合2018年學習和零基礎入門教程，歡迎初學和進階中的小夥伴。
如何學習React
如果你是一個 React (或者前端) 新手, 出於以下的原因, 你可能會對這個生態圈感到困惑:
React 的目標群體歷來是喜歡嘗試新事物的開發者和前端專家.
Facebook 只開源了他們在實際使用的, 因此他們沒有關註那些比 Facebook 小的工程需求.
現有的 React 指引水平層次不齊.
在本文中, 我會假設你已有使用 HTML, CSS 和 JavaScript 開發網頁的基礎.
為什麽要聽我的?
關於 React, 現在已經有大量的相互沖突的建議了, 為什麽要聽我的?
因為我是在 Facebook 構建並開源 React 的最初成員之一. 現在我離開了 Facebook 並加入了一家初創公司, 所以我也不會站在 Facebook 的立場上來表態.
如何踏入 React 生態圈
所有的軟件都是建立在某個技術棧之上的, 你需要對整個技術棧有足夠深入的理解, 才能建造你的應用. 為什麽 React 生態圈的工具似乎總讓人感覺壓力山大呢, 因為它總是以錯誤的順序被解釋:
為什麽要學習React，學習React在大數據開發上有什麽好處
你應該按照以下的順序進行學習, 而不是跳著學或者同時學習:
React
npm
JavaScript “打包工具”
ES6
Routing
Flux
你不需要把這些都學完才去使用 React. 只需要在你遇到問題需要解決的時候, 才進入下一步的學習.
另外, 在 React 社區中, 有一些前沿主題是經常被提及到的, 以下的這些主題很有意思, 但也很難弄懂, 所以它們遠沒有上面的主題流行, 大多數應用也不需要用到這些.
內聯樣式
服務器端渲染
Immutable.js
Relay, Falcor 等
學習 React 本身
有一種常見的誤解是: 你需要花費大量時間在配置工具上, 然後才開始學習 React. 在官方文檔裏, 你可以找到 copy-paste HTML template. 只需要保存為 .html 文件, 你就可以馬上開始學習了. 這個步驟不需要任何工具, 你也無需額外學習工具使用, 直到你能熟練掌握 React 基礎.
我依然覺得, 學習 React 最簡單的方法是通過官方教程 the official tutorial.
學習 npm
npm 是 Node.js 包管理工具, 也是前端工程師和設計師分享 JavaScript 代碼最流行的方式. 它包含了名為 CommonJS 的模塊系統, 讓你可以安裝 JavaScript 寫的命令行工具. 作為背景知識, 可以閱讀 這篇文章 了解 CommonJS 對於瀏覽器的重要性, 閱讀 CommonJS Spec Wiki 了解關於 CommonJS API 的更多內容
在 React 生態圈中, 大部分可重用的組件、庫和工具遵循 CommonJS 模塊規範, 可通過 npm 來安裝.
學習 JavaScript 打包工具
出於若幹技術原因, CommonJS 模塊 (也就是 npm 裏的所有內容) 不能直接用到瀏覽器. 你需要一個 JavaScript “打包工具(bundler)” 來把這些模塊打包成 .js 文件, 使你可以在網頁中通過 <script> 標簽引入它們.
JavaScript 打包工具包括有 webpack 和 browserify. 它們都是好的選擇, 但我個人更喜歡 webpack , 因為它有許多功能簡化大型應用開發. 鑒於 webpack 文檔可能令人感到困惑, 我也寫了兩篇文章: plug-and-play template for getting started 和針對更復雜用例的 how-to guide for webpack.
要記住的一點: CommonJS 使用了 require() 函數來引入模塊, 因此許多人對此感到疑惑, 並認為需要導入 require.js 到工程裏. 出於若幹技術原因, 我建議你避免使用 require.js. 它在 React 生態圈並不流行.
學習 ES6
為什麽要學習React，學習React在大數據開發上有什麽好處
如果你只想要使用 React 來把事情做完, 你可以跳過 ES6 的學習, 或者留到以後再學習.
你可能會看到一些討論說更適合用 ES6 的 class 來創建 React 組件. 這並不是真的, 大多數人 (包括 Facebook) 用的還是 React.createClass().
學習路由 (routing)
“單頁面應用” 是時下的技術熱點. 當網頁加載完成, 用戶點擊鏈接或者按鈕的時候, JavaScript 會更新頁面和改變地址欄, 但網頁不會刷新. 地址欄的管理就是通過 路由(router) 來完成的.
目前 React 生態圈最受歡迎的路由解決方案是 react-router. 如果你正在創建一個單頁面應用, 有什麽理由不去使用它呢?
如果你創建的並非單頁面應用, 請不要使用路由. 無論如何, 大部分項目都是從大型應用中的小組件開始的.
學習內聯樣式
在 React 出現之前, 很多人通過像 SASS 這樣的預處理器來重用復雜的 CSS 樣式表. 鑒於 React 使開發可重用組件變得容易, 你的樣式表可以變得沒那麽復雜了. 社區中許多人 (包括我) 正嘗試完全拋棄樣式表.
由於一些原因, 其實這是個相當瘋狂的主意. 這讓媒體查詢 (media quries) 更加困難了, 而且這種技術可能有性能上的局限性. 當你開始用 React 的時候, 只要用你平常使用的方法去寫就好了.
一旦你找到了用 React 開發的感覺, 你就可以關註那些可作為替代的技術了. 其中一種流行技術是 BEM. 我建議你逐漸停用 CSS 預處理器, 因為 React 給了你一種更強大的方式去重用樣式 (通過重用組件), 並且 JavaScript 打包工具可以為你生成更高效的樣式表 (我曾經在 OSCON 上發表過關於這個的演講). 說了這麽多, 總之 React 就像其他 JavaScript 庫一樣, 可以和 CSS 預處理器很好地配合工作.
學習服務器端渲染
服務器端渲染經常被稱為 "universal" 或 "isomorphic" JS. 這意味著你可以用 React 組件在服務器端渲染出靜態 HTML. 這樣做可以提高初始化加載的性能, 因為用戶不用等到 JS 下載完才看得見初始界面, 並且 React 可以重用服務器端渲染出的 HTML, 無需客戶端重新生成.
如果你發現首屏渲染速度過慢, 或者想提高網站在搜索引擎的排行, 你就需要服務器端渲染了. 盡管 Google 現在也會索引客戶端渲染的內容, 但截至 2016 年 1 月, 這樣做被證實會對排行有負面影響, 這可能是由於客戶端渲染的性能問題所造成的.
服務器端渲染還需要許多工具的輔助, 因為顯然 React 組件不是在考慮服務器端渲染的情況下寫出來的, 你應該先構建你的應用, 之後再關心服務器端渲染的問題. 你不用擔心重寫所有組件才能支持它.
學習 Flux
你可能聽過 Flux, 不過關於 Flux 有大量的錯誤資訊.
許多人一坐下來剛開始構建應用, 就認為需要用 Flux 來定義他們的數據模型. 這樣采用 Flux 是不對的, Flux 應該在大量組件被建立完成以後才被引入.
React 組件之間存在層級關系. 在很多時候, 你的數據模型也跟隨這種層級. 這種情況下, Flux 不會給你很大幫助. 但有些時候, 你的數據模型沒有層次, 當你的 React 組件開始接受沒有關聯的 props 的時候, 或者當小部分組件開始變得復雜的時候, 你才可能需要看看 Flux.
你會知道什麽時候需要用 Flux. 如果你不確定是否需要用它, 你就不需要它.
如果你決定使用 Flux, 現在最流行的、文檔最全的 Flux 庫是 Redux. 當然也有許多其他選擇, 你或者會有興趣嘗試使用它們, 但我的建議是只需要用最流行的那一個就足夠了.
學習 Immutable.js
Immutable.js 提供了一系列的數據結構, 以幫助解決構造 React 應用時的某些性能問題. 這是一個很棒的庫, 你可能會在應用發展的過程裏大量用到它, 但直到你在意識到性能問題以前, 它是完全不必要的.
學習 Relay, Falcor 等
這些技術可以幫你減少 AJAX 請求數, 它們仍然是非常前沿的, 所以如果你沒有遇到過多 AJAX 請求的問題, 就不需要用到 Relay 或者 Falcor.
為什麽要學習React，學習React在大數據開發上有什麽好處