React1、virtual DOM对应浏览器的DOM元素，它是由一个个的React element组成的。 3、虚拟D

1、virtual DOM对应浏览器的DOM元素，它是由一个个的React element组成的。

2、React element, 是由React 库提供的createElement 函数创建而来，是非常轻量级的数据结构，我们创建一个React element,

let h1Elem = React.createElement('h1', {id: 'recipe', 'data-type': 'title'}, 'Hello World');

createElement 函数接受三个参数，第一个是type,第二个是properties，第三个是children

3、虚拟DOM是以js对象形式存在于内存中的，和html element 没有任何关系, 但是通过它，我们却准确地描述了 html element 长什么样子，所以它是virtual, 用于指导构造真正的html element.

4、react-dom 库了，它里面有一个render 方法，可以把虚拟DOM 转化成真实的DOM, 用法如下：

ReactDOM.render(ulElem, document.getElementById('root'));

它接受两个参数，一个是要转化的Element, 一个是渲染到什么地方，这时我们刷新浏览器，可以看到3个li, 和我们用createElement创建的元素一一对应。

虚拟DOM提高性能的原因

Virtual DOM 本质上就是在 JS 和 DOM 之间做了一个缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。

利用diff算法避免了没有必要的DOM操作：

用 JavaScript 对象结构表示 DOM 树的结构；然后用这个树构建一个真正的 DOM 树，插到文档当中

当状态变更的时候，重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异

把2所记录的差异应用到步骤1所构建的真正的DOM树上，视图就更新了

diff算法