精益 React 學習指南（Lean React）- 1.1 React 介紹

時間 2019-11-06

標籤 react 學習指南 lean 1.1 介紹欄目 React 简体版

原文原文鏈接

書籍完整目錄html

1.1 React 介紹

1.1.1 React 是什麼

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

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

React.jsreact
ReactRenders: ReactDOM / ReactServer / ReactCanvasandroid
Flux 模式及其實現（Redux , Fluxxor）git
React 開源組件github
React Nativeweb
GraphQl + Relayajax

任何技術都是同樣，技術自己的核心不會太複雜，可是圍繞這個主體會有不少依附的知識點造成了體系化的技術棧。因此咱們談學習 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 後，讀者可能會開始產生疑問了：

jsx 語法怎麼和 HTML 寫法同樣？

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

看上去 React 除了 jsx 之外，並無什麼特殊的地方，不就是將模板字符串渲染到 DOM 中嗎？你能告訴我 React 和其餘框架有什麼不一樣之處嗎？

答：答案見 1.1.4 節

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 的桌面應用。