青岛 html5,flash设计开发|交互设计|网站建设,番禺网站开发公司,嵌入式软件开发笔试题目,河北工程大学最新消息一、是什么
跟Vue一致#xff0c;React通过引入Virtual DOM的概念#xff0c;极大地避免无效的Dom操作#xff0c;使我们的页面的构建效率提到了极大的提升
而diff算法就是更高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处
传统diff算法通过循环递归对节点进行依…一、是什么
跟Vue一致React通过引入Virtual DOM的概念极大地避免无效的Dom操作使我们的页面的构建效率提到了极大的提升
而diff算法就是更高效地通过对比新旧Virtual DOM来找出真正的Dom变化之处
传统diff算法通过循环递归对节点进行依次对比效率低下算法复杂度达到 O(n^3)react将算法进行一个优化复杂度姜维O(n)两者效率差距如下图 二、原理
react中diff算法主要遵循三个层级的策略 tree层级 conponent 层级 element 层级
tree层级
DOM节点跨层级的操作不做优化只会对相同层级的节点进行比较 只有删除、创建操作没有移动操作如下图 react发现新树中R节点下没有了A那么直接删除A在D节点下创建A以及下属节点
上述操作中只有删除和创建操作
conponent层级
如果是同一个类的组件则会继续往下diff运算如果不是一个类的组件那么直接删除这个组件下的所有子节点创建新的 当component D换成了component G 后即使两者的结构非常类似也会将D删除再重新创建G
element层级
对于比较同一层级的节点们每个节点在对应的层级用唯一的key作为标识
提供了 3 种节点操作分别为 INSERT_MARKUP(插入)、MOVE_EXISTING (移动)和 REMOVE_NODE (删除)
如下场景 通过key可以准确地发现新旧集合中的节点都是相同的节点因此无需进行节点删除和创建只需要将旧集合中节点的位置进行移动更新为新集合中节点的位置
流程如下表 index 新集合的遍历下标。oldIndex当前节点在老集合中的下标maxIndex在新集合访问过的节点中其在老集合的最大下标
如果当前节点在新集合中的位置比老集合中的位置靠前的话是不会影响后续节点操作的这里这时候被动字节不用动
操作过程中只比较oldIndex和maxIndex规则如下
当oldIndexmaxIndex时将oldIndex的值赋值给maxIndex当oldIndexmaxIndex时不操作当oldIndexmaxIndex时将当前节点移动到index的位置
diff过程如下
节点B此时 maxIndex0oldIndex1满足 maxIndex oldIndex因此B节点不动此时maxIndex Math.max(oldIndex, maxIndex)就是1节点A此时maxIndex1oldIndex0不满足maxIndex oldIndex因此A节点进行移动操作此时maxIndex Math.max(oldIndex, maxIndex)还是1节点D此时maxIndex1, oldIndex3满足maxIndex oldIndex因此D节点不动此时maxIndex Math.max(oldIndex, maxIndex)就是3节点C此时maxIndex3oldIndex2不满足maxIndex oldIndex因此C节点进行移动操作当前已经比较完了
当ABCD节点比较完成后diff过程还没完还会整体遍历老集合中节点看有没有没用到的节点有的话就删除
三、注意事项
对于简单列表渲染而言不使用key比使用key的性能例如
将一个[1,2,3,4,5]渲染成如下的样子 div1/div
div2/div
div3/div
div4/div
div5/div后续更改成[1,3,2,5,4]使用key与不使用key作用如下 1.加key
div key11/div div key11/div
div key22/div div key33/div
div key33/div div key22/div
div key44/div div key55/div
div key55/div div key44/div
操作节点2移动至下标为2的位置节点4移动至下标为4的位置。2.不加key
div1/div div1/div
div2/div div3/div
div3/div div2/div
div4/div div5/div
div5/div div4/div
操作修改第1个到第5个节点的innerText如果我们对这个集合进行增删的操作改成[1,3,2,5,6] 1.加key
div key11/div div key11/div
div key22/div div key33/div
div key33/div div key22/div
div key44/div div key55/div
div key55/div div key66/div
操作节点2移动至下标为2的位置新增节点6至下标为4的位置删除节点4。2.不加key
div1/div div1/div
div2/div div3/div
div3/div div2/div
div4/div div5/div
div5/div div6/div
操作修改第1个到第5个节点的innerText由于dom节点的移动操作开销是比较昂贵的没有key的情况下要比有key的性能更好
