鵝廠優文 | ReactJS一點通

騰訊雲加社群發表於2018-06-06
ReactJS

歡迎大家前往騰訊雲+社群，獲取更多騰訊海量技術實踐乾貨哦~

作者：盧文喆 騰訊雲 UI工程師

導語 | 當React 剛開始紅的時候，一直覺得 JSX 的設計思想極其獨特，屬於革命性的創新，它效能出眾，程式碼邏輯卻非常簡單，所以，受到很多開發者的關注和使用，認為它可能是將來 Web 開發的主流工具。

React 最早起源於 Facebook 的一個內部專案，因為公司對現有的 JavaScript MVC 框架都不滿意，就決定自己開發一套，用來架設 Instagram 的網站。開發完成後，發現這套東西很好用，就在2013年5月開源了。

那麼 React 優勢在哪裡呢？

img

首先：虛擬 DOM，在 DOM 樹的狀態需要發生變化時，虛擬 DOM 機制會將同一Event loop前後的 DOM樹進行對比，如果兩個 DOM 樹存在不一樣的地方，那麼 React 僅僅會針對這些不一樣的區域來進行響應的 DOM 修改，從而實現最高效的 DOM 操作和渲染。

比如，我們修改了 DOM 樹上一些節點或 UI 元件對應繫結的 state，React 會即刻將其標記為“髒狀態”，在一個 Event loop 結束時，React 會計算得出 DOM 樹上需要修改的地方及其最終的狀態，並僅僅針對這些地方進行一次性的重新渲染。

於是好處顯而易見，並非每修改一次元件的 state，就會重新渲染一次，而是在 Event loop 結束後做一次計算，減少冗餘的 DOM 操作。另外 React 只針對需要修改的地方來做新的渲染，而非重新渲染整個 DOM 樹，自然效率很高。

其次：元件可巢狀，而且，可以模版化 —— 其實在 React 裡提及的“元件”，常規是一些可封裝起來、複用的 UI 模組，可以理解為“帶有細粒度UI功能的部分DOM區域”。然後我們可以把這些元件層層巢狀起來使用，當然這樣元件間會存在依賴關係。

至於模組化，類似於 ejs 那樣可以作為獨立的模組被引用到頁面上來複用，它可以直接把 UI 元件當作指令碼模組那樣來使用，完全可以配合 CommonJS、AMD、CMD 等規範來 require 需要的元件模組，並處理好它們的依賴關係。

基於上述的兩點，React 很自然的就獲得一部分開發者的青睞。不過在這之前得先理清兩件事情：

  1. React 是一個純 View 層，不擅長於和動態資料打交道，因此它不同於，也替代不了常規的框架；

  2. React 很擅長於處理元件化的頁面，在頁面上搭元件的形式有點像搭積木一樣，因此用上React的專案需求常規為介面元件化。

簡單點說，React元件應該具有如下特徵：

img

（1）可組合（Composeable）：一個元件易於和其它元件一起使用，或者巢狀在另一個元件內部。如果一個元件內部建立了另一個元件，那麼說父元件擁有它建立的子元件，通過這個特性，一個複雜的UI可以拆分成多個簡單的 UI 元件；

（2）可重用（Reusable）：每個元件都是具有獨立功能的，它可以被使用在多個UI場景；

（3）可維護（Maintainable）：每個小的元件僅僅包含自身的邏輯，更容易被理解和維護；

元件化一直是網頁開發的利器，許多開發者最希望能夠最大程度的重複使用過去的開發的元件，避免重複造輪子。在 React 中元件就是一切，前端開發可能需要花點時間轉變思維，尤其過去我們往往習慣將 HTML 、CSS 和 JavaScript 分離，現在卻要把它們都封裝在一起。

以下是一般 React Component 書寫的主要兩種方式：

1.使用 ES6 的 Class

//  注意元件首字母需要大寫
class MyComponent extends React.Component {
    // render 是 Class based 元件唯一必須的方法（method）
    render() {
        return (
            <div>Hello, World!</div>
        );
    }
}

// 將 <MyComponent /> 元件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));

2.使用 Functional Component 寫法

// 使用 arrow function 來設計 Functional Component 讓 UI 設計更便捷，避免互相干擾（side effect）
const MyComponent = () => (
    <div>Hello, World!</div>
);

// 將 <MyComponent /> 元件插入 id 為 app 的 DOM 元素中
ReactDOM.render(<MyComponent/>, document.getElementById('app'));

前面說到 React 有獨有的 JSX 語法，那麼到底什麼是 JSX 呢？

JSX在ECMAScript的基礎上提供了類似於XML的擴充套件。 JSX和HTML有點像，但也有不一樣的地方。例如，HTML中的class屬性在JSX中 為className。其他不一樣的地方，你可以參考FB的HTML Tags vs. React Components 這篇文章。

但是由於瀏覽器原生並不支援JSX，因此我們需要將其編譯為JS，有很多方法能夠 完成這個任務，後面我們會提到這些方法。此外，Babel也能夠講JSX編譯為JS。

一些參考資料：

  1. JSX in depth
  2. Online JSX compiler
  3. Babel: How to use the react transformer

一般而言 JSX 通常有兩種使用方式：

1.使用 browserify 或 webpack 等 CommonJS bundler 並整合 babel 預處理

2.在瀏覽器端做解析

請大家注意JSX的語法書寫方式：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <!-- 請先載入 index.html 中引入 react.js, react-dom.js 和 babel-core 的 browser.min.js -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.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">
      // 程式碼寫在這裡！
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

一般載入 JSX 方式有：

內嵌

<script type="text/babel">
  ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
  );
</script>

從外部引入

總結：以上都是我對 React 簡單的瞭解，包括 React 的優勢、元件化的特徵、React Component 的方法、以及 React 中為何要使用 JSX，以及 JSX 基本概念和用法。在 React 裡，所有的事物都是以 Component 為基礎，通常會將同一個 Component 相關的資源放在一起，而在撰寫 React Component 時我們常會使用 JSX 的方式來提升書寫效率。 JSX 是一種語法類似 XML 的 ECMAScript 語法擴充，可以發揮 JavaScript 的強大能力，放棄蹩腳的模板語言。當然 JSX 並非強制使用，你也可以選擇不用，因為最終 JSX 的內容都會轉化成 JavaScript。

以上就是對 React 入門的部分理解。

問答
如何從jQuery轉到React.js？
相關閱讀
前端ReactJS技術介紹
深入React元件生命週期
ReactNative佈局樣式總結

此文已由作者授權騰訊雲+社群釋出，原文連結：https://cloud.tencent.com/developer/article/1143281?fromSource=waitui

歡迎大家前往騰訊雲+社群或關注雲加社群微信公眾號（QcloudCommunity），第一時間獲取更多海量技術實踐乾貨哦~

相關文章