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')
);
