摘要：單向數(shù)據(jù)流應(yīng)用的核心設(shè)計模式，數(shù)據(jù)流向自頂向下我也是性子急的人，按照技術(shù)界的慣例，在學(xué)習(xí)一個技術(shù)前，首先得說一句。然而的單向數(shù)據(jù)流的設(shè)計讓前端定位變得簡單，頁面的和數(shù)據(jù)的對應(yīng)是唯一的我們可以通過定位數(shù)據(jù)變化就可以定位頁面展現(xiàn)問題。

書籍完整目錄

React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES 
來自：React 官方網(wǎng)站

狹義來講 React 是 Facebook 內(nèi)部開源出來的一個前端 UI 開發(fā)框架，廣義來講 React 不僅僅是 js 框架本身，更是一套完整的前端開發(fā)生態(tài)體系，這套體系包括：

React.js

ReactRenders: ReactDOM / ReactServer / ReactCanvas

Flux 模式及其實現(xiàn)（Redux , Fluxxor）

React 開源組件

React Native

GraphQl + Relay

任何技術(shù)都是一樣，技術(shù)本身的核心不會太復(fù)雜，但是圍繞這個主體會有很多依附的知識點形成了體系化的技術(shù)棧。 所以我們談學(xué)習(xí) React 并不僅僅是學(xué)習(xí) React 本身，而是學(xué)習(xí)這套開發(fā)體系，整個技術(shù)棧， 本書也是圍繞這個技術(shù)棧系統(tǒng)的講解。

本書中除了 React Native 以外都會進行系統(tǒng)的講解，React Native 是相對于 WEB 來說另外一個較大的技術(shù)體系，本書會把重點放于 React Web 開發(fā)。

我們先來認(rèn)識一下 React 中的基本概念

React.js
React.js 是 React 的核心庫，在應(yīng)用中必須先加載核心庫。

ReactDOM.js
ReactDOM.js 是 React 的 DOM 渲染器，React 將核心庫和渲染器分離開了，為了在 web 頁面中顯示開發(fā)的組件，需要調(diào)用 ReactDOM.render 方法， 第一個參數(shù)是 React 組件，第二個參數(shù)為 HTMLElement。

JSX
JSX 是 React 自定義的語法，最終 JSX 會轉(zhuǎn)化為 JS 運行于頁面當(dāng)中。

組件
組件是 React 中的核心概念，頁面當(dāng)中的所有元素都是通過 React 組件來表達， 我們將要寫的 React 代碼絕大部分都是在做 React 組件的開發(fā)。

VIRTUAL DOM
React 抽象出來的虛擬 DOM 樹，虛擬樹是 React 高性能的關(guān)鍵。

單向數(shù)據(jù)流：one-way reactive data flow
React 應(yīng)用的核心設(shè)計模式，數(shù)據(jù)流向自頂向下

我也是性子急的人，按照技術(shù)界的慣例，在學(xué)習(xí)一個技術(shù)前，首先得說一句: “Hello World!”。

讀者可以復(fù)制代碼到一個新的 HTML 文件中，并通過瀏覽器打開，上面的 html 中目前我們只用關(guān)心 script 標(biāo)簽內(nèi)的代碼，script 標(biāo)簽內(nèi)的語法為 JSX 語法，ReactDOM 是 React 的 DOM 渲染器。

了解了基本概念以及看過 Hello World 后，讀者可能會開始產(chǎn)生疑問了：

jsx 語法怎么和 HTML 寫法一樣？

答：是的，看上去一樣， 但jsx 和 HTML 本質(zhì)的不同是 jsx 直接在函數(shù)中寫 xml 標(biāo)簽。在 1.2 節(jié)中，會詳細(xì)介紹 jsx 以及和 HTML 做更多的對比。

看上去 React 除了 jsx 以外，并沒有什么特殊的地方，不就是將模板字符串渲染到 DOM 中嗎？你能告訴我 React 和其他框架有什么不同之處嗎？

答：答案見 1.1.4 節(jié)

Hello World 也并不能看出 React 的能力，你能先告訴我 React 能做些什么嗎？

答：答案見 1.1.5 節(jié)

相比其他前端框架，為什么 React 獨樹一幟，能夠脫穎而出呢？

組件的組合模式

單向數(shù)據(jù)流的設(shè)計

高效的性能

分離的設(shè)計

組合模式：組合模式有時候又叫做部分-整體模式，它使我們樹型結(jié)構(gòu)的問題中，模糊了簡單元素和復(fù)雜元素的概念，客戶程序可以向處理簡單元素一樣來處理復(fù)雜元素,從而使得客戶程序與復(fù)雜元素的內(nèi)部結(jié)構(gòu)解耦。

React 就是基于組合模式， 無論是應(yīng)用等級還是一個表單亦或是一個按鈕都視為一個組件， 然后基于組件的組合構(gòu)建整個應(yīng)用，這樣的結(jié)構(gòu)一直是前端界想要卻遲遲不來的 web component。

React 中組件的組合：

基于組合模式的優(yōu)點：

構(gòu)建可重用的組件：組件的開發(fā)能夠形成公司的組件庫，每個業(yè)務(wù)的開發(fā)都能積累可重用的組件。

無學(xué)習(xí)障礙：天然符合 HTML 的結(jié)構(gòu)， 對前端開發(fā)者來說幾乎沒有學(xué)習(xí)障礙。

具有彈性的架構(gòu)：組合模式很簡單卻很有效，能夠構(gòu)建簡單的頁面也能構(gòu)建大型的前端應(yīng)用。

源碼高可維護性：開發(fā)只是工作中的一部分，應(yīng)用的上線才是噩夢的開始，很多大型應(yīng)用因為復(fù)制的業(yè)務(wù)邏輯導(dǎo)致無法快速響應(yīng)業(yè)務(wù)需求，可維護性低。

我們都知道 Javascript 是腳本語言，不能像靜態(tài)語言一樣通過編譯定位為題，想要清晰的定位到應(yīng)用中的 bug 需要深入了解業(yè)務(wù)代碼，對于大型前端應(yīng)用來說，因為業(yè)務(wù)代碼量很大且復(fù)雜，很難定位到 bug。 然而 React 的單向數(shù)據(jù)流的設(shè)計讓前端 bug 定位變得簡單， 頁面的 UI 和數(shù)據(jù)的對應(yīng)是唯一的,我們可以通過定位數(shù)據(jù)變化就可以定位頁面展現(xiàn)問題。

單向數(shù)據(jù)流設(shè)計：

這里要提一個概念， 可能你已經(jīng)了解或聽說了，就是 virtual dom。 React 之所以能夠這樣設(shè)計要歸功于 Virtual DOM 算法， 基于算法可以讓只有需要改變的元素才去重渲染。在后面的內(nèi)部實現(xiàn)章節(jié)中會詳細(xì)講解 virtual DOM 算法的實現(xiàn)

React.js 現(xiàn)在的版本已經(jīng)將源碼分開為 ReactDOM 和 React.js . 這就意味著 React 不僅僅能夠在 web 端工作， 甚至可以在服務(wù)端（nodejs），Native 端運行。

與此同時， 我們可以自定義自己的渲染器， 實現(xiàn)比如 Three.js， Pixi.js， D3.js 的 React 方式渲染。

React 可應(yīng)用的范圍：

web 端應(yīng)用

原生應(yīng)用 - IOS、Android、Native 應(yīng)用

Node.Js 服務(wù)端渲染

Web 應(yīng)用是 React 的出發(fā)點，我們可以通過 React 構(gòu)建從簡單的 TODOAPP 到大型的電商購物網(wǎng)站應(yīng)用。 同時除了能夠處理 HTML 以外， 在 Web 端， 我們同樣可以通過 React 來實現(xiàn)數(shù)據(jù)可視化， 圖表展現(xiàn)，甚至是游戲開發(fā)：

除了 Web 端以外，我們可以使用同樣的 jsx 語法構(gòu)建 IOS 或者 Android 應(yīng)用， 這要歸功于 facebook 開源的 React Native。 基于 React Native ， 我們將可以使用 jsx 來實現(xiàn)具有原生應(yīng)用性能的 UI 運行于 IOS 和 android 中，同時我們也可以通過 NW.js 或者 Electron 來實現(xiàn)基于 React 的桌面應(yīng)用。

React 除了在 Web 和 Native 環(huán)境以外， 也可以通過 React 實現(xiàn)在服務(wù)器端渲染出 HTML。