Skip to content

React的核心技术 vdom 和 diff

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

vdom

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

vdom 结构

js
{
    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,两者都相同,则认为相同节点,不再深度比较

基于 MIT 许可发布