虚拟dom和diff算法

• 虚拟DOM和Diff算法 - 入门级
• 虚拟dom与diff算法

什么是虚拟DOM？

一个虚拟dom其实质是一个js对象，用来保存真实DOM的层次关系和一些基本属性。

传统的DOM结构如下:

<ul id="list">
    <li class="item1"> first </li>
    <li class="item2"> second </li>
</ul>

相对应的可以表现为如下形式(虚拟DOM)

{
    tag: 'ul',
    attr: {
        id: list
    },
    children: [
        {
            tag: 'li',
            attr: {
                className: 'item1',
            }
            children: [
            'first']
        },{
            tag: 'li',
            attr: {
                className: 'item2',
            }
            children: [
            'second']
        },
    ]
}

什么要使用虚拟的DOM？

将DOM抽象为虚拟的DOM，通过对比新旧两个虚拟DOM的差异(Diff算法)，从而只把变化的部分重新渲染，提高渲染效率。

Diff算法

diff算法的实现流程如下：

react diff 算法（tree diff）