react中的虛擬dom和diff算法詳解

更新時間：2021年04月18日 10:37:19 作者：家里有只豬

這篇文章主要介紹了react中的虛擬dom和diff算法,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

虛擬DOM的作用

首先我們要知道虛擬dom的出現是為了解決什么問題的，他解決我們平時頻繁的直接操作DOM效率低下的問題。那么為什么我們直接操作DOM效率會低下呢？

比如我們創(chuàng)建一個div，我們可以在控制臺查看一下這個div上自帶或者繼承了很多屬性，尤其是我們使用js操作DOM的時候，我們的DOM本身就很復雜，js的操作也會占用很多時間，但是我們控制不了DOM元素本身，因此虛擬DOM解決的是js操作DOM這一層面，其實解決的是減少了操作dom的次數

簡單實現虛擬DOM

虛擬DOM，見名知意，就是假的DOM，我們真實的DOM掛載在頁面上的，而我們的虛擬DOM則是在內存中的。這個就需要我們把真實的DOM抽象成一個對象放在內存中。這個對象就可以是如下類型：

var element = {
      tagName: 'div',
      props: {
        class: 'box'
      },
      children: {
        {
          tagName: 'p',
          props: {
            class: 'p1'
          },
          children: ['我是p1']
        }, 
         {
          tagName: 'p',
          props: {
            class: 'p2'
          },
          children: ['我是p2']
        }, 
        {
          tagName: 'p',
          props: {
            class: 'p3'
          },
          children: ['我是p3']
        },
      }
    }

我們想要構造出這樣的對象可以自己封裝一個構造函數如下：

function Element(tagName, props, children) {
    this.tagName = tagName
    this.props = props
    this.children = children
}

有了這個對象，我們需要把這個虛擬DOM渲染到真實DOM上，可以寫出如下方法：

Element.prototype.render = function () {
    const { tagName, props, children } = this
    var el = document.createElement(tagName)
    for (key in props) {
        el.setAttribute(key, props[key])
    }
    children.forEach((item) => {
        const childEl = (item instanceof Element) ?
              item.render() :
        document.createTextNode(item)
        el.appendChild(childEl)
    })
    return el
}

最后我們可以new出這個對象調用render()方法然后appendChild到body中就好了:

let virtualDom = new Element('div', { class: 'box' }, [
    new Element('p', { class: 'p1' }, ['我是p1']),
    new Element('p', { class: 'p2' }, ['我是p2']),
    new Element('p', { class: 'p3' }, ['我是p3']),
])

let a = virtualDom.render()
document.body.appendChild(a)

diff算法

首先我們先了解一下diff算法的作用

如果我們的虛擬dom發(fā)生了變化，我們的內存中又會產生新的虛擬DOM，如果我們直接用這個新的虛擬DOM結構的話，又會導致很多重復的渲染，因此這個時候diff算法的作用就體現了出來，diff通過比較新舊兩個虛擬DOM樹，找出差異，并且記錄下來，然后把記錄的差異應用到真實的DOM樹上。

原理：

diff算法通過對新舊兩顆樹進行深度優(yōu)先遍歷，每一個節(jié)點都加一個唯一的標識。

這個過程分為2步

找出兩個樹的差異，并記錄在一個偽數組里。
把這些不同應用到真實的DOM樹上

對于dom的操作基本可化為4種類型

對節(jié)點的刪除，移動，添加子節(jié)點
更換節(jié)點標簽
對于文本節(jié)點，修改節(jié)點文本
修改節(jié)點props

下面會用偽代碼的形式大致過一下這個流程

// diff 函數，對比兩棵樹
function diff(oldTree, newTree) {
    var patchs = {};  // 偽數組，記錄差異
    //  對4種節(jié)點做錯判斷
    dfWork(oldTree, newTree, patchs, index)

    return patchs

}
function dfWork(oldTree, newTree, patchs, index) {
    let currentPatch = []

    if (1) { // 對節(jié)點的刪除
        currentPatch.push()
    } else if (3) { // 對節(jié)點的文本的更換
        currentPatch.push()

    } else { // 修改節(jié)點的props 對children的檢查
        // 對props作diff算法，把變化記錄到patchs中。
        currentPatch.push({ type: patch.PROPS, props: propsPatches })
        // 然后需要對子節(jié)點作diff算法
        diffChildren(oldNode.children, newNode.children, index, patches, currentPatch)
    }
}
function diffChildren(oldChildren, newChildren, index, patches, currentPatch) {

    // 對子節(jié)點作diff算法，遍歷子節(jié)點，遞歸調用dfWork，做差異得到patchs

}
// 把變化應用在真實的DOM樹上
function patch(node, patchs) {
    // node為老的DOM樹，patchs變化。
    // 我們會遍歷這個patchs，并且把node和patch對應上，
}
function applyPatch(node, patchs) {
    // 應為每個節(jié)點可能有多個變化，所以也需要遍歷
    switch (patchs.type) {
        case REPLACE: // 節(jié)點替換
            // node.render() 
            break;
        case REORDER:  // 節(jié)點的移動刪除新增子節(jié)點。

            break;
        case PROPS:
            // setProps
            break;
        case TEXT: // 對節(jié)點文本的修改
            // node.nodeValue
            break;

        default:
            break;
    }
}

參考文檔：深度剖析：如何實現一個 Virtual DOM 算法作者：livoras，內置源碼。

到此這篇關于react中的虛擬dom和diff算法的文章就介紹到這了,更多相關react虛擬dom和diff算法內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: