react中虚拟dom的diff算法

前言

react通过虚拟dom极大的提高了性能，同时使react-native开发原生app成为可能，今天学习中简单的和大家分享一下react渲染页面过程，以及虚拟dom的diff算法。

react渲染过程

1、state 数据
2、jsx模板
3、生成虚拟dom（虚拟DOM就是一个js对象，用它来描述真实DOM）
['div', {id:'abc'}, ['span', {}, 'hello world']]
通过这样的一个js对象，我们就可以表述上面的dom结构了
4、用虚拟dom的结构，生成真实的dom，来显示

hello world

5、state发生变化
6、新的虚拟dom（极大的提升了性能）
['div', {id:'abc'}, ['span', {}, 'bye bye']]
7、比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（极大的提升了性能）
8、直接操作DOM,改变span中的内容
现在看第7步，比较原始虚拟DOM和新的虚拟DOM的区别，就是用了diff算法。

diff算法

image.png

大家都知道setState是异步操作，假设连续调用三次setState时候，react会将三次数据对比合成一对，这样只需要进行一次虚拟dom的对比，极大地提高了性能。接下来看具体的diff算法：

image.png

如图，diff算法有个很重要的概念，叫做同级比较，首先会比较最顶层的虚拟dom节点是否一致，假设一致，再去比较下一个节点。假设第一层虚拟dom不一致，这个时候怎么办呢？这个时候react就不会往下比了，他会原始的虚拟dom下面的节点全部删除掉，重新生成一遍节点下面的所有dom，然后用重新生成的dom，替换原始页面的dom，也就是只比对一层dom，大家可能会想，这不是性能很低吗？假设第一层节点不同，下面的节点都相同，岂不是下面的节点都没法复用了，确实是这样的，虽然会造成一些dom节点的渲染浪费，但是这种比对有什么好处呢？我们说同层比对，带来的算法非常的简单，只要一层一层的做对比就行了，算法简单，带来的好处就是比对的速度会非常的快，所以可能会造成重新渲染的一些浪费，但大大减少了去比对的算法上的性能消耗。所以采用了同层比对的算法。

image.png

再如图，假设我有1个数组，数组里面有5个数据，然后在页面第一次渲染的时候，我会把这个5个数据映射成5个虚拟dom节点，生成一个小的虚拟dom树，接着我又往数组里面增加一些内容，于是数据发生变化，会生成一个新的虚拟dom树，然后会进行一个比对，就是图左上下进行比对，如果每个虚拟dom没有一个key值，就没有一个自己的名字，当作两个虚拟dom树比对的时候，节点和节点之间的关系就很难被确定，比如下面的第一个是跟上面的第一个是一个即诶单，还是跟第二个是一个节点，很难做判断，所以得做两层循环的一个比较，这样比较起来就很麻烦了，也比较耗性能，现在加入在给虚拟dom循环的时候，我们可以给每一个节点起一个名字多好，如图右，虚拟dom根据key值做关联，只要找到对应的名字一样的节点是否相同，极大的提高了react的性能。这里就是为什么不要用index，如果key值是index的话，就没法保证在原始的虚拟dom树上，他的key值和虚拟dom树上的key值一致了。举个例子，比如一个数组

a-0 b-1 c-2
这个时候把a删除掉
b-0 c-1
这时候问题来了，原来b的key值是1，现在b的key值是0，所以以前的b，和现在的b就无法建立起关系，这个key值就不好用了，这就是用index作key值的一个问题，他会导致key值不稳定，这个时候失去了key值的意义，所以我们说不要用index作为key值，