React学习笔记(八) 虚拟DOM与Diff算法
1、虚拟 DOM （1）什么是虚拟 DOM 我们先来回顾一下什么是 DOM？DOM 是一个 用于表示 HTML 文档结构 的树，实际上它是一个 JavaScript 对象 树上的每一个节点代表一个 HTML 元素，每个 HTML 元素拥有大量的属性、方法和事件，是一个十分复杂的对象 所谓的虚拟 DOM 就是 用于表示真实 DOM 结构 的一个 JavaScript 对象，它与真实 DOM 之间存在一个 映射关系 每个 React 元素对应一个 HTML 元素，但是 React 元素只保留着一些必要的属性，所以相对而言修改开销较小 （2）为什么使用虚拟 DOM 当状态发生变化时，React 不会直接更新视图（其目的是为了减少多次操作实际 DOM） 而是创建一个新的虚拟 DOM 缓存 所有发生变化的状态，然后等到合适的时候 一次性 更新到浏览器 当组件重新渲染时，React 不会渲染整个视图（其目的是为了减少大量操作实际 DOM） 而是使用 Diff 算法 比较新旧虚拟 DOM 之间的差异，然后只把 真正发生变化的地方 更新到浏览器 用一句话概括，使用虚拟 DOM 的目的就是 提高性能 ，它的核心其实就是 减少实际的 DOM 操作 （3）怎么样使用虚拟 DOM 虚拟 DOM 是 React 实现的内部机制，它的运作过程可以粗略概括如下： 使用 JavaScript 对象创建一棵虚拟