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

這是我參與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>