虚拟dom

1.state更新

1.1state数据

1.2 JSX模板

1.3 生成虚拟DOM (虚拟DOM就是一个JS对象, 用它来描述真实DOM) (损耗了性能)

1.4 数据+模板结合,生成真实的DOM,来显示

1.4 state发生改变

1.6 数据 + 模板 生成新的虚拟DOM (极大的提升了性能)

1.7 比较原始虚拟DOM和新的虚拟DOM的区别,找到区别是span中内容 (极大的提升性能)

1.8 直接操作DOM

2.生成DOM对象

2.1 JSX -> createElement -> 虚拟DOM (JS 对象)  -> 真实DOM

3.Diff算法

3.1 setState异步原因

在做比对时,可以把多次调用,合并成一次进行比对.

3.2 比对算法DIFF

3.2.1 同层比对

从顶层比对,遇到不同,直接替换虚拟dom所有节点dom,

3.2.2 key值比对

不能是index作为key,不稳定,用item做key值.