亲宝软件园·资讯

展开

react虚拟dom和diff算法 react中的虚拟dom和diff算法详解

家里有只猪 人气:0
想了解react中的虚拟dom和diff算法详解的相关内容吗,家里有只猪在本文为您仔细讲解react虚拟dom和diff算法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:react虚拟dom和diff算法,react虚拟diff算法,react虚拟dom算法,下面大家一起来学习吧。

虚拟DOM的作用

首先我们要知道虚拟dom的出现是为了解决什么问题的,他解决我们平时频繁的直接操作DOM效率低下的问题。那么为什么我们直接操作DOM效率会低下呢?

比如我们创建一个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发生了变化,我们的内存中又会产生新的虚拟DOM,如果我们直接用这个新的虚拟DOM结构的话,又会导致很多重复的渲染,因此 这个时候diff算法的作用就体现了出来,diff通过比较新旧两个虚拟DOM树,找出差异,并且记录下来,然后把记录的差异应用到真实的DOM树上。

原理:

diff算法通过对新旧两颗树进行深度优先遍历,每一个节点都加一个唯一的标识。

这个过程分为2步

对于dom的操作基本可化为4种类型

下面会用伪代码的形式大致过一下这个流程

// diff 函数,对比两棵树
function diff(oldTree, newTree) {
    var patchs = {};  // 伪数组,记录差异
    //  对4种节点做错判断
    dfWork(oldTree, newTree, patchs, index)

    return patchs

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

    if (1) { // 对节点的删除
        currentPatch.push()
    } else if (3) { // 对节点的文本的更换
        currentPatch.push()

    } else { // 修改节点的props 对children的检查
        // 对props作diff算法,把变化记录到patchs中。
        currentPatch.push({ type: patch.PROPS, props: propsPatches })
        // 然后需要对子节点作diff算法
        diffChildren(oldNode.children, newNode.children, index, patches, currentPatch)
    }
}
function diffChildren(oldChildren, newChildren, index, patches, currentPatch) {

    // 对子节点作diff算法,遍历子节点,递归调用dfWork,做差异得到patchs

}
// 把变化应用在真实的DOM树上
function patch(node, patchs) {
    // node为老的DOM树,patchs变化。
    // 我们会遍历这个patchs,并且把node和patch对应上,
}
function applyPatch(node, patchs) {
    // 应为每个节点可能有多个变化,所以也需要遍历
    switch (patchs.type) {
        case REPLACE: // 节点替换
            // node.render() 
            break;
        case REORDER:  // 节点的移动删除新增子节点。

            break;
        case PROPS:
            // setProps
            break;
        case TEXT: // 对节点文本的修改
            // node.nodeValue
            break;

        default:
            break;
    }
}

参考文档:深度剖析:如何实现一个 Virtual DOM 算法 作者:livoras,内置源码。

加载全部内容

相关教程
猜你喜欢
用户评论