虚拟DOM及Diff算法

state，props，render的关系

1. 当组件的state 或者props 发生改变的时候，render 函数就会重新执行
2. 当父组件的render 函数被运行时，它的子组件的render 函数也会被重新运行

虚拟DOM

1. 新建一个数据存储的对象state
2. 再弄一套JSX 模板
3. 数据 + 模板 生成虚拟DOM（ 虚拟DOM就是一个JS对象，用它来描述真实DOM）（损耗了性能：用js生成js对象的性能消耗比用js生成真实DOM的性能消耗要小很多）
   ['div', {id: 'abc'}, ['span', {}, 'hello world']]
4. 用虚拟DOM 的结构生成真实DOM，来显示
   <div id='abc'><span>hello world</span></div>
5. state 发生变化
6. 数据 + 模板 生成新的虚拟DOM （极大的提升了性能：没有直接生成真实DOM）
   ['div', {id: 'abc'}, ['span', {}, 'bey bey']]
7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（极大的提升了性能：js对象之间的对比要比用js去实现真实DOM之间的对比性能上消耗很少）【Diff算法】
8. 直接操作DOM，改变span中的内容

解析顺序：JSX -> createElement -> 虚拟DOM（js对象） -> 真实DOM

render(){
    return <div>item</div>
    //等价于
    return React.createElement('div', {}, 'item')
}

虚拟DOM中的Diff算法【diffrence】

定义： 虚拟DOM的比对方式

调用setState的时候进行比对

setState为什么要设计成异步的？
连续调用多次setState的时候（间隔较小），react会合并成一个setState，只做一次虚拟DOM的比对

1. 同层比对
   第一层不一致的时候，会把原始页面上的虚拟DOM对应下面的所有虚拟DOM全部删除掉，重新生成一遍虚拟DOM，替换原始的DOM（算法简单，比对速度快）
2. key 值比对

注意：列表循环中禁止用index 作为key 值, 可以使用内容作为key 值