虚拟 dom本质上就是 在 js 和 真实 dom 之间加了一个缓存,利用 diff 算法,避免了没有必要的 dom 操作,提高性能。
虚拟 dom 并不一定会提高性能:
1 :在首次渲染的时候,因为要创建一层额外的 虚拟 dom 也就是 js 对象,肯定不如直接操作 dom 会增加开销
2: 在视图复杂的情况下, 会提升渲染性能, 有频繁操作 dom 的话, 虚拟dom在更新真实 dom 之前会通过 diff 算法对比 新旧两个 dom 树的差异,然后在吧最终的差异表现到 真实 dom 上,不会每次直接操作 真实 dom 。另外可以给节点设置 key ,让节点重用避免大量的重绘节省性能。
react 中 key 的作用:
在 diff 算法中 判断元素是最新创建的还是 移动来的。从而减少不必要的 diff 提高diff 同级比较的效率。避免原地复用带来的副作用。key 使用来追踪 列表元素被修改 增加删除的唯一标识。必须要保证 key 的唯一性。