React的核心技术 vdom 和 diff

Vue2.x Vue3.0 React 三者实现 vdom 细节都不同 核心概念和实现思路，都一样

vdom

• h 函数
• vnode 数据结构
• patch 函数

vdom 结构

{
    tag: 'div',
    props: {
        className: 'container',
        id: 'div1'
    },
    children: [
        {
            tag: 'p',
            children: 'vdom'
        },
        {
            tag: 'ul',
            props: {style: 'font-size: 20px'},
            children: [
                {
                    tag: 'li',
                    children: 'a'
                },
                //...
            ]
        }
    ]
}

diff 算法优化

• 只比较同一层级，不跨级比较
• tag 不相同，则直接删除重建，不再深度比较
• tag 和 key，两者都相同，则认为相同节点，不再深度比较