React 教學 - React JavaScript UI Library

React: A JavaScript library for building user interfaces

React.js

React 是 Facebook 在 2013 年 3 月開源的 open source，是現在最熱門主流的前端 JavaScript 函式庫 (library) 之一，專門用來寫 UI (User Interfaces) 用的。

要特別知道的是，React 是一套 library 而不是一套 framework (框架) 喔，React 在 MVC 模式中，只有負責 V (View) 介面的部分！所以 React 可以拿來搭配其他 Frontend MVC framework 一起使用。

React 核心的設計思想

  1. 元件化 (Component-Based)

    一個元件 (component) 是 React 中最小的單位，在 React 中所有的東西或介面都是由元件所組成，強調 UI 元件的封裝性、共用性、組合性及擴展性。

  2. Declarative UI / JSX

    React 使用宣告式 (declarative) 的方法來描述 UI，你負責宣告描述當資料 (data) 在哪些不同的狀態下，介面應該分別長什麼樣子，而當資料發生變動時，React 會自動化協調畫面的更新。

    React 另外提供了稱作 JSX 的語法，作為 JavaScript extension syntax，JSX 是一種跟 HTML 相似的語法，用來讓你方便地寫 UI 元件。

  3. 單向資料流 (Unidirectional data flow)

    React 元件彼此之間的溝通，你只能透過從父元件將資料傳進去子元件的方式來做資料的傳遞 - 透過 React 所謂的 props，而 props 是唯讀的 (immutable values)，這表示你不能改動 props 傳進來的資料。

    有時候元件的資料不一定是從父元件傳進來的，例如可能是來自於自身介面中因使用者互動過程產生的資料，像是填寫表單，這時則是使用 React 所謂的 state，元件可以透過更新自身維護的 state 資料來改變元件狀態，而 state 也可以用來當作 props 的內容傳給子元件。

    React 的資料架構設計概念是採「單向資料流」，資料的流向只能從父元件傳入子元件 (top-down)，而資料改變時會牽動 UI 自動改變，每當 React 偵測到 props 或 state 有更新時，就會自動重繪整個 UI 元件。

    這是 React 一個核心的概念，畫面的改變是由改變資料來驅動，React 元件的狀態，就像一個有限狀態機 (finite-state machine)，所以你可以確定一個元件在某個資料狀態下的畫面一定會是長什麼樣子 (predictable)；而不像傳統你直接寫 JavaScript (或像是用 jQuery) 來分別維護資料和畫面的一致性，當介面很複雜時，很容易造成資料和畫面不同步，也容易有 bug。

  4. Virtual DOM

    一般網頁開發中，更新 DOM 是最耗費瀏覽器資源的動作之一，每當有大量的 DOM 操作時，非常容易造成效能的瓶頸，所以 React 引進了一套出名的機制及功能 - Virtual DOM (virtual Document Object Model)。

    它的概念是這樣子，React 在記憶體中自己維護一個跟 DOM 一樣的樹結構 (in-memory data structure cache)，每當資料 (props / state) 有更新時，React 首先會去用自己的一套 diff 演算法去算出哪些 DOM 元素有改變需要做更新，接著才會實際去操作真實的 DOM，所以簡單的說 Virtual DOM 目的是最小化 DOM 操作，以便達到效能的最佳化。

    Virtual DOM 讓開發者可以不用考慮到畫面更新時效能的問題，只需要管更新資料就好，剩下的就交給 React 來優化！

React 的優點及缺點 (pros and cons)

優點：

  • 可以自然地寫出模組化、高維護性、可重複利用的 UI
  • JSX 讓你可以用直觀的方式描述 UI 和邏輯
  • 單向資料流讓你的 UI 是穩定的、可預測的
  • Virtual DOM 幫助最佳化複雜的 UI 效能
  • 隨著你的基礎元件的建設越完整，寫 UI 就像組積木一樣，開發速度會越來越快
  • 適合寫互動式 UI (interactive UIs)
  • 適合用來建構大型且複雜的應用程式介面 (e.g. SPA)
  • 有一個非常大又活躍的開發者社群，一堆相關的開發工具，遇到問題要找解法也很簡單

缺點及限制：

  • React 有較高的學習門檻 (learning curve)，需要花上一定的時間來學習 React 函式庫本身用法和其相關的工具
  • React 不是一套完整的 framework，它只處理 View/UI 的部分
  • 對簡單或互動性低的頁面，你反而需要多花時間寫一些 boilerplate code，有點殺雞焉用牛刀的感覺
  • 有些人會討厭 JSX 語法，因為會在 JavaScript code 中夾雜 HTML