SegmentFault 技術週刊 Vol.8 - React，「5 分鐘快速入門」

時間 2019-11-05

標籤 segmentfault 技術週刊 vol.8 vol react 分鐘快速入門欄目 React 简体版

原文原文鏈接

前段時間開始學習 React，瀏覽官方文檔時，被其中說起的一篇文章——《Give It Five Minutes》給吸引了。最開始覺得是「5 分鐘學會 React」這種神通常存在的教程，結果否則，它只是 37 Signal 日誌 SVN（Signal v.s. Noise）中的一篇文章……可這篇文章卻給了我學習 React 不可或缺的一個理由。至於緣由，give me five minutes，聽我細細道來。css

《Give It Five Minutes》描述了做者 Jason Fried 在一次商業創新工廠演講活動中，遇到了「Richard Saul Wurman」，所以發生了重大人生變化的故事。html

事情是這樣的，幾年前，Jason 仍是個急性子，只要是不符合做者世界觀的事情，做者就會極力反駁。此外，做者也熱衷於第一個發表觀點和想法，彷佛第一個提出來就意味着一些事兒。而這一切，都在 2007 年的一天發生了變化。前端

在一次商業創新工廠的會議演講上，做者遇到了同去演講的 Richard Saul Wurman。Richard 在做者的演講結束後上臺發表觀點，在介紹完本身，並稱讚了 Jason 的演講以後，Richard 開始了本身的演講。演講途中，做者打斷了 Richard 的發言，並對他提到的庫存的一些想法提出了反對。正由於做者性急，又恰巧碰到了本身不一樣意的觀點，因此演講中，只要一遇到不一樣意 Richard 的觀點，就馬上起身反駁。react

而此刻的 Richard 卻很是淡定，並用很是簡單的一句話迴應做者「Man, give it five minutes.」而正是這句話，改變了做者一輩子。webpack

Richard 說有不一樣觀點是好事兒，對不一樣觀點進行迴應也是好事兒，有堅決的想法和本身的信念更是一件好事。可是，在你肯定要反駁個人觀點的時候，請給我一些時間去闡明個人觀點，聽完個人闡述。5 分鐘意味着思考，而不是立刻迴應（「Five minutes」 represented 「think」, not react）。git

而這一刻，也引起了做者後續的深入思考，並時刻提醒本身將先去思考而非快速回應做爲長久的追求。github

深夜讀來，文章有點像雞湯，但是，學 React 以前，必定要乾了這碗雞湯。React 挑戰了不少傳統的知識，不少想法，可能第一眼看上去有點難以想象，但 give it five minutes，要知道，這些看似瘋狂的想法已經幫助 Facebook 和 Instagram 從裏到外建立了上千的組件。web

接下來幾期週刊，都將以 React 爲主題，層層引入，經過一個月的時間，完成對 React 的學習、升級、打怪直到本身成爲 boss 的全部過程。本期，咱們以社區諸位小夥伴一路走來的經驗分享爲重點，讓你儘可能快速學習 React。面試

5 分鐘實例

首先，來看兩個簡單的小應用，讓你預覽 React 能夠幹嗎。ajax

noiron - 用 React.js 寫一個最簡單的 To-do List 應用

經過一個簡單的 To-do List 應用，讓你對 React 的最基礎用途——組件（component）造成基本的認識，包括組件結構、組件兩種屬性的傳遞（state 和 props）以及函數的傳遞，淺入淺出，對於理解 React 中的一些概念及語法頗有幫助的。

defshine - 使用 React 和 Flask 開發一個留言板

經過這個應用，你會對「React 能夠幹嗎」有更多的瞭解：

組件化開發，React 提倡無狀態的組件，便於重用
專一於 View，React 不是 MVC 框架，它只是一個專一於 View 的庫，因此，它也能夠和不少其餘框架或者庫一塊兒使用
提供完成的生命週期

注：上面這兩個小應用的項目分別能夠在 noiron / simplest-react-todolist 和 defshine / message-board 查看。

快速入門

經過上面的例子，能夠看出，React 其實比較好上手，即便沒來得及瞭解細節性的知識，有時也不妨礙項目的開展。不過，正統地學習，能讓你更全面地理解 React，更清晰地瞭解它的使用邏輯。除了官方文檔和阮一峯老師的《React 入門實例教程》，如下精選的幾篇文章還將豐富你的學習資料庫。

布利丹牽驢子 - React 入門及資源指引

Facebook 在開源項目和軟件架構方面的實力讓人不得不讚嘆，React 中提出的一些設計思想很是新穎，極大的簡化了前端開發的代碼邏輯。本文介紹 React 相關的基礎知識，JSX、組件、區分 props 和 state、生命週期、事件系統……經過對這些關鍵內容的學習，快速開始 React 的學習之路。

whatif - Sublime Text 3 搭建 React.js 開發環境

利用 Sublime 很強的自定義功能和龐大的插件庫，來，手把手式的強大開發環境搭建方案，不謝。

賴小賴小賴 - React 初探

來自 AlloyTeam 的分享，一篇文章學完全部基本特性，保入門。

zhangwang - 是時候理清 React 開發中的一些疑惑了

這篇則讓你明白爲何要使用 React，以及更重要的，它所帶來的改變。你從這些改變再回去看 React 爲何要設計成這樣，可能會理解得更通透。

「這是一個老生常談的問題了，好比說它的虛擬 DOM 能夠被高效的渲染，好比說它有完整生命週期的「活組件」，它的組件化使得項目結構很是清晰，代碼複用很是容易，好比說它的數據管理機制也能讓你清晰的知曉數據的狀態，而 React 自己就是被這種清晰的數據所驅動的。」

更多入門閱讀

源碼閱讀

入門完畢，如果沒法深刻其內部實現機制和原理，亦會以爲不夠透徹，所謂知其然更要知其因此然，接下來就從剖析 React 源碼開始吧。

React 源碼剖析系列 - 生命週期的管理藝術、解密 setState、難以想象的 React diff、玩轉 React Transition

本系列文章但願經過剖析 React 源碼，幫助你理解其內部的實現原理。固然，閱讀這一系列的文章，你須要對 React 有必定的瞭解，若是你還存在疑惑，請回上部分再次鞏固。

JasonHuang - React Motion 緩動函數剖析

「不知道這個世界上有沒有‘仿世學’，但既然動畫要模仿現實世界，那麼實現動畫的根本方法就是借鑑上帝的辦法——模擬天然規律」。本文以 React Motion 實現原理爲背景，介紹一種通用的模擬物理規律的方法，以及如何使用這種方法實現 React Motion 的緩動函數。來跟着做者當一回上帝吧。

louis110 - GraphQL and Relay 淺析

GraphQL 是在 Facebook 內部應用多年的一套數據查詢語言和 runtime。包括類型系統、驗證、introspection，此外，還具備語法靈活、沒有冗餘、強類型等特徵。而 Relay 則是鏈接 GraphQL 和 React 的一座橋樑，除了讓 React 認識 GraphQL 服務器以外，還包括把關於數據獲取的事情（請求異常，loading 等）都接管過來……

郭林爍_joey - 前端路由實現與 react-router 源碼分析

「從點擊 Link 到 render 對應 component，路由中發生了什麼？」在單頁應用上，前端路由並不陌生。不少前端框架也會有獨立開發或推薦配套使用的路由系統。那麼，當咱們在談前端路由的時候，還能夠談些什麼？本文經過簡要分析並實現一個的前端路由，來對 react-router 進行分析。

基本特性

JSX、Mixin、Context、Virtual DOM、react-css-modules、包react-hot-loader、react-router、Redux、Flux、relay……太多特性了，這期咱們挑選其中一些基本的，分別作入門介紹。

MockingBird - 譯丨React Mixin 的使用

在 React component 構建過程當中，經常有這樣的場景，有一類功能要被不一樣的 Component 公用，而後看獲得文檔常常提到 Mixin（混入）這個術語。此文就從 Mixin 的來源、含義、在 React 中的使用提及。

BetaRabbit - React 如何和 Server 交互

這篇講解 React ajax 的 4 種交互方式：Root Component、Container Component、Redux/Flux Async Actions 以及 Relay，清晰明瞭。

小俞 - React Reflux

Reflux 是根據 React 的 Flux 建立的單向數據流類庫，其單向數據流模式主要由 actions 和 stores 組成。本文會很是細緻地說明如何建立 action 和 store，以及和組件的結合。

cnsnake11 - React Native 的組件架構設計

篇幅較長但不冗餘的一篇文章，前半部分是目前 Flux 開源框架的一些分析，後半部分是架構設計過程。此外，還有多種方案以及完整 demo 代碼提供諸位學習。

Hongchun - 深刻理解 react-router 路由系統

在 web 應用開發中，路由系統是不可或缺的一部分。當前，Backbone、Ember 等主流框架都有其本身的路由器，那 react-router 相對於其餘路由系統會針對 React 作了哪些優化呢？它是如何利用了 React 的 UI 狀態機特性呢？又是如何將 JSX 這種聲明式的特性用在路由中？本文將很好地爲你揭開這些疑惑。

Coding扣釘 - 玩轉 React 服務器端渲染

React 之因此讓服務器端渲染變成了一件有吸引力的事情，是由於它移除了服務器端對於瀏覽器環境的依賴，服務器端渲染除了要解決對瀏覽器環境的依賴，還要解決先後端能夠共享代碼和先後端路由能夠統一處理這兩個問題。本文選擇了 Redux 和 react-router 來作說明。

更多閱讀

簡單的應用

React 第一階段的學習完成，一塊兒來看幾個用 React 開發的項目。上面介紹的兩個只是簡單實例，而下面這三個，你能夠認真研究一下，覺得下期的內容作好準備。

UXCore：一個兼容主流瀏覽器的 React PC 組件庫

UXCore 是一個基於 React 的 PC UI 套件庫，兼容 IE8+。

阿里巴巴信息平臺是負責整個阿里巴巴集團智能辦公系統的團隊，涉及很是多的企業業務系統，包括薪酬、人力、財務、行政、IT 等等，在這些系統中產生了大量的表格、表單和圖表的交互場景，這裏面有不少重複配置的地方，也有不少定製變化的地方，目前業界的這一方面尚未可以徹底知足這一方面的解決方案，所以有了 UXCore。

項目地址：https://github.com/uxcore/uxcore

一言不合造輪子 - 擼一個 ReactTimePicker

這是一個獨立 React 組件，已打包成 NPM 包，涉及到 React 開發、單頁測試、Webpack 等內容。

項目地址：ecmadao / react-times | 演示地址：https://ecmadao.github.io/react-times

組件化可視化圖表 - Recharts

Recharts 是一款可視化組件庫，爲基礎表格的繪製提供了另一種可能。Recharts 含義是從新定義（Redefined）圖表，這個名字的背後在於這個圖表在設計上帶給開發者的是不同的體驗，不只是用 React 設計，也在於從新定義了組合與配置方式，代碼更優雅，靈活可裝卸。

目前版本是 0.15.1，支持 React 0.14.x 或 15.0.x 版本，如今有至少四個國外團隊在產品中使用。

項目地址：recharts / recharts | 官網：http://recharts.org

專欄推薦

本期週刊特別增長專欄推薦，要深刻學習 React，他們的專欄是「繞不過的三座大山」：

題葉, JiyinYiyong - 題葉是社區內最先開始傳播 React 的開發者，很是多的後來學習者都受到了他的影響，他在 React 和其餘前端方方面面的思考，都值得去探討
pure render - 由一羣志同道合的開發者共同維護，分享關於 React 和 Flux 在實踐中的經驗與想法，篇篇精品
hepeguo 的專欄 - 對於 React 和 Redux 性能優化的深刻研究

（本期完，接下來兩期，咱們將更深刻 React，對 Redux/Flux、組件、Virtual DOM、React Native 以及與 webpack 等相關的全部體系，全面地整理給你們。）

往期週刊傳送門：