Virtual dom than the principle

dom comparison step

1. js object structure expressed dom

tagName tag name
props element property
key uniquely identifies
children subelements, and format as the parent element
count has several sub-elements, used to calculate the index of the current element, the first number in the entire dom, easy operation dom

Js original objects

{
    "tagName": "div",
    "props": {
        "id": "container"
    },
    "children": [
        {
            "tagName": "h1",
            "props": {
                "style": "color:red"
            },
            "children": [
                "simple virtual dom"
            ],
            "count": 1
        },
        {
            "tagName": "p",
            "props": {},
            "children": [
                "hello world"
            ],
            "count": 1
        },
        {
            "tagName": "ul",
            "props": {},
            "children": [
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #1"
                    ],
                    "count": 1
                },
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #2"
                    ],
                    "count": 1
                }
            ],
            "count": 4
        }
    ],
    "count": 9
}

2. The original structure js objects rendered dom

<div id="container">
    <h1 style="color: red;">simple virtual dom</h1>
    <p>hello world</p>
    <ul>
        <li>item #1</li>
        <li>item #2</li>
    </ul>
</div>

3. Modify the original target js

{
    "tagName": "div",
    "props": {
        "id": "container2"
    },
    "children": [
        {
            "tagName": "h5",
            "props": {
                "style": "color:red"
            },
            "children": [
                "simple virtual dom"
            ],
            "count": 1
        },
        {
            "tagName": "p",
            "props": {},
            "children": [
                "hello world2"
            ],
            "count": 1
        },
        {
            "tagName": "ul",
            "props": {},
            "children": [
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #1"
                    ],
                    "count": 1
                },
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #2"
                    ],
                    "count": 1
                },
                {
                    "tagName": "li",
                    "props": {},
                    "children": [
                        "item #3"
                    ],
                    "count": 1
                }
            ],
            "count": 6
        }
    ],
    "count": 11
}

4. Comparative nodes which are modified
type type, change the name of the label 0, a sub-element change (deletion or addition), attribute 2 is changed, is changed to 3 content
key the key values in the first object represents the index, the original dom The first change several elements

{
    "0": [
        {
            "type": 2,
            "props": {
                "id": "container2"
            }
        }
    ],
    "1": [
        {
            "type": 0,
            "node": {
                "tagName": "h5",
                "props": {
                    "style": "color:red"
                },
                "children": [
                    "simple virtual dom"
                ],
                "count": 1
            }
        }
    ],
    "4": [
        {
            "type": 3,
            "content": "hello world2"
        }
    ],
    "5": [
        {
            "type": 1,
            "moves": [
                {
                    "index": 2,
                    "item": {
                        "tagName": "li",
                        "props": {},
                        "children": [
                            "item #3"
                        ],
                        "count": 1
                    },
                    "type": 1
                }
            ]
        }
    ]
}

The modified object rendering js

a.标签名改变，直接重新渲染整个元素，包括元素下的子元素
b.子元素改变，该删除的删除，该添加的添加（针对列表框架有一套自己的计算方法，可以自行百度去研究）
c.属性改变，操作对应元素的属性
d.内容改变，操作对应元素的内容

<div id="container2">
    <h5 style="color: red;">simple virtual dom</h5>
    <p>hello world2</p>
    <ul>
        <li>item #1</li>
        <li>item #2</li>
        <li>item #3</li>
    </ul>
</div>