React 学习笔记

React 中的虚拟dom

1. 获取 state 数据
2. 获取 jsx 模板
3. state + jsx （数据+模板）生成虚拟dom，虚拟dom就是一个js对象，用它来描述真实的dom结构，

这里假如生成的虚拟dom js对象为：
[‘div', {id: 'abc'}, ['span', {}, 'hello world' ]]

4. 用虚拟dom的结构生成真实的dom显示到页面上，

由虚拟dom渲染出来的真实dom为
<div id='abc'><span>hello world</span></div>

5. state 发生变化
6. state + jsx 生成新的虚拟dom

假如新的虚拟dom为
[‘div', {id: 'abc'}, ['span', {}, 'learn React' ]]

7. 比较原始虚拟dom和新的虚拟dom的区别，找出区别是span标签中的内容，这里用到 Diff 算法
8. 操作真实dom改变span中的内容