通俗易懂简单了解虚拟DOM的原理，以及key值的注意事项

2018-12-13 本文已影响0人 DancingBUG

大家知道MVVM框架的核心就是强大虚拟DOM，要实现一个虚拟DOM挺复杂的，我下面只是用非常简单的例子给大家说明一下虚拟DOM的原理

首先我们有了state，即有了数据

this.state = {
  hello : 'hello world'
}

然后我们开始编写render函数，也就是用JSX语法去写页面上我们要说明，假设我们写了一个

<div id='abc' class='abcClass'><span>{{this.state.hello}}</span></div>

其实这里react会自动帮你处理，等同于我们写：

React.createElement(
  'div', { 
      'id:'abc',
      'class':'abcClass'  
    },  
    React.createElement('span', {}, 'hello world')
)

这时react会将我们写的JSX也就是模板语法+数据根据上述方法生成一个虚拟DOM(虚拟DOM其实就是一个JS对象，用它来描述真实DOM) ，虚拟DOM通常有3个参数，第一个是标签名，第二个是标签上的属性，第三个是标签包裹的内容：
```
['div', { 
    'id:'abc',
    'class':'abcClass'  
  },  
  ['span', {}, 'hello world']
]
```
接下来react将用虚拟DOM的结构生成真实的DOM来显示内容：
```
<div id='abc' class='abcClass'><span>hello world</span></div>
```

当state发生变化

this.setState({
 hello: 'goodbye world'
})

数据+模板生成了新的虚拟DOM

['div', { 
    'id:'abc',
    'class':'abcClass'  
  },  
  ['span', {}, 'goodbye world']
]

比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容，这时涉及到了diff算法，diff会进行两个虚拟dom之间根据DOM节点的同层比对，一旦发现有一层不一样，就会连底下的节点一起重新渲染，如图：

diff同层比对

总结，虚拟DOM以牺牲了一点点性能（生成虚拟DOM的过程），根据非常快速的同层比对算法，同时也牺牲了少许渲染速度，以换取极高的重新渲染效率，这也使得跨端应用如ReactNative得以应用。

下面我们谈一下DOM的key值，大家应该也在小程序，vue中遇到过for循环时，如果不给循环的标签一个key值，浏览器会console一个警告，那么这个key值究竟有什么用呢，以及为什么不建议用index做key值呢？

DOM节点与关联key值

左图描述了一个数组，我们在渲染的时候让数组中的5个数据生成了5个虚拟DOM树，这时我们新增加一个数据，由于我们没有给节点key值，所以当我们在做两个虚拟DOM比对时，节点与节点之间的关系就很难被确立，这点会损耗比对过程的性能。

所以建议大家一定要在循环中给节点加上key值，为什么不推荐用index做key值呢，原因在于两个虚拟DOM比对时，如果key值是固定的（如对象本身，如果是从数据库读取的数据，key值可以设置成这条数据的id），这时比对的效率会非常高。

假设使用index做key值，那么我们在删除一项数据的时候，会导致index值错位，如：

原始数据： A-0, B-1, C-2
这时我们删除A，数据变为：B-0, C-1

这样key值就失去了存在的意义，所以官方建议我们使用一个稳定的值去做key值。