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