假设没有reat我们要实现页面渲染该怎么实现

假设没有reat我们要实现页面渲染该怎么实现？

1. state 数据
2. JSX 模板
3. 数据 + 模板 结合,生成真实的DOM，来显示
4. state 发生变化
5. 数据 + 模板 结合,生成真实的DOM 替换原始的DOM，来显示

缺陷：

第一次生成一个完整的DOM片段
第二次生成一个完整的DOM片段
第二次DOM替换第一次DOM，非常耗性能

1. state 数据
2. JSX 模板
3. 数据 + 模板 结合,生成真实的DOM，来显示
4. state 发生变化
5. 数据 + 模板 结合,生成真实的DOM
6. 新的DOM(DocumentFragment)和原始的DOM做比较 找差异
7. 发现input框发生了变化
8. 用新的DOM中的input 替换老DOM中的input

缺陷：

性能提升不明显
  虽然局部替换DOM比之前性能有所提升 但是DOM比较又耗费了性能

1. state 数据
2. JSX 模板
3. 数据 + 模板 结合，生成虚拟DOM(虚拟DOM就是一个JS对象，它用来描述真实DOM) (极大提高了性能 JS生成JS对象 性能损耗极小 JS生成DOM对象 性能损失很大) ['div',{id:'abc'},['span',{},'hello world']]

JSX ->React.createElement('元素名',{属性} ,'内容') -> 虚拟DOM(JS对象)

4. 用虚拟DOM的结构生成真实的DOM 来显示 <div id='abc'><span>hello world</span></div>

5. state发生了变化 span的内容变成'bye bye'

6. 数据 + 模板 结合，生成新的虚拟DOM
   ['div',{id:'abc'},['span',{},'bye bye']]

7. 原始虚拟DOM和新的虚拟DOM比较(diff算法) 找到区别是span中的内容 （极大的提升了性能）

8. 直接操作DOM改变span中的内容