[React] React 介紹及理解

Mars Li

Published in

something-about-javascript

5 min readJul 8, 2018

來源: Build Your Own React — A Step By Step Guide

這邊會希望做為自己的筆記，所以我會把網路上的資料透過自己的統整後簡短的列下來，希望除了介紹 React 是什麼以外也能幫助大家理解一下 React 的原理。

React 是什麼

React 是 Facebook 在 2013 年所發表的一個處理前端 UI 的開源函式庫。React 處理到的僅僅是 UI 的部分，最多可以說是 MVC 中的View，他實現了前端 UI 的高效率、高性能開發。

Facebook 創造了 React 是為了解決構建一個大型且資料變動複雜的前端應用程式時所遇到的問題，它也已經被官方用於建構 Web 版本的 Facebook 和 Instagram。

React 的特色

JSX 語法
Component
Virtual DOM
Diff 演算法

JSX 語法

JSX 不是 React 必要的，它是一個語法糖，但它可以讓 React component 更好理解與閱讀，JSX 允許混用 JavaScript 和 HTML。

class Welcome extends React.Component {
    render() {
        return (<h1>Hello, {this.props.name}</h1>)
    }
}

但是因為目前的瀏覽器沒有支援，所以你必須要有工具能把 JSX 轉成普通的 JavaScript，這樣瀏覽器才看得懂，這部分可以透過 webpack + babel。

配置可以參考這篇

Component

為了讓 UI 能夠有更好的可組合性與可重用性，React 利用 Virtual DOM 的機制將 UI 在程式中都視為一個一個的組件（Component），每個 Component 中定義了這個 UI 元件所要呈獻的樣貌和事件，然後透過層層嵌套與交互使用來組合出你所需要的整個 View。這意味著透過 React，前端 UI 的開發將不再像過往直接撰寫 HTML 那樣雜亂無章，而是能夠更貼近於物件導向式的開發與管理，有系統的進行抽象化、封裝，甚至是繼承。

Virtual DOM

DOM 操作的效能成本非常的高，以往在網頁要更新頁面總是需要刷新整個頁面，React 為了解決開發者在手動操作 DOM 時可能造成的效能低落或失誤，建立了一套虛擬 DOM（Virtual DOM，以下簡稱 VDOM）的機制，程式記憶體中將有一份對應真正 DOM 的 VDOM ，VDOM 為 JavaScript 物件，以代管 UI 儲存的資料與邏輯。
當一個 UI 因為資料改變而需要進行畫面變動的時候，React 會根據新的 UI 狀態重繪一份新的 VDOM Tree，並且與變動前的舊 VDOM Tree 以高效率的 Diff 演算法進行比對，然後其中的差異才會真正的由 React 自動幫你更新到實際的 DOM 上，反應出畫面的變更。
透過 VDOM 的機制，開發者將不必煩惱如何操作 DOM，而可以專心於撰寫 UI 的定義與互動邏輯。並且由於 React 能夠自動去最佳化的處理 DOM 操作，前端 UI 程式將可以有效的降低操作成本而達到優秀的效能。

// Virtual DOM
var element = {
    tagName: 'ul', // 節點名稱
    props: {       // DOM的屬性(key, value)
        id: 'list'
    },
    children: [    // 該節點的子節點
      {tagName: 'li', props: {class: 'item'}, children: ["Item 1"]},
      {tagName: 'li', props: {class: 'item'}, children: ["Item 2"]},
      {tagName: 'li', props: {class: 'item'}, children: ["Item 3"]},
    ]
}

但是這裡有一點很重要

React 沒有說過 Virtual DOM 比操作原生的 DOM 快

蛤? 剛剛不是才說 React 性能多好多棒棒? 這裡要記住一件事，那就是沒有任何一個框架會比操作原生的 DOM 還要來的快，React 的優勢是你不需要手動去決定當網頁狀態更新時需要重新渲染哪一個部分的 UI，他會透過 Diff 去比較 Virtual DOM 的差異，然後自動算出最小代價的頁面重繪。

Diff 演算法

Virtual DOM 與 Diff 演算法是相輔相成的，當我們在網頁的狀態改變時，React 需要透過 Diff 演算法將目前的 Virtual DOM 與前一個 Virtual DOM 來去做比對，算出最小範圍的更新渲染。

標準的的 Diff 演算法複雜度為 O(n ^ 3)，但是 Facebook 讓 Diff 演算法的複雜度直接降低到O(n)，他是基於以下幾點達成的 :

1. 只比較同一層節點。

2. 同一層節點不同時，不比較子節點直接刪除前一個節點並建立新的節點。

3. 同一層節點相同屬性不同時，則對屬性進行重設。

4. 對於同一層的一整組列表節點，可以通過唯一的 key 進行區分，這樣可以避免子節點只是順序變動但卻重新建立的問題。