理解React的核心——Virtual DOM和Diff

React通过JS对象模拟原生DOM，加上DOM Diff 极大提升了DOM操作的性能。
Virtual DOM：ReactElement 树，轻量级的JavaScript对象，并通过 ReactDOM 的 render 方法渲染到真实 DOM 上。

var Element = {
  type: 'div',
  props: {
    className: css,
    childlren: []
  }
};

React diff：帮助我们计算出 Virtual DOM 中真正变化的部分，由虚拟 DOM来确保只对界面上真正变化的部分进行实际的DOM操作，而非重新渲染整个页面，从而保证了每次操作更新后页面的高效渲染。

浅谈ReactDiff算法的几个规则：

• 不同节点比较：节点类型不同则直接删除旧节点，插入新节点
• 列表节点的比较：设置唯一的key，可以帮助react快速定位要修改的元素
  JSX：每一个JSX元素都只是 React.createElement(component, props, ...children) 的语法糖。因此，任何时候你用JSX语法写的代码也可以用普通的 JavaScript 语法写出来。

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);
//可以被编译为不使用JSX的代码
class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);