react入门2关于虚拟dom

首先想一下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，改变内容