React为了方便组件化，需要构建HTML结构化页面。那么React是如何操作的呢？答案是，React通过创建与更新虚拟元素来管理整个虚拟DOM。
虚拟DOM是什么：由于DOM操作开销比较大，并且频繁的操作DOM会使得代码难以维护，React将DOM树转化成了JavaScript对象树，也就是虚拟DOM（Virtual DOM）。
每次数据更新后，React会先重新计算虚拟DOM，并和上次生成的虚拟DOM做对比，仅仅对发生变化的部分做批量更新（批量更新的性能要远好于一次一次单独的更新）。
虚拟元素是什么：虚拟元素就是真实元素的映射，但是它们的创建和更新都是在内存中完成的，不会真正的去渲染浏览器DOM树。虚拟元素可以分为两类：DOM元素和组件元素，分别对应的是：原生的DOM和用户自定义元素（比如说我们可以自己定义：< myDiv >）。
虚拟元素之–DOM元素：
当我们使用JavaScript来描述HTML元素的时候，这些元素可以被抽象为一个JSON对象（也就是Node节点），例如，一个按钮：
<button class="btn btn-blue">
<em>Confirm</em>
</button>
如果转换为JSON对象：
{ type: 'button',props: { className: 'btn btn-blue',children: [{ type: 'em',props: { children: 'Confirm' }
}]
}
}
这样，我们就可以根据这段代码，在JS中创建的虚拟DOM元素，最后再将虚拟DOM转化为浏览器上真正的DOM。
对于上述的button元素，我们可以很容易地进行封装成某个个性化的按钮：
const ColorButton = @H_404_66@({ color,text }) => {
return {
type: 'button',props: {
className: `btn btn-${color}`,
children: {
type: 'em',props: {
children: text,},};
}
然后，在需要生成按钮的时候，直接调用 ColorButton({color:'blue',text:'Confirm'}) 就可以创建。
现在我们发现，button：一个JSON对象，ColorButton({color:'blue',text:'Confirm'}) 也返回一个JSON对象，那么，MyButton()其实和button的地位是一样的，它也可以作为元素而存在。
进一步的，我们就可以有这样的写法：
{ type: ColorButton,props: { color: 'blue',2 children: 'Confirm' }
}
‘这也是React的核心思想之一。因为有公共的表达方法，我们就可以让元素彼此嵌套或混合。’
元素层层嵌套、封装，形成了React组件，最终，我们可以采用递归的方式构建出一个完全的DOM元素树。
于是，我们还可以将ColorButton继续封装：
const DangerButton = @H_404_66@({ text }) => ({
type: Button,props: {
color: 'red',4
children: text
}
});
然后所有这些都可以作为某个新元素的子节点：
const DeleteAccount = () => ({
type: 'div',
props: {
children: [
{
type: 'p',
props: {
children: 'Are you sure?',}
},{
type: DangerButton,
props: {
children: 'Confirm',{
type: Button,
props: {
color: 'blue',children: 'Cancel',}],}
});
我们已经可以看出，这个仅嵌套了两层的虚拟元素已经有点复杂了。。。
于是，JSX语法为我们解决了这个问题：
const DeleteAccount = () => (
<div>
<p>Are you sure?</p>
<DangerButton>Confirm</DangerButton>
<Button color="blue">Cancel</Button>
</div>
);
JSX将HTML和JS结合在一起，再通过编译器转化为纯JS后由浏览器执行。
基本语法：
元素类型：DOM元素首字母小写，组件元素首字母大写。
元素属性：
在JSX的虚拟元素中，DOM元素和组件元素都有属性。但是需要注意，DOM元素的属性：class／for是JS关键词，因此React做了如下转换：
class -> className
for -> htmlFor
// define
const Header = ({title,children}) => (
<h3 title={title}>{children}</h3>
);
// usage
<Header title="hello world">Hello world</Header>
属性表达式：
如果属性的值需要表达式来计算，只要用大括号替换双引号即可：
const person = <Person name={window.isLoggedIn ? window.name : ''} />;
因为JSX解析的方法是，遇到<…就按照HTML解析，遇到{}，就按照JS解析。
