关于react.js:React源码中的domdiff

6次阅读

共计 19473 个字符，预计需要花费 49 分钟才能阅读完成。

这一章就来讲讲 React 在协调阶段的 beginWork 外面次要做的事件 — dom diff。

本文次要讲的是 React17.0.2 版本的diff，在此我也画了一个简略的流程图：

reconcileChildren

dom diff的入口函数就是reconcileChildren，那么他的源码如下：

//packages/react-reconciler/src/ReactFiberBeginWork.old.js
export function reconcileChildren(
  current: Fiber | null,// 以后的 fiber 节点
  workInProgress: Fiber,// 新生成的 fiber
  nextChildren: any,//  新生成的 reactElement 内容
  renderLanes: Lanes,// 渲染优先级
) {if (current === null) {
    // 如果没有曾经渲染的 fiber 树，则间接把 reactElement 内容渲染下来
    // If this is a fresh new component that hasn't been rendered yet, we
    // won't update its child set by applying minimal side-effects. Instead,
    // we will add them all to the child before it gets rendered. That means
    // we can optimize this reconciliation pass by not tracking side-effects.
    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderLanes,
    );
  } else {
    // If the current child is the same as the work in progress, it means that
    // we haven't yet started any work on these children. Therefore, we use
    // the clone algorithm to create a copy of all the current children.

    // If we had any progressed work already, that is invalid at this point so
    // let's throw it out.
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      current.child,
      nextChildren,
      renderLanes,
    );
  }
}

reconcileChildren的源码并不长，次要做了两件事

  • 如果是首次渲染，则会把曾经解决好的 fiber 树进行挂载。
  • 如果不是首次渲染则调用 reconcileChildFibers 进行下一步解决。

咱们关注一下 mountChildFibers 和reconcileChildFibers，咱们发现这两个函数别离指向 ChildReconciler，只是mountChildFibers 的参数为 false，reconcileChildFibers 的参数为true。咱们在这里先埋下一个点，看看这个参数对前期的流程有什么影响。

咱们持续深刻能够发现，ChildReconciler这个函数冰的执行返回了 reconcileChildFibers，所以这便是reconcileChildren 的外围性能代码所在了。

reconcileChildFibers

 function reconcileChildFibers(returnFiber: Fiber,    currentFirstChild: Fiber | null,    newChild: any,    lanes: Lanes,): Fiber | null {
    // This function is not recursive.
    // If the top level item is an array, we treat it as a set of children,
    // not as a fragment. Nested arrays on the other hand will be treated as
    // fragment nodes. Recursion happens at the normal flow.

    // Handle top level unkeyed fragments as if they were arrays.
    // This leads to an ambiguity between <>{[...]}</> and <>...</>.
    // We treat the ambiguous cases above the same.
    const isUnkeyedTopLevelFragment =
      typeof newChild === 'object' &&
      newChild !== null &&
      newChild.type === REACT_FRAGMENT_TYPE &&
      newChild.key === null;
    if (isUnkeyedTopLevelFragment) {newChild = newChild.props.children;}

    // Handle object types
    const isObject = typeof newChild === 'object' && newChild !== null;

    // 解决对象类型
    if (isObject) {switch (newChild.$$typeof) {
        // REACT_ELEMENT_TYPE 类型
        case REACT_ELEMENT_TYPE:
          return placeSingleChild(
            reconcileSingleElement(
              returnFiber,
              currentFirstChild,
              newChild,
              lanes,
            ),
          );
        // REACT_PORTAL_TYPE 类型  
        case REACT_PORTAL_TYPE:
          return placeSingleChild(
            reconcileSinglePortal(
              returnFiber,
              currentFirstChild,
              newChild,
              lanes,
            ),
          );
        // REACT_LAZY_TYPE 类型    
        case REACT_LAZY_TYPE:
          if (enableLazyElements) {
            const payload = newChild._payload;
            const init = newChild._init;
            // TODO: This function is supposed to be non-recursive.
            return reconcileChildFibers(
              returnFiber,
              currentFirstChild,
              init(payload),
              lanes,
            );
          }
      }
    }

    // 字符串与数字类型
    if (typeof newChild === 'string' || typeof newChild === 'number') {
      return placeSingleChild(
        reconcileSingleTextNode(
          returnFiber,
          currentFirstChild,
          '' + newChild,
          lanes,
        ),
      );
    }
    // 数组类型 
    if (isArray(newChild)) {
      return reconcileChildrenArray(
        returnFiber,
        currentFirstChild,
        newChild,
        lanes,
      );
    }

    // 可迭代的类型
    if (getIteratorFn(newChild)) {
      return reconcileChildrenIterator(
        returnFiber,
        currentFirstChild,
        newChild,
        lanes,
      );
    }

    if (isObject) {throwOnInvalidObjectType(returnFiber, newChild);
    }

    if (__DEV__) {if (typeof newChild === 'function') {warnOnFunctionType(returnFiber);
      }
    }
    if (typeof newChild === 'undefined' && !isUnkeyedTopLevelFragment) {
      // If the new child is undefined, and the return fiber is a composite
      // component, throw an error. If Fiber return types are disabled,
      // we already threw above.
      switch (returnFiber.tag) {
        case ClassComponent: {if (__DEV__) {
            const instance = returnFiber.stateNode;
            if (instance.render._isMockFunction) {
              // We allow auto-mocks to proceed as if they're returning null.
              break;
            }
          }
        }
        // Intentionally fall through to the next case, which handles both
        // functions and classes
        // eslint-disable-next-lined no-fallthrough
        case Block:
        case FunctionComponent:
        case ForwardRef:
        case SimpleMemoComponent: {
          invariant(
            false,
            '%s(...): Nothing was returned from render. This usually means a' +
              'return statement is missing. Or, to render nothing,' +
              'return null.',
            getComponentName(returnFiber.type) || 'Component',
          );
        }
      }
    }

    // Remaining cases are all treated as empty.
    return deleteRemainingChildren(returnFiber, currentFirstChild);
  }

参考 React 实战视频解说：进入学习

reconcileChildFibers中咱们依据入参 newChild 的类型别离对应着不同的解决:

  • 当批改的内容为 REACT_ELEMENT_TYPE 类型，调用 reconcileSingleElement 函数。
  • 当批改的内容为 REACT_PORTAL_TYPE 类型，调用 reconcileSinglePortal 函数。
  • 当批改的内容为 REACT_LAZY_TYPE 类型，递归调用 reconcileChildFibers 函数。
  • 当批改的内容问 纯文本 类型，调用 reconcileSingleTextNode 函数。
  • 当批改的内容为 数组 类型，调用 reconcileChildrenArray 函数。
  • 当批改的内容为 可迭代 类型，调用 reconcileChildrenIterator 函数

reconcileSingleElement

reconcileSingleElement的源码如下：

  function reconcileSingleElement(
    returnFiber: Fiber,// 父级
    currentFirstChild: Fiber | null, // 父级下 diff 的第一个
    element: ReactElement, // 以后元素
    lanes: Lanes, // 优先级
  ): Fiber {
    const key = element.key;
    let child = currentFirstChild;
    while (child !== null) {
      // TODO: If key === null and child.key === null, then this only applies to
      // the first item in the list.
      if (child.key === key) {switch (child.tag) {
          // 如果为 Fragment 类型，并且 key 也相等
          case Fragment: {if (element.type === REACT_FRAGMENT_TYPE) {

              // get 前面的兄弟节点增加 Deletion 标记，用于 dom 删除
              deleteRemainingChildren(returnFiber, child.sibling);

              // 通过 useFiber 复用旧 fiber 与新的 props
              const existing = useFiber(child, element.props.children);
              existing.return = returnFiber;
              if (__DEV__) {
                existing._debugSource = element._source;
                existing._debugOwner = element._owner;
              }
              return existing;
            }
            break;
          }
          case Block:
            if (enableBlocksAPI) {
              let type = element.type;
              if (type.$$typeof === REACT_LAZY_TYPE) {type = resolveLazyType(type);
              }
              if (type.$$typeof === REACT_BLOCK_TYPE) {
                // The new Block might not be initialized yet. We need to initialize
                // it in case initializing it turns out it would match.
                if (((type: any): BlockComponent<any, any>)._render ===
                  (child.type: BlockComponent<any, any>)._render
                ) {deleteRemainingChildren(returnFiber, child.sibling);
                  const existing = useFiber(child, element.props);
                  existing.type = type;
                  existing.return = returnFiber;
                  if (__DEV__) {
                    existing._debugSource = element._source;
                    existing._debugOwner = element._owner;
                  }
                  return existing;
                }
              }
            }
          // We intentionally fallthrough here if enableBlocksAPI is not on.
          // eslint-disable-next-lined no-fallthrough
          default: {
            if (
              // 新的 ReactElement 与旧的 current fiber 的 key 与 type 都雷同
              child.elementType === element.type ||
              // Keep this check inline so it only runs on the false path:
              (__DEV__
                ? isCompatibleFamilyForHotReloading(child, element)
                : false)
            ) {
               // 增加标记
              deleteRemainingChildren(returnFiber, child.sibling);
              const existing = useFiber(child, element.props);
              existing.ref = coerceRef(returnFiber, child, element);
              existing.return = returnFiber; 
              if (__DEV__) {
                existing._debugSource = element._source;
                existing._debugOwner = element._owner;
              }
              return existing;
            }
            break;
          }
        }
        // 匹配不上，key 相等，type 不相等，移除旧的 fiber 以及前面的兄弟
        deleteRemainingChildren(returnFiber, child);
        break;
      } 


      else 



      {
        // 如果 key 不同，则标记 Deletion,
        deleteChild(returnFiber, child);
      }
      // 遍历其兄弟
      child = child.sibling;
    }

    if (element.type === REACT_FRAGMENT_TYPE) {
      // 如果是 fragment 类型，创立 fragment，并返回。const created = createFiberFromFragment(
        element.props.children,
        returnFiber.mode,
        lanes,
        element.key,
      );
      created.return = returnFiber;
      return created;
    } else {
      // 如果不是 fragment，创立 element 并返回 fiber
      const created = createFiberFromElement(element, returnFiber.mode, lanes);
      created.ref = coerceRef(returnFiber, currentFirstChild, element);
      created.return = returnFiber;
      return created;
    }
  }

依据源码，reconcileSingleElement函数中会遍历以后父级 fiber 上面的所有子 fiber，依据旧的fiber 与新生成的 ReactElement 的 key 和type进行比拟：

  • 如果旧的 fiber 子节点与新的子节点的 key 和type不统一，给以后的旧的 fiber 子节点增加上 Deletion 标记，持续遍历其兄弟节点。
  • 如果旧的 fiber 子节点与新的子节点的 key 是统一的，就会依据以后的节点类型去做匹配解决，通过 deleteRemainingChildren 给以后子节点以及前面的所有的兄弟节点增加上 Deletion 标记，并且通过 useFiber 复用该子节点和该子节点新的props。
  • 如果旧的 fiber 子节点与新的子节点的类型匹配不上，则会间接给旧的 fiber 子节点打上 Deletion 标记，移除子节点以及前面的所有兄弟节点。
  • 如果旧的 fiber 树遍历结束，然而发现还没有匹配完的节点，那么会通过 createFiberFromFragment，createFiberFromElement 创立新的 fiber 节点，并指向父级fiber。

reconcileSingPortal

 function reconcileSinglePortal(returnFiber: Fiber,    currentFirstChild: Fiber | null,    portal: ReactPortal,    lanes: Lanes,): Fiber {
    const key = portal.key;
    let child = currentFirstChild;
    while (child !== null) {
      // TODO: If key === null and child.key === null, then this only applies to
      // the first item in the list.
      if (child.key === key) {
        if (
          child.tag === HostPortal &&
          child.stateNode.containerInfo === portal.containerInfo &&
          child.stateNode.implementation === portal.implementation
        ) {deleteRemainingChildren(returnFiber, child.sibling);
          const existing = useFiber(child, portal.children || []);
          existing.return = returnFiber;
          return existing;
        } else {deleteRemainingChildren(returnFiber, child);
          break;
        }
      } else {deleteChild(returnFiber, child);
      }
      child = child.sibling;
    }

    const created = createFiberFromPortal(portal, returnFiber.mode, lanes);
    created.return = returnFiber;
    return created;
  }

有了下面 REACT_ELEMENT_TYPE 的解说，对于 REACT_PORTAL_TYPE 的源码就有肯定的思路了，如果还不晓得 ReactPortal 的作用

placeSingleChild

上述的不论是 REACT_ELEMENT_TYPE、REACT_PORTAL_TYPE、REACT_LAZY_TYPE 都是用了 placeSingleChild 包裹起来的，咱们来看一看他做了什么事件。

  function placeSingleChild(newFiber: Fiber): Fiber {
    // This is simpler for the single child case. We only need to do a
    // placement for inserting new children.
    if (shouldTrackSideEffects && newFiber.alternate === null) {newFiber.flags = Placement;}
    return newFiber;
  }

那么这里咱们就发现了这个 shouldTrackSideEffects，还记得咱们在后面讲的ChildReconciler 函数的入参吗？他只是一个布尔。在挂载阶段 shouldTrackSideEffects:false，间接是return newFiber。不必要的标记减少性能开销。而在更新阶段，就必须要做这样的操作。Placement 为 dom 更新时的插入标记。

reconcileSingleTextNode

reconcileSingleTextNode的源码如下：

  function reconcileSingleTextNode(returnFiber: Fiber,    currentFirstChild: Fiber | null,    textContent: string,    lanes: Lanes,): Fiber {
    // There's no need to check for keys on text nodes since we don't have a
    // way to define them.
    // 第一个子节点为文本类型
    if (currentFirstChild !== null && currentFirstChild.tag === HostText) {
      // We already have an existing node so let's just update it and delete
      // the rest.
      deleteRemainingChildren(returnFiber, currentFirstChild.sibling);
      const existing = useFiber(currentFirstChild, textContent);
      existing.return = returnFiber;
      return existing;
    }
    // The existing first child is not a text node so we need to create one
    // and delete the existing ones.
    // 非文本类型打上标记，创立新的文本类型节点
    deleteRemainingChildren(returnFiber, currentFirstChild);
    const created = createFiberFromText(textContent, returnFiber.mode, lanes);
    created.return = returnFiber;// 指向父级
    return created;
  }
  • 如果以后 fiber 的第一个子节点的类型为 文本类型 ，那么其所有的兄弟节点增加Deletion 标记，通过 useFiber 复用以后 fiber 的子节点和textContent，并指向父级fiber。
  • 如果不为文本类型，那么给旧的节点增加 Deletion 标记，通过 createFiberFromText 创立新的文本类型节点，并指向父级fiber。

reconcileChildrenArray

下面的状况为 一对一 或者 多对一 的状况，那么如果是 一对多 或者 多对多 的状况就要用 reconcileChildrenArray 来解决了。

  function reconcileChildrenArray(returnFiber: Fiber,    currentFirstChild: Fiber | null,    newChildren: Array<*>,    lanes: Lanes,): Fiber | null {
    // This algorithm can't optimize by searching from both ends since we
    // don't have backpointers on fibers. I'm trying to see how far we can get
    // with that model. If it ends up not being worth the tradeoffs, we can
    // add it later.

    // Even with a two ended optimization, we'd want to optimize for the case
    // where there are few changes and brute force the comparison instead of
    // going for the Map. It'd like to explore hitting that path first in
    // forward-only mode and only go for the Map once we notice that we need
    // lots of look ahead. This doesn't handle reversal as well as two ended
    // search but that's unusual. Besides, for the two ended optimization to
    // work on Iterables, we'd need to copy the whole set.

    // In this first iteration, we'll just live with hitting the bad case
    // (adding everything to a Map) in for every insert/move.

    // If you change this code, also update reconcileChildrenIterator() which
    // uses the same algorithm.

    // 验证 key 是否非法
    if (__DEV__) {
      // First, validate keys.
      let knownKeys = null;
      for (let i = 0; i < newChildren.length; i++) {const child = newChildren[i];
        knownKeys = warnOnInvalidKey(child, knownKeys, returnFiber);
      }
    }

    // 要返回的第一个子 fiber 节点
    let resultingFirstChild: Fiber | null = null;
    let previousNewFiber: Fiber | null = null;

    let oldFiber = currentFirstChild;
    let lastPlacedIndex = 0;
    let newIdx = 0;
    let nextOldFiber = null;
    // 解决更新状况
    // 依据 oldFiber 的 index 和 newChildren 的下标，找到要比照更新的 oldFiber
    for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {if (oldFiber.index > newIdx) {
        nextOldFiber = oldFiber;
        oldFiber = null;
      } else {nextOldFiber = oldFiber.sibling;}
      // 通过 updateSlot 来 diff 老的和新的子 fiber 节点，生成新的 fiber
      const newFiber = updateSlot(
        returnFiber,
        oldFiber,
        newChildren[newIdx],
        lanes,
      );
      // 如果为 null 则阐明不可复用，退出第一轮循环
      if (newFiber === null) {
        // TODO: This breaks on empty slots like null children. That's
        // unfortunate because it triggers the slow path all the time. We need
        // a better way to communicate whether this was a miss or null,
        // boolean, undefined, etc.
        if (oldFiber === null) {oldFiber = nextOldFiber;}
        break;
      }
      if (shouldTrackSideEffects) {if (oldFiber && newFiber.alternate === null) {
          // We matched the slot, but we didn't reuse the existing fiber, so we
          // need to delete the existing child.
          deleteChild(returnFiber, oldFiber);
        }
      }
      // 记录老的 fiber 的下标，并打上 PlaceMent 标记
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      if (previousNewFiber === null) {
        // TODO: Move out of the loop. This only happens for the first run.
        // 如果以后节点的上一个节点是 null，则示意以后节点为第一个节点，要返回进来
        resultingFirstChild = newFiber;
      } else {
        // TODO: Defer siblings if we're not at the right index for this slot.
        // I.e. if we had null values before, then we want to defer this
        // for each null value. However, we also don't want to call updateSlot
        // with the previous one.
        // 如果不是则阐明不是第一个节点，须要持续解决其兄弟节点
        previousNewFiber.sibling = newFiber;
      }
      previousNewFiber = newFiber;
      oldFiber = nextOldFiber;
    }

    if (newIdx === newChildren.length) {
      // We've reached the end of the new children. We can delete the rest.
      // 如果 newChildren 遍历完了，则须要删除前面的所有旧的 fiber，打上 Deletion 标记
      deleteRemainingChildren(returnFiber, oldFiber);
      return resultingFirstChild;
    }

    if (oldFiber === null) {
      // If we don't have any more existing children we can choose a fast path
      // since the rest will all be insertions.
      // 如果旧的遍历完了，新的还有那么这都是新增的，通过 createChild 创立新的节点
      for (; newIdx < newChildren.length; newIdx++) {const newFiber = createChild(returnFiber, newChildren[newIdx], lanes);
        if (newFiber === null) {continue;}
        // 解决挪动的状况，给挪动的节点加上新增标记，插入到 fiber 链表树当中
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        if (previousNewFiber === null) {
          // TODO: Move out of the loop. This only happens for the first run.
          resultingFirstChild = newFiber;
        } else {previousNewFiber.sibling = newFiber;}
        previousNewFiber = newFiber;
      }
      return resultingFirstChild;
    }

    // Add all children to a key map for quick lookups.
    // 如果新的老的都没有遍历结束，则须要解决成一个 map，老的 key 作为 key，新的 value 作为 value
    const existingChildren = mapRemainingChildren(returnFiber, oldFiber);

    // Keep scanning and use the map to restore deleted items as moves.
    // 遍历剩下的 newChildren
    for (; newIdx < newChildren.length; newIdx++) {
      // 找到 mapRemainingChildren 中 key 相等的 fiber，复用 fiber 节点并更新 props
      const newFiber = updateFromMap(
        existingChildren,
        returnFiber,
        newIdx,
        newChildren[newIdx],
        lanes,
      );
      if (newFiber !== null) {if (shouldTrackSideEffects) {if (newFiber.alternate !== null) {
            // The new fiber is a work in progress, but if there exists a
            // current, that means that we reused the fiber. We need to delete
            // it from the child list so that we don't add it to the deletion
            // list.
            // 如果以后的心得节点的指针为 null，则须要删除老的节点
            existingChildren.delete(newFiber.key === null ? newIdx : newFiber.key,);
          }
        }
        // 解决挪动 dom 状况，记录 index 并打上 PlaceMent 标记
        lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
        // 将新创建的 fiber 插入到 fiber 链表树当中
        if (previousNewFiber === null) {resultingFirstChild = newFiber;} else {previousNewFiber.sibling = newFiber;}
        previousNewFiber = newFiber;
      }
    }

    if (shouldTrackSideEffects) {
      // Any existing children that weren't consumed above were deleted. We need
      // to add them to the deletion list.
      // 删除掉残余的 fiber 节点
      existingChildren.forEach(child => deleteChild(returnFiber, child));
    }

    return resultingFirstChild;
  }

既然是多对多的这样的一个更新场景，那么就会呈现节点的减少、缩小、挪动等状况，因为大部分的理论场景中，节点更新的状况，往往比减少、缩小多得多，所以 React 优先解决了更新的状况。比照的对象为旧的 fiber 和 newChildren。

首先先对 newChildren 进行遍历，将以后的 oldFiber 与 以后 newIdx 下标的 newChild 通过 updateSlot 进行 diff。

updateSlot

  function updateSlot(returnFiber: Fiber,    oldFiber: Fiber | null,    newChild: any,    lanes: Lanes,): Fiber | null {
    // Update the fiber if the keys match, otherwise return null.

    const key = oldFiber !== null ? oldFiber.key : null;

    // 如果是纯文本
    if (typeof newChild === 'string' || typeof newChild === 'number') {
      // Text nodes don't have keys. If the previous node is implicitly keyed
      // we can continue to replace it without aborting even if it is not a text
      // node.
      if (key !== null) {return null;}
      return updateTextNode(returnFiber, oldFiber, '' + newChild, lanes);
    }
    // 如果是对象
    if (typeof newChild === 'object' && newChild !== null) {switch (newChild.$$typeof) {
        case REACT_ELEMENT_TYPE: {if (newChild.key === key) {if (newChild.type === REACT_FRAGMENT_TYPE) {
              return updateFragment(
                returnFiber,
                oldFiber,
                newChild.props.children,
                lanes,
                key,
              );
            }
            return updateElement(returnFiber, oldFiber, newChild, lanes);
          } else {return null;}
        }
        case REACT_PORTAL_TYPE: {if (newChild.key === key) {return updatePortal(returnFiber, oldFiber, newChild, lanes);
          } else {return null;}
        }
        case REACT_LAZY_TYPE: {if (enableLazyElements) {
            const payload = newChild._payload;
            const init = newChild._init;
            return updateSlot(returnFiber, oldFiber, init(payload), lanes);
          }
        }
      }
      // 如果是数组或者可迭代的
      if (isArray(newChild) || getIteratorFn(newChild)) {if (key !== null) {return null;}

        return updateFragment(returnFiber, oldFiber, newChild, lanes, null);
      }

      throwOnInvalidObjectType(returnFiber, newChild);
    }

    if (__DEV__) {if (typeof newChild === 'function') {warnOnFunctionType(returnFiber);
      }
    }

    return null;
  }

可见 updateSlot 函数解决与下面的单节点解决相似：

  • 当 oldFiber 与newChildren[newIdx]的 key、type 雷同，则阐明是能够复用的，依据 oldFiber 和 newChild的 props 生成新的 fiber，通过 placeChild 给新生成的fiber 打上 Placement 副作用标记，同时新 fiber 与之前遍历生成的新 fiber 构建链表树关系。而后继续执行遍历，对下一个 oldFiber 和下一个 newIdx 下标的 newFiber 继续执行diff
  • 当 oldFiber 与newChildren[newIdx]的 key 或type不雷同，阐明不可复用，返回 null，间接跳出遍历。

  • 第一轮遍历完结后，可能会执行以下几种状况：

    • 若 newChildren 遍历完了，那剩下的 oldFiber 都是待删除的，通过 deleteRemainingChildren 对剩下的 oldFiber 打上 Deletion 副作用标记。
    • 若 oldFiber 遍历完了，那剩下的 newChildren 都是须要新增的，遍历剩下的 newChildren，通过 createChild 创立新的fiber，placeChild 给新生成的fiber 打上 Placement 副作用标记并增加到 fiber 链表树中。
    • 若 oldFiber 和newChildren都未遍历完，通过 mapRemainingChildren 创立一个以剩下的 oldFiber的 key 为key`oldFiber为 value 的map。而后对剩下的 newChildren 进行遍历，通过 updateFromMap 在 map 中寻找具备雷同 key 创立新的 fiber(若找到则基于 oldFiber 和 newChild 的 props 创立，否则间接基于 newChild 创立)，则从map 中删除以后的 key，而后placeChild 给新生成的 fiber 打上 Placement 副作用标记并增加到 fiber 链表树中。遍历完之后则 existingChildren 还剩下 oldFiber的话，则都是待删除的 fiber，deleteChild 对其打上 Deletion` 副作用标记。

updateFromMap

  function updateFromMap(existingChildren: Map<string | number, Fiber>,    returnFiber: Fiber,    newIdx: number,    newChild: any,    lanes: Lanes,): Fiber | null {if (typeof newChild === 'string' || typeof newChild === 'number') {
      // Text nodes don't have keys, so we neither have to check the old nor
      // new node for the key. If both are text nodes, they match.
      const matchedFiber = existingChildren.get(newIdx) || null;
      return updateTextNode(returnFiber, matchedFiber, '' + newChild, lanes);
    }

    if (typeof newChild === 'object' && newChild !== null) {switch (newChild.$$typeof) {
        case REACT_ELEMENT_TYPE: {
          const matchedFiber =
            existingChildren.get(newChild.key === null ? newIdx : newChild.key,) || null;
          if (newChild.type === REACT_FRAGMENT_TYPE) {
            return updateFragment(
              returnFiber,
              matchedFiber,
              newChild.props.children,
              lanes,
              newChild.key,
            );
          }
          return updateElement(returnFiber, matchedFiber, newChild, lanes);
        }
        case REACT_PORTAL_TYPE: {
          const matchedFiber =
            existingChildren.get(newChild.key === null ? newIdx : newChild.key,) || null;
          return updatePortal(returnFiber, matchedFiber, newChild, lanes);
        }
        case REACT_LAZY_TYPE:
          if (enableLazyElements) {
            const payload = newChild._payload;
            const init = newChild._init;
            return updateFromMap(
              existingChildren,
              returnFiber,
              newIdx,
              init(payload),
              lanes,
            );
          }
      }

      if (isArray(newChild) || getIteratorFn(newChild)) {const matchedFiber = existingChildren.get(newIdx) || null;
        return updateFragment(returnFiber, matchedFiber, newChild, lanes, null);
      }

      throwOnInvalidObjectType(returnFiber, newChild);
    }

    if (__DEV__) {if (typeof newChild === 'function') {warnOnFunctionType(returnFiber);
      }
    }

    return null;
  }

updateFromMap与下面的函数逻辑相似，不再复述，reconcileChildrenArray的流程如下。

React 的 diff 策略

  • 传统的 diff 算法的工夫复杂度为 O(n³)，是因为这种算法是以一棵树的一个节点比照另一棵树的所有节点的，这里为O(n²)，之后还须要再解决一次新生成的dom 树，故而 O(n³) 是这么算进去的。
  • 古代的 diff 算法的工夫复杂度为 O(n)，他是怎么算进去的呢？原来它采纳的是，深度优先 、 同层比拟 。就拿当初的MVVM 框架来说吧，借助了 vdom 这样的一个概念，同层比拟在于比拟同一层的节点元素，不会呈现不同层之间比拟的状况。

上图为一般的两棵树，用来论述什么叫 同层级 比拟。

  • react中的 diff 策略，则体现为tree diff、component diff、element diff。

    • tree diff：
      如果把上图的 dom 树当做是 current Fiber 和workInProgress Fiber，那么从左到右的操作将会是
    • 在 C 节点上面删除 G 节点。
    • 在 A 节点上面创立 W 节点。
    • 在 E 节点上面删除 J 节点。
    • 在 F 上面创立 J 节点。
    • component diff：组件之间的比拟，只会比拟他们的类型，如果上图右边的 B 节点的类型为 div，左边的B 节点类型为p，那么示意此节点不可复用，则进行的操作如下
    • 在 C 节点上面删除 G 节点。
    • 在 A 节点上面创立 W 节点。
    • 在 root 上面创立 B 节点。
    • 在 B 节点上面创立 E 节点。
    • 在 E 节点上面创立 I 节点。
    • 在 E 节点上面删除 J 节点。
    • 在 B 几点上面创立 F 节点。
    • 在 F 节点上面创立 J 节点。
    • 删除老的 B 节点。
    • element diff：元素之间的比拟分为 挪动 、 删除 、 新增，如果是上面的这样的例子，他将会进行这些操作。
    • 删除 A 节点。
    • 挪动 E 节点到 C 节点之后。
    • 创立 J 节点插入到 D 节点之后。
    • 删除 F 节点。

总结

这一章讲述了，react的 diff 过程，也学习了 react 的diff策略，通过上述的解决之后就会走到 completeUnitWork，在这个过程中咱们会依据新生成的fiber 树去创立 dom 元素，依据其上的副作用 flags、effectLists 链表去做副作用的解决，在 commit 阶段的 commitMutationEffects 函数中进行实在 dom 的插入解决，下一章将讲述实在 dom 的生成

正文完
react.js
发表至： react.js
2022-11-07
 0
关于react.js:webpack从零搭建react应用
关于react.js:React中的domdiff
关于react.js:react源码解析9diff算法
关于react.js:React基础语法总结

站内搜索

-「」