首先想一下react的数据渲染正常情况下我们的步骤是
1.state数据 2.jsx模板 3.数据加模板结合。生成真实DOM,实现数据的渲染，来显示页面。
当state数据发生变化时候，模板加数据生成真实DOM，替换原来的DOM。这样每次换数据都要换模板很耗性能。
第二种方式。如果我们每次更换数据时候与模板经行对比，看看那里的数据变了替换掉相应的dom，实现渲染。
就不用没次都要换掉整个模板了。但是这样做其实也是消耗性能的，应为对比也是一个过程。性能提升并不明显
react有更好的解决方案，与之前一样首先要state数据，jsx模板。数据假模版生成真实dom
来显示，然后生成虚拟dom（虚拟dom就是一个js对象，用它来描述真实dom）（也耗性能很少，js生成一个js对象的代价比起js生成一个dom代价要小的多），举个例子
<div id='abc'><span>hello</span></div>。
这就是上面的一个虚拟dom ['div',{id:'abc'},['span',{},'hello']]
state数据发生变化，就会生成新的虚拟dom
['div',{id:'abc'},['span',{},'world']]
比较原始虚拟dom和新的虚拟dom的区别，找到span中内容 ，直接操作dom，改变内容