1、初始化数据state
2、JSX模板
3、数据+ 模板生成虚拟DOM(虚拟DOM就是一个JS对象,用它来描述真实的DOM)(损耗性能)
4、用虚拟DOM的结构生成真实DOM来显示
<div id = "rty" > <span>hello jsx</span></div>
5、state 发生改变
6、数据 + 模板 生成新的虚拟DOM (极大提高性能)
['div' ,{ id:'abc },['span',{},'bye bye']]
7、比较原始虚拟DOM和新的虚拟DOM的区别, 找到span内容
8、直接操作DOM该变span内容 避免频繁操作真实DOM极大提高性能