Virtual DOM

通过 React.createElement 最终创建出来一个 ReactElement 对象

return ReactElement(  type,  key,  ref,  self,  source,  ReactCurrentOwner.current,  props);

React 利用 ReactElement 对象组成了一个 JavaScript 的对象树，也就是我们说的 Virtual DOM。

Why Virtual DOM

都说操作真实 DOM 是很昂贵的，让我们看一下真实 DOM 数据

Live Editor

Result

SyntaxError: Unexpected token (1:8)
1 : return ()
            ^

可以看出，真实 DOM 要复杂很多，So Virtual DOM

• 性能更好，DOM 操作会引起浏览器的回流和重绘
• 跟踪状态改变，方便调试

虚拟 DOM 帮助我们从命令式编程转到了声明式编程的模式，按 React 官方的说法：Virtual DOM 是一种编程理念。

在这个理念中，UI 以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的 JavaScript 对象，我们可以通过 ReactDOM.render 让 虚拟 DOM 和 真实 DOM 同步起来，这个过程中叫做协调（Reconciliation）； 这种编程的方式赋予了 React 声明式的 API：你只需要告诉 React 希望让 UI 是什么状态，React 来确保 DOM 和这些状态是匹配的。 你不需要直接进行 DOM 操作，从手动更改 DOM、属性操作、事件处理中解放出来；