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值.