React虚拟DOM的原理
主要分为三个步骤：
- 把JSX编译成JS
- 把原来由浏览器构建DOM树的工作，由JS构建DOM树
- 把结构数据传给React.render方法，把JS的数据结构渲染出来
举例子1
<div className='cn'>Content!</div>
编译成
React.createElement(
'div',
{className:'cn'},
Content!
)
举例子2
<div className='cn'>
Content1
<br/>
Content2
</div>
编译成
React.createElement(
'div',
{className:'cn'},
Content1,
React.createElement('br'),
Content2
)
Tree-diff算法
- 标签的变化
<div>标签变成<span>标签，首先删除<div>标签，然后插入<span>标签
RenderA: <div></div>
RenderB:<span></span>
[removeNode <div>],[insetNode <span>]
- 组件的变化
<header/>组件变成<content/>组件，首先删除<header/>组件的内容，然后渲染<content/>组件
RenderA:<header/>
RenderB:<content/>
[removeNode <header/>],[renderComponent <content/>]
- 列表的渲染
