关于 ‘React 算法之调和算法’ 的 ‘reconcileChildrenArray’部分 about react-illustration-series HOT 4 CLOSED

@Genitana

1. 其中fiber(E)为什么可以复用？老序列中fiber(E)节点的key是 key=d , 而新节点 key=e，key不一样，作者是笔误了吗？
2. fiber(E)可以复用，但为什么没有位移？老序列中fiber(E)在第5个位置，而新的ReactELement序列中E在第3个位置，明显位置不一样，为什么只有fiber(C)位移了？fiber(E)不应该也位移了吗？

比较尴尬啊, 确实是图画错了, key=e才对. 关于节点移动的问题 @zhangyu1818 ,已经解答过了, 简单明了.

可以简单看一下源码: 判断位置移动是在 placeChild(newFiber, lastPlacedIndex, newIdx)中, 由于篇幅原因(且该函数代码量不大), 所以没有展开细节.

function placeChild(
    newFiber: Fiber,
    lastPlacedIndex: number,
    newIndex: number,
  ): number {
    newFiber.index = newIndex;
    if (!shouldTrackSideEffects) { 
      // Noop.
      return lastPlacedIndex;
    }
    const current = newFiber.alternate;
    if (current !== null) {
      const oldIndex = current.index;
      if (oldIndex < lastPlacedIndex) {
        // This is a move.
        newFiber.flags = Placement;
        return lastPlacedIndex;
      } else {
        // This item can stay in place.
        return oldIndex;
      }
    } else {
      // This is an insertion.
      newFiber.flags = Placement;
      return lastPlacedIndex;
    }
  }

lastPlacedIndex初始值为0, 代表最近一个被移动节点的位置.

1. 比较节点是否移动, 只发生在第二次循环过程中(公共序列之后的剩余序列的比较), 理论上剩余序列是乱序的.
2. 从左到右遍历剩余序列, 判断节点是否可以复用; 如果可以复用, 再判定是否移动.
   • 本例中fiber(E)被判断为可复用, 又因为它位于剩余序列中(且是可复用节点)的第一个, 且这时 if (oldIndex < lastPlacedIndex)不成立. 故不用标记placement. 返回后lastPlacedIndex = oldIndex
   • 当后面再遇到可复用节点之后, 比较fiber.alternate.index与lastPlacedIndex位置, 只要当前可复用节点在前一可复用节点右边, 就没有位移(还按照原有顺序). 如果后者在前者左边(与原有顺序不同), 则标记placement.

from react-illustration-series.

1. 看上去是图上画错了，图上有2个key=d的节点，最后一个应该是key=e，key相同是复用的。
2. 多节点diff移动都是统一向右移动的，新的e是第一个，不用移动，需要把c移动到右边，作者这一点没有讲，可以看这里

from react-illustration-series.

好的，非常感谢解答疑惑

from react-illustration-series.

基本原理=>
而是旧fiber对象与新ReactElement对象 向 相比较

from react-illustration-series.