【日拱一卒】React原理 一 Virtual DOM 上

語言: CN / TW / HK

這是我參與11月更文挑戰的第27天,活動詳情檢視:2021最後一次更文挑戰

前言

React原理層面的知識梳理是為了之後的構建複雜應用做鋪墊,並不是為了卷。

VirtualDOM是什麼,VirtualDOM Diff高效的原因

VitualDOM是什麼

官方文件給出的定義

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

簡單而言,Virtual DOM是一種程式設計理念,將UI節點虛擬的儲存在記憶體中,並且通過某些庫渲染成真實的DOM。

官方文件傳送門

UI節點抽象

這裡的UI節點抽象有兩層含義。一層是在瀏覽器中,把真實的DOM節點抽象成了虛擬DOM節點。第二層是在移動端應用中,也把對應的UI節點抽象成了VirtualDOM節點。所有就得到了如下的特點:

  • Learn Once, Write Anywhere

學一次React,你就能開發Web應用和移動端應用。React與React Native基本的語法是大致相同的。這裡體現了React的跨平臺性質。

跨平臺性的本質也是通過Virtual DOM構建UI

Virtual DOM構建UI

以web開發為例,探討Virtual構建UI的過程。

通過VirtualDOM渲染頁面

例子

class App extends Component {
    state={
        text: 'Virtual DOM'
    }
    render(){
        const {text} = this.state
        return (
            <div><span>{text}</span></div>
        )
    }
}

渲染state變數text的值。在這個過程中React是通過render方法渲染Virtual DOM,從而繪製出了真實的DOM。每次修改了state的值就會執行render方法。

React渲染

Virtual DOM  對映到 HTML DOM

Virtual DOM VS 原生DOM

原生DOM更新

DOM API呼叫更新UI

Virtual DOM更新(過程更復雜)

  • 每次render都會產生一份新的 ‘react dom’
  • Virtual DOM要對新舊'react dom'進行比較,從而確定在舊'dom'的基礎上進行多少變更
  • 確定最優的變更策略之後呼叫DOM API更新UI

提問:這些流程上多出的步驟會使Virtual DOM更加低效嗎?

回答:直接操作DOM會引起重繪,而在VirtualDOM中,React已經幫我們做了這一個操作。我們之所以情感上覺得操作DOM會比較快,是因為當前例子過於簡單,畢竟只有兩個元素。如果這是一個網站,直接操作DOM相當於F5重新整理了一下,而操作Virtual DOM卻不會進行重繪,這也是Virtual DOM高效的地方。

接下來深入Virtual DOM高效的具體原因

Virtual DOM 資料結構

Virtual DOM本質上是JS物件對HTML節點的一個抽象,即以JS物件的形式表示HTML。

從而呈現在使用者面前的頁面就是一個複雜的遞迴物件。

// Virtual Dom虛擬碼
const globaldom = {
    tagName: 'html',
    children: [{
        tagName: 'head'
    },{
        tagName: 'body',
        children: [{
            tagName: 'div',
            attributes: {
                className:'test'
            }
        }]
    }]
}

<!-- html 虛擬碼 -->
<html>
    <head></head>
    <body>
        <div class="test"></div>
    </body>    
</html>

小結

  • Virtual DOM巨集觀概念上是一個對UI節點的一個抽象
  • 在Web開發中,Virtual DOM概念上是對HTML DOM節點的一個抽象。
  • Virtual DOM避免了多次操作DOM API會引起的重繪操作。這是VirtualDOM高效的最核心的地方。
  • 而VirtualDOM提高效能依賴於下一節要說明的Virtual DOM diff演算法,也就是React 對新舊Virtual DOM比較的這一過程

PS: 如果拋開實戰經驗,只比純理論,學習速度還是比較快的。所以說talk is easy, show me the code.

參考連結

官網Virtual Dom https://reactjs.org/docs/faq-internals.html#what-is-the-virtual-dom

Virtual DOM Node https://mithril.js.org/vnodes.html

VDom與 DOM 的區別 https://reactkungfu.com/2015/10/the-difference-between-virtual-dom-and-dom/

React效能優化:Virtual Dom原理淺析

[譯] Virtual Dom 和 Diff 演算法