diff算法中的概念

合并多次setState

setState被设计为一个异步的方法，目的是为了提升React底层的性能。假设我们短时间内连续变更3次state，React就会把这3次setState合并为一次setState，只做一次VDOM的比对，提高了整体的性能。

同级比较

diff算法会从根节点开始，一层层的向下比较，如果在某一层的某个节点发现不同了，他就会直接替换这个节点下面的所有子树。

key值的重要性

如果每一个虚拟DOM节点没有一个key值，他就没有自己的一个名字。当我们在做新旧虚拟dom的比对时，旧状态的虚拟节点就与难以与新状态的虚拟节点之间确立关系。当每一个虚拟节点都有唯一key值时，新旧状态的虚拟节点很快就能知道谁是谁，这样就极大的提升了diff算法的效率。

为什么不要将数组的下标作为key值

假如数组中又3个节点a,b,c。我们使用数组下标来作为dom的key值。

[a, b, c] // 0:a, 1:b, 2:c

这时删除b

[a, c] // 0:a, 1:c

原来key值为1对应节点为b, 但现在key=1对应的节点变成了c。这时这个key值就失去了它存在的意义了。所以，为key值绑定一个稳定的值才是正确的做法

diff算法中的概念相关推荐

在虚拟DOM和Diff算法中为什么不建议使用index作为key值？
key是什么 key是虚拟DOM的一个重要标识,在DIff算法中,key对我们的性能也有着至关重要到的作用,有key就可以优化Diff算法,提高渲染性能: key在页面更新的时候做了什么 1.首先,当 ...
Diff算法中使用index作为key的弊端
首先都知道diff算法是依赖生成虚拟DOM然后跟真实DOM进行比较差异化来实现按需更新. 我们现在又数组1:[{name:"柯南",title:"侦探"},{n ...
CRF算法中辅助概念团极大团最大团
https://blog.csdn.net/aspirinvagrant/article/details/40735609
十分详细的diff算法原理解析
本文我们总结一下有关diff算法的相关内容和实现原理开门见山,直接先给出大家diff算法的概念 diff算法可以看作是一种对比算法,对比的对象是新旧虚拟Dom.顾名思义,diff算法可以找到新旧虚拟 ...
git diff的生成方式：myers diff算法
概述本文参考:https://blog.jcoglan.com/2017/02/12/the-myers-diff-algorithm-part-1/ 每个开发者多少都接触过git的diff功能,如 ...
【vue设计与实现】快速Diff算法 1
快速Diff算法,顾名思义,该算法的实测速度非常快.该算法最早应用于ivi和inferno这两个框架,Vue.js3借鉴并进行了扩展. 不同于简单Diff算法和双端Diff算法,快速Diff算法包含预 ...
vue3 - diff算法之快速diff算法
快速Diff算法预处理前面讲到简单Diff算法和双端Diff算法,它们使用不一样的对比规则对虚拟节点的 type(元素名)和虚拟节点的key(唯一标识)来区分是否有可以复用的旧节点.快速Diff ...
diff 算法深入一下？
一.前言有同学问:能否详细说一下 diff 算法. 简单说:diff 算法是一种优化手段,将前后两个模块进行差异化比较,修补(更新)差异的过程叫做 patch,也叫打补丁. 文章主要解决的问题: 1 ...
Vue之diff算法
前言 Vue通过双向绑定来实现数据驱动视图更新,当数据更新会触发Dep对象notify通知所有的订阅者Watcher对象,Watcher对象最后会调用run来执行Watcher对象的getter方法. ...