1.1 React 介紹

01-24

1.1.1 React 是什麼

React IS A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES
來自：React 官方網站

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

React.js
ReactRenders: ReactDOM / ReactServer / ReactCanvas
Flux 模式及其實現（Redux , Fluxxor）
React 開源組件
React Native
GraphQl + Relay

任何技術都是一樣，技術本身的核心不會太複雜，但是圍繞這個主體會有很多依附的知識點形成了體系化的技術棧。所以我們談學習 React 並不僅僅是學習 React 本身，而是學習這套開發體系，整個技術棧，本書也是圍繞這個技術棧系統的講解。

本書中除了 React Native 以外都會進行系統的講解，React Native 是相對於 WEB 來說另外一個較大的技術體系，本書會把重點放於 React Web 開發。

1.1.2 React 中的基本概念

我們先來認識一下 React 中的基本概念

React.js

React.js 是 React 的核心庫，在應用中必須先載入核心庫。

ReactDOM.js

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

JSX

JSX 是 React 自定義的語法，最終 JSX 會轉化為 JS 運行於頁面當中。

組件

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

VIRTUAL DOM

React 抽象出來的虛擬 DOM 樹，虛擬樹是 React 高性能的關鍵。

單向數據流：one-way reactive data flow

React 應用的核心設計模式，數據流向自頂向下

1.1.3 Hello React World

我也是性子急的人，按照技術界的慣例，在學習一個技術前，首先得說一句: 「Hello World!」。

<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title>Hello React!</title> <script src="http://facebook.github.io/react/js/react.js"></script> <script src="http://facebook.github.io/react/js/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello = React.createClass({ render: function() { return <div>Hello {this.props.name}</div>; } }); ReactDOM.render( <Hello name="World" />, document.getElementById("example") ); </script> </body></html>

讀者可以複製代碼到一個新的 HTML 文件中，並通過瀏覽器打開，上面的 html 中目前我們只用關心 script 標籤內的代碼，script 標籤內的語法為 JSX 語法，ReactDOM 是 React 的 DOM 渲染器。

了解了基本概念以及看過 Hello World 後，讀者可能會開始產生疑問了：

1. jsx 語法怎麼和 HTML 寫法一樣？

答：是的，看上去一樣，但jsx 和 HTML 本質的不同是 jsx 直接在函數中寫 xml 標籤。在 1.2 節中，會詳細介紹 jsx 以及和 HTML 做更多的對比。

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

答：答案見 1.1.4 節

3. Hello World 也並不能看出 React 的能力，你能先告訴我 React 能做些什麼嗎？

答：答案見 1.1.5 節

1.1.4 React 的獨特之處

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

組件的組合模式
單向數據流的設計
高效的性能
分離的設計

1.1.4.1 組件的組合模式

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

React 就是基於組合模式，無論是應用等級還是一個表單亦或是一個按鈕都視為一個組件，然後基於組件的組合構建整個應用，這樣的結構一直是前端界想要卻遲遲不來的 web component。

React 中組件的組合：

基於組合模式的優點：

構建可重用的組件：組件的開發能夠形成公司的組件庫，每個業務的開發都能積累可重用的組件。
無學習障礙：天然符合 HTML 的結構，對前端開發者來說幾乎沒有學習障礙。
具有彈性的架構：組合模式很簡單卻很有效，能夠構建簡單的頁面也能構建大型的前端應用。
源碼高可維護性：開發只是工作中的一部分，應用的上線才是噩夢的開始，很多大型應用因為複製的業務邏輯導致無法快速響應業務需求，可維護性低。

1.1.4.2 單向數據流的設計

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

單向數據流設計：

1.1.4.3 高效的性能

這裡要提一個概念，可能你已經了解或聽說了，就是 virtual dom。 React 之所以能夠這樣設計要歸功於 Virtual DOM 演算法，基於演算法可以讓只有需要改變的元素才去重渲染。在後面的內部實現章節中會詳細講解 virtual DOM 演算法的實現

1.1.4.4 分離的框架設計

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

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

1.1.5 React 應用範圍

React 可應用的範圍：

web 端應用
原生應用 - IOS、Android、Native 應用
Node.Js 服務端渲染

1.1.5.1 Web 端應用

Web 應用是 React 的出發點，我們可以通過 React 構建從簡單的 TODOAPP 到大型的電商購物網站應用。同時除了能夠處理 HTML 以外，在 Web 端，我們同樣可以通過 React 來實現數據可視化，圖表展現，甚至是遊戲開發：

1.1.5.2 原生應用

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

1.1.5.3 服務端渲染

React 除了在 Web 和 Native 環境以外，也可以通過 React 實現在伺服器端渲染出 HTML。