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