什么是虚拟DOM？

熟悉 react 的同学对于 React.createElement 方法一定不会陌生，它用于创建reactNode，语法如下：

/*
* component 组件名，一个标签也可以理解成一个最基础的组件
* props 当前组件的属性，比如class，或者其它属性
* children 组件的子组件，就像标签套标签
*/
React.createElement(component, props, ...children)

比如我们定一个最简单的html片段：

<span className='span'>hello echo</span>

用React.createElement表示如下：

React.createElement('div', {className:'span'}, 'hello echo');

这样看好像也没什么大问题，但是假定我们dom存在嵌套关系：

<span className='span'>
  <span>
    hello echo
  </span>
</span>

用React.createElement表示就相对比较麻烦了，你需要在createElement中不断嵌套：

React.createElement('span', {className:'span'}, React.createElement("span", null, "hello echo"));

这还仅仅是两层嵌套，实际开发中dom结构往往要复杂的多，因此react中我们常常推荐直接使用jsx文件定义业务逻辑以及html片段。

我们可以将jsx中定义的html模板理解成React.createElement的语法糖，它方便了开发者以html的习惯去定义reactNode片段，而在编译之后，这些reactNode本质上还是会被转变成React.createElement所创建的对象，这个过程可以理解为：

 为方便理解，我们可以将React.createElement创建对象结构抽象为：

const VitrualDom = {
  type: 'span',
  props: {
    className: 'span'
  },
  children: [{
    type: 'span',
    props: {},
    children: 'hello echo'
  }]
}

说到底，这个就是传递给React.createElement的结构，而React.createElement接收后生成的数据，其实才是真正意义上的虚拟dom。我们可以简单定一个react组件，来查看虚拟dom真正的结构：

class C extends React.PureComponent {
  render() {
    console.log(this.props.children);
    return <div>{this.props.children}</div>;
  }
}

class P extends Component {
  render() {
    return (
      <C>
        <span className="span">
          <span>hello echo</span>
        </span>
      </C>
    );
  }
}

 那么到这里，我们搞清楚了虚拟DOM究竟是什么，所谓虚拟DOM其实只是一个包含了标签类型type，属性props以及它包含子元素children的对象。