1.state 数据 2.JSX模板 3.数据 + 模板 结合，生成真实的DOM,来显示 4.state发生改变 5.数据+模板 结合，生成真实的DOM ,替换原始的DOM 缺陷： 第一次生成了一个完整的DOM片段 第二次生成了一个
缺陷： 第一次生成了一个完整的DOM片段 第二次生成了一个完整的DOM片段 第二次的DOM替换第一次的DOM,非常耗性能
1.state 数据 2.JSX 模板 3.数据 + 模板 结合，生成真实的DOM,来显示 4.state 发生改变 5.数据 + 模板 结合，生成真实的DOM ,并不直接替换原始的DOM 6.新的DOM (DocumentFragment) 和原始DOM 做对比，找差异 7.找出input框发生了变化 8.只用新的DOM中的input元素，替换掉老的DOM中的input元素
缺陷：性能的提升并不明显
1.state 数据 2.JSX模板 3.数据 + 模板 结合，生成真实的DOM ,来显示 <pre><div id=‘abc‘><span>hello world</span></div></pre> 4.生成虚拟DOM (虚拟DOM就是一个JS对象，用它来描述真实DOM) （损耗了性能） ["div",{id:‘abc‘},[‘span‘,{},‘hello,world‘]] 5.state 发生变化 6.数据 + 模板 生成新的虚拟DOM （极大提升了性能） ["div",{id:‘abc‘},[‘span‘,{},‘BYEBYE‘]] 7.比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容 （极大提升了性能） 8.直接操作DOM ,改变span中的内容