大部分优化环节react都自己在内部处理了,但有一种情况也值得开发者注意,那就是列表中key的使用,合理的使用key有助于能精确的找到用于新旧节点复用的老节点。那么我们这里来学习下react 是如何diff children的,从源码的角度看。
用几个案例来描述React diffChild核心流程,react在一次更新中,当发现通过render得到的children如果是一个数组的话,就会调用reconcileChildArray来调和子代fiber,整个对比的流程就是在这个函数中进行的。
diff children流程
第一步:遍历新children,复用oldFiber
function reconcileChildrenArray() { // 第一步 // oldFiber 存在;newIdx应该是一个下标指针 for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) { // 当前循环的旧fiber节点下标大于当前循环小标时 // nextOldFiber装这个旧fiber if (oldFiber.index > newIdx) { nextOldFiber = oldFiber; oldFiber = null } else { // 否则,nextOldFiber装它的兄弟节点,也就是下一个需要循环的节点 nextOldFiber = oldFiber.sibling } // updateSlot会判断当前的tag和key是否匹配,如果匹配复用老fiber形成新的fiber,如果不匹配,返回Null. // returnFiber就是当前oldFiber的父节点,newChildren[newIdx]与oldFiber对应的新的节点,expirationTime过期时间 const newFiber = updateSlot(returnFiber, oldFiber, newChildren[newIdx], expirationTime) if (newFiber === null) break // ..一些其他逻辑 // shouldTrackSideEffects为更新流程 if(shouldTrackSideEffects){ // 找到了与新节点对应的fiber,但是不能复用 // alternate是一个指针,在双缓存树中,workInProgress(内存中构建的树)和current(渲染树)使用alternate指针相互指向 if(oldFiber && newFiber.alternate === null){ deleteChild(returnFiber,oldFiber) } } } }
第二步,统一删除oldfiber
if(newIdx === newChildren.length){ deleteRemainingChildren(returnFiber,oldFiber); return resultingFirstChild }
这一步其实就是,当第一步遍历完 newIdx === newChildren.length,此时证明所有newChild已经全部被遍历完,那么剩下的oldFiber就没有用了,就统一删除
第三步,统一创建newFiber
if(oldFiber === null){ for(;newIdx < newChildren.length;newIdx++){ const newFiber = createChild(returnFiber,newChildren[newIdx],expirationTime) // ... } }
第三步适合如下情况,当经历第一步,oldFiber为null,证明oldFiber复用完毕,那么如果还有新的children,说明都是新的元素,只需要调用createChild创建新的fiber
第四步:针对发生移动和更复杂的情况
// 将所有子元素添加到一个键映射中,以便快速查找。 const existingChildren = mapRemainingChildren(returnFiber, oldFiber) for (; newIdx < newChildren.length; newIdx++) { const newFiber = updateFromMap(existingChildren, returnFiber) // 从mapRemainingChildren删掉已经复用oldFiber }
1.mapRemainingChildren返回一个map,map里存放剩余的老的fiber和对应的key(或Index)的映射关系
2.接下来遍历剩下没有处理的Children,通过updateFromMap判断existingChildren中有没有可以复用oldFiber,如果有,那么复用,如果没有,新创建一个newFiber
第五步:删除剩余没有复用的oldFIber
if (shouldTrackSideEffects) { // 检查是否存在未被处理的子节点,如果存在,则将它们添加到删除列表中 existingChildren.forEach(child => deleteChild(returnFiber, child)); }
关于为什么不能使用Index作为Key
这里我们先来考虑使用math.random作为key会怎么样
如果math.random()作为key,那么每次更新,key都会变,等于key的复用没有用。从而使所有的组件和DOM元素每次都要重新创建。这不仅会造成允许变慢的问题,更有可能导致用户输入的丢失。
同理,使用Index作为key也是一样的,如果选择index作为key,元素发生移动,那么从移动节点开始,后面的fiber都不能做到合理的复用了。
标签:oldFiber,newIdx,复用,react,fiber,key,newChildren,diff From: https://www.cnblogs.com/yaoyu7/p/18401520