浅谈DOM和DOM diff

时间：2021-02-21 00:13:24 阅读：30 评论：0 收藏：0 [点我收藏+]

1-虚拟 DOM 是什么？

一个能代表DOM树的对象，通常含有标签、标签上的属性、事件监听和子元素们，以及其他的属性

* React.createElement
createElement(‘div‘,{className:‘red‘,onClick:()=> {}},[
    createElement(‘span‘, {}, ‘span1‘),
    createElement(‘span‘, {}, ‘span2‘)
  ]
)
 
* Vue（只能在 render 函数里得到 h）
h(‘div‘, {
  class: ‘red‘,
  on: {
    click: () => { }
  },
}, [h(‘span‘,{},‘span1‘), h(‘span‘, {}, ‘span2‘])

2-虚拟 DOM 的优点？

减少 DOM 操作

虚拟 DOM 可以将多次操作合并为一次操作，比如你添加 1000 个节点，却是一个接一个操作的（减少频率）

虚拟 DOM 借助 DOM diff 可以把多余的操作省掉，比如你添加 1000 个节点，其实只有 10 个是新增的（减少范围）

跨平台

虚拟 DOM 不仅可以变成 DOM，还可以变成小程序、iOS 应用、安卓应用，因为虚拟 DOM 本质上只是一个 JS 对象

3-虚拟 DOM 的缺点？

需要额外创建函数，比如createElement,但是可以使用JSX简化写法，但是使用JSX就会严重需要依赖JSX文件

4-DOM diff 是什么？

就是一个函数，我们称之为 patch

patches = patch(oldVNode, newVNode)

patches 就是要运行的 DOM 操作

5-DOM diff 的优点？

DOM diff会层层递进，只更新需要更新的内容

6-DOM diff 的问题（key）？

存在识别错误的问题，只需要对每一个相同类型的同级标签添加一个唯一的key就行，这样DOM diff就会明确知道你操作的是哪个元素。

浅谈DOM和DOM diff

原文：https://www.cnblogs.com/yxks-666/p/14422693.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)