React16源码: React中的reconcileChildIterator和reconcileChildrenArray的源码实现

reconcileChildIterator 和 reconcileChildrenArray


1 )概述

  • 在react更新某一个节点的时候,要根据这个节点,它的类型去获取它的children
  • 比如说如果是 Function Component,它要调用这个 component 计算出它的return的属性
  • return的属性可能是一个数组,可能是单个的 ReactElement,可能是 number, string 这些类型
  • 要根据这些不同的类型去进行一些特殊的处理,然后得到它的children,和对应的 fiber 对象
  • 这样的话,又可以继续往下去迭代,迭代到最终的一个节点
  • 在经过这个过程,就可以把一个 fiber 树的一侧的子树进行完整的遍历和构建的过程
  • 在这个过程当中,有一个 children 的类型比较特殊,那就是数组
  • 在我们使用数组作为children返回的时候,都会看到这样的一个提醒
  • 那就是我们每一个节点上面必须要有一个key属性
  • 如果这个key属性没有,那 react 就会给我们一个提醒
  • 我们必须要对数组中的每一个节点使用一个唯一的key来标识它
  • 这个key和数组调和有特定的关系,主要关注:
    • A. key的作用
    • B. 对比数组 children 是否可复用的一个过程
    • C. generator 和 array遍历的区别

2 )源码

在 reconcileChildFibers 函数中调用的 reconcileChildrenArray

定位到 packages/react-reconciler/src/ReactChildFiber.js#L732

先看下 reconcileChildrenArray 这个API

新老children的对比过程,以及判断节点是否可复用的过程,这个过程会涉及到react的一个算法
尽量减少 数组的遍历次数,达到复用节点的过程

// 对于 newChildren 的遍历本质上是 O(n)
// 第一次遍历通过 newIdx++ 的方式,后面 特殊情况的判断来加速性能提升
// 只有在最后一个 for 循环中进行完整遍历,完成后创建节点
// 这里有很多判断一个节点是否可复用,都是通过 key 是否存在来判断的
// 如果不服用并且创建新的 fiber 节点,删除老的 fiber 节点 会导致内存申请和内存回收频繁
// 整体对性能存在影响,因为过于频繁的内存回收会导致内存抖动的问题
function reconcileChildrenArray(
  returnFiber: Fiber,
  currentFirstChild: Fiber | null,
  newChildren: Array<*>,
  expirationTime: ExpirationTime,
): Fiber | null {
  // This algorithm can't optimize by searching from boths 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.

  if (__DEV__) {
    // First, validate keys.
    let knownKeys = null;
    for (let i = 0; i < newChildren.length; i++) {
      const child = newChildren[i];
      knownKeys = warnOnInvalidKey(child, knownKeys);
    }
  }

  // 声明一堆的变量
  let resultingFirstChild: Fiber | null = null;
  let previousNewFiber: Fiber | null = null;

  let oldFiber = currentFirstChild; // 上一次渲染的过程中,渲染完成后,当前节点的第一个child节点
  let lastPlacedIndex = 0;
  let newIdx = 0;
  let nextOldFiber = null;
  // 这个for循环以相同的顺序,分别遍历新老的children对应的节点,判断它的key是否相同
  // 如果不相同,则跳出循环,到这个节点为止
  // 在遍历新老数组的时候,找到第一个不能复用的节点,这时候就会跳出循环
  for (; oldFiber !== null && newIdx < newChildren.length; newIdx++) {
    // 对于react渲染整个数组的过程中,会在每个 Fiber 节点上面 设置一个index属性 就是 这个节点在children里的位置
    // 老的children的Fiber的index > newIdx 说明它们的位置不匹配,则直接赋值给 nextOldFiber
    if (oldFiber.index > newIdx) {
      nextOldFiber = oldFiber;
      oldFiber = null;
    } else {
      // 正常情况下,取当前节点的下一个节点
      nextOldFiber = oldFiber.sibling;
    }
    const newFiber = updateSlot(
      returnFiber,
      oldFiber,
      newChildren[newIdx],
      expirationTime,
    );
    // 为 null 代表 这个节点不能复用 跳出 for循环
    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.
      // 如果oldFiber 不存在,则处理成下一个节点
      if (oldFiber === null) {
        oldFiber = nextOldFiber;
      }
      break;
    }
    // 存在 newFiber 并且 shouldTrackSideEffects
    if (shouldTrackSideEffects) {
      // newFiber.alternate 不存在,说明它没有复用 oldFiber 来产生一个节点,而是直接 return 了一个新的Fiber
      // 如果重新复用的 oldFiber, 那 newFiber.alternate 应该存在的,这个节点至少经过一次渲染,是有 current 和 workInProgress 的存在的
      // 没有复用之前的节点,则说明 老的节点 失效的状况,则删除之
      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);
      }
    }
    lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
    // 每次循环都会给 previousNewFiber 赋值
    // 如果没有被赋值,代表是新节点
    if (previousNewFiber === null) {
      // TODO: Move out of the loop. This only happens for the first run.
      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; // 如果之前节点已经存在, newFiber 是之前节点previousNewFiber的兄弟节点
    }
    previousNewFiber = newFiber; // 这里进行赋值
    oldFiber = nextOldFiber; // 接着下一轮
  }

  // 跳出循环后,当两者相等,新数组的children 全部创建fiber对象了, 新数组已经操作完成了
  if (newIdx === newChildren.length) {
    // We've reached the end of the new children. We can delete the rest.
    deleteRemainingChildren(returnFiber, oldFiber); // 对于老数组情况,存在 oldFiber,删除剩下的节点
    return resultingFirstChild; // 返回第一个节点,第一个节点才是 return fiber 的 child 属性所指向的节点,剩下的后续节点都是通过 .sibling 来指向下去的
  }
  // oldFiber 为 null 时,说明老节点已经被遍历完了
  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.
    // 老的节点已经被复用完了,新节点还剩下一部分没有创建,对剩下的节点都进行创建
    // 就不需要关心它是否有复用的节点了
    for (; newIdx < newChildren.length; newIdx++) {
      const newFiber = createChild(
        returnFiber,
        newChildren[newIdx],
        expirationTime,
      );
      if (!newFiber) {
        continue;
      }
      // 同样对这些节点进行 placeChild 操作
      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; // 存在,则处理 sibling 指向
      }
      previousNewFiber = newFiber;
    }
    return resultingFirstChild;
  }

  // Add all children to a key map for quick lookups.
  // 剩下的情况是数组可能存在顺序的变化,oldFiber 可能还有一些兄弟节点,newChildren 还有几个没有被创建
  // 从 oldFiber 剩下的节点中找到 newChildren 可以复用的 Fiber 节点
  // 通过 mapRemainingChildren 来创建一个map
  const existingChildren = mapRemainingChildren(returnFiber, oldFiber);

  // Keep scanning and use the map to restore deleted items as moves.
  // 最后的遍历把所有节点创建一遍
  for (; newIdx < newChildren.length; newIdx++) {
    // 调用一个 
    const newFiber = updateFromMap(
      existingChildren,
      returnFiber,
      newIdx,
      newChildren[newIdx],
      expirationTime,
    );
    // 存在 newFiber 
    if (newFiber) {
      if (shouldTrackSideEffects) {
        // 存在 current,说明已经被复用了
        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.
          // 删除 map 里面的删除该匹配的节点
          existingChildren.delete(
            newFiber.key === null ? newIdx : newFiber.key,
          );
        }
      }
      // 没有被复用, 执行 placeChild
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      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.
    // 在 existingChildren 中遗留的 fiber 对象执行 删除,因为这些fiber对象没有被复用
    existingChildren.forEach(child => deleteChild(returnFiber, child));
  }

  return resultingFirstChild;
}
  • 下面是上面用到的几个API
    • 进入 updateSlot
      // 这个方法对比,新老的key是否相同,来查看它是否可以复用 老的fiber节点
      function updateSlot(
        returnFiber: Fiber,
        oldFiber: Fiber | null,
        newChild: any,
        expirationTime: ExpirationTime,
      ): Fiber | null {
        // Update the fiber if the keys match, otherwise return null.
        // oldFiber 存在的情况下,获取它的key
        const key = oldFiber !== null ? oldFiber.key : null;
        // 文本节点,没有key
        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;
          }
          // 老的节点存在 key
          return updateTextNode(
            returnFiber,
            oldFiber,
            '' + newChild,
            expirationTime,
          );
        }
        // 对象类型,基于 $$typeof 来判断
        if (typeof newChild === 'object' && newChild !== null) {
          switch (newChild.$$typeof) {
            case REACT_ELEMENT_TYPE: {
              // 只有在前后的key相同的情况下,才会复用节点
              if (newChild.key === key) {
                if (newChild.type === REACT_FRAGMENT_TYPE) {
                  return updateFragment(
                    returnFiber,
                    oldFiber,
                    newChild.props.children,
                    expirationTime,
                    key,
                  );
                }
                return updateElement(
                  returnFiber,
                  oldFiber,
                  newChild,
                  expirationTime,
                );
              } else {
                // 不同,则停止,不能复用
                return null;
              }
            }
            // 下面也类似
            case REACT_PORTAL_TYPE: {
              if (newChild.key === key) {
                return updatePortal(
                  returnFiber,
                  oldFiber,
                  newChild,
                  expirationTime,
                );
              } else {
                return null;
              }
            }
          }
          // 继续判断是数组还是可迭代
          if (isArray(newChild) || getIteratorFn(newChild)) {
            if (key !== null) {
              return null;
            }
      
            return updateFragment(
              returnFiber,
              oldFiber,
              newChild,
              expirationTime,
              null,
            );
          }
      
          throwOnInvalidObjectType(returnFiber, newChild);
        }
      
        if (__DEV__) {
          if (typeof newChild === 'function') {
            warnOnFunctionType();
          }
        }
      
        return null;
      }
      
    • 进入 placeChild
      function placeChild(
        newFiber: Fiber,
        lastPlacedIndex: number,
        newIndex: number,
      ): number {
        // 同步 index
        newFiber.index = newIndex;
        if (!shouldTrackSideEffects) {
          // Noop.
          return lastPlacedIndex;
        }
        // 获取 current
        const current = newFiber.alternate;
        // 存在 current
        if (current !== null) {
          const oldIndex = current.index;
          if (oldIndex < lastPlacedIndex) {
            // This is a move.
            newFiber.effectTag = Placement; // 代表这个节点要被挂载到 dom上面 顺序变化了,说明这个节点被移动了,进行 dom 操作,tag 就是 Placement
            return lastPlacedIndex;
          } else {
            // This item can stay in place.
            return oldIndex; // 存在于原来的位置
          }
        } else {
          // current 为 null 说明节点没有被渲染过,它是一个插入的节点
          // 插入的节点也是需要使用 Placement 同样进行dom操作
          // 就是这个节点要根据某个顺序插入到 dom节点的后面
          // This is an insertion.
          newFiber.effectTag = Placement;
          return lastPlacedIndex;
        }
      }
      
    • 进入 mapRemainingChildren
      function mapRemainingChildren(
        returnFiber: Fiber,
        currentFirstChild: Fiber,
      ): Map<string | number, Fiber> {
        // Add the remaining children to a temporary map so that we can find them by
        // keys quickly. Implicit (null) keys get added to this set with their index
        // instead.
        // 通过 Map 对象找到 key相同的节点,判断是否可以复用
        const existingChildren: Map<string | number, Fiber> = new Map();
      
        let existingChild = currentFirstChild;
        // 遍历剩下的节点,获取其key 
        while (existingChild !== null) {
          if (existingChild.key !== null) {
            // set key value
            existingChildren.set(existingChild.key, existingChild);
          } else {
            // key 不存在,使用 index
            existingChildren.set(existingChild.index, existingChild);
          }
          existingChild = existingChild.sibling;
        }
        return existingChildren;
      }
      
    • 进入 updateFromMap
      function updateFromMap(
        existingChildren: Map<string | number, Fiber>,
        returnFiber: Fiber,
        newIdx: number,
        newChild: any,
        expirationTime: ExpirationTime,
      ): 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; // 通过 newIdx 来查找,不管是否找到
          // 返回一个text node
          return updateTextNode(
            returnFiber,
            matchedFiber,
            '' + newChild,
            expirationTime,
          );
        }
        // 这里和 updateSlot类似
        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,
                  expirationTime,
                  newChild.key,
                );
              }
              return updateElement(
                returnFiber,
                matchedFiber,
                newChild,
                expirationTime,
              );
            }
            case REACT_PORTAL_TYPE: {
              const matchedFiber =
                existingChildren.get(
                  newChild.key === null ? newIdx : newChild.key,
                ) || null;
              return updatePortal(
                returnFiber,
                matchedFiber,
                newChild,
                expirationTime,
              );
            }
          }
      
          if (isArray(newChild) || getIteratorFn(newChild)) {
            const matchedFiber = existingChildren.get(newIdx) || null;
            return updateFragment(
              returnFiber,
              matchedFiber,
              newChild,
              expirationTime,
              null,
            );
          }
      
          throwOnInvalidObjectType(returnFiber, newChild);
        }
      
        if (__DEV__) {
          if (typeof newChild === 'function') {
            warnOnFunctionType();
          }
        }
      
        return null;
      }
      

在 reconcileChildFibers 函数中调用的 reconcileChildrenIterator

定位到 packages/react-reconciler/src/ReactChildFiber.js#L891

function reconcileChildrenIterator(
  returnFiber: Fiber,
  currentFirstChild: Fiber | null,
  newChildrenIterable: Iterable<*>,
  expirationTime: ExpirationTime,
): Fiber | null {
  // This is the same implementation as reconcileChildrenArray(),
  // but using the iterator instead.
  
  // 获取 iteratorFn
  const iteratorFn = getIteratorFn(newChildrenIterable);
  invariant(
    typeof iteratorFn === 'function',
    'An object is not an iterable. This error is likely caused by a bug in ' +
      'React. Please file an issue.',
  );

  if (__DEV__) {
    // We don't support rendering Generators because it's a mutation.
    // See https://github.com/facebook/react/issues/12995
    if (
      typeof Symbol === 'function' &&
      // $FlowFixMe Flow doesn't know about toStringTag
      newChildrenIterable[Symbol.toStringTag] === 'Generator'
    ) {
      warning(
        didWarnAboutGenerators,
        'Using Generators as children is unsupported and will likely yield ' +
          'unexpected results because enumerating a generator mutates it. ' +
          'You may convert it to an array with `Array.from()` or the ' +
          '`[...spread]` operator before rendering. Keep in mind ' +
          'you might need to polyfill these features for older browsers.',
      );
      didWarnAboutGenerators = true;
    }

    // Warn about using Maps as children
    if ((newChildrenIterable: any).entries === iteratorFn) {
      warning(
        didWarnAboutMaps,
        'Using Maps as children is unsupported and will likely yield ' +
          'unexpected results. Convert it to a sequence/iterable of keyed ' +
          'ReactElements instead.',
      );
      didWarnAboutMaps = true;
    }

    // First, validate keys.
    // We'll get a different iterator later for the main pass.
    // 获取 newChildren,这里 newChildrenIterable 是具有 迭代特性的 children
    const newChildren = iteratorFn.call(newChildrenIterable);
    if (newChildren) {
      let knownKeys = null;
      let step = newChildren.next();
      for (; !step.done; step = newChildren.next()) {
        const child = step.value;
        knownKeys = warnOnInvalidKey(child, knownKeys);
      }
    }
  }

  const newChildren = iteratorFn.call(newChildrenIterable);
  invariant(newChildren != null, 'An iterable object provided no iterator.');

  // 声明很多变量
  let resultingFirstChild: Fiber | null = null;
  let previousNewFiber: Fiber | null = null;

  let oldFiber = currentFirstChild;
  let lastPlacedIndex = 0;
  let newIdx = 0;
  let nextOldFiber = null;
  
  // 通过 next 向下获取新节点
  let step = newChildren.next();
  // 这个 for 循环的判断是基于迭代器的,当遍历结束 .done 返回的是 false
  // step 都是 next,在 Fiber 中的key 如果不存在,使用 index
  // 这里也要模拟一个 index 出来
  for (
    ;
    oldFiber !== null && !step.done;
    newIdx++, step = newChildren.next()
  ) {
    if (oldFiber.index > newIdx) {
      nextOldFiber = oldFiber;
      oldFiber = null;
    } else {
      nextOldFiber = oldFiber.sibling;
    }
    const newFiber = updateSlot(
      returnFiber,
      oldFiber,
      step.value,
      expirationTime,
    );
    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) {
        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);
      }
    }
    lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
    if (previousNewFiber === null) {
      // TODO: Move out of the loop. This only happens for the first run.
      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 (step.done) {
    // We've reached the end of the new children. We can delete the rest.
    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.
    for (; !step.done; newIdx++, step = newChildren.next()) {
      const newFiber = createChild(returnFiber, step.value, expirationTime);
      if (newFiber === null) {
        continue;
      }
      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.
  const existingChildren = mapRemainingChildren(returnFiber, oldFiber);

  // Keep scanning and use the map to restore deleted items as moves.
  for (; !step.done; newIdx++, step = newChildren.next()) {
    const newFiber = updateFromMap(
      existingChildren,
      returnFiber,
      newIdx,
      step.value,
      expirationTime,
    );
    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.
          existingChildren.delete(
            newFiber.key === null ? newIdx : newFiber.key,
          );
        }
      }
      lastPlacedIndex = placeChild(newFiber, lastPlacedIndex, newIdx);
      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.
    existingChildren.forEach(child => deleteChild(returnFiber, child));
  }

  return resultingFirstChild;
}
  • 这个 reconcileChildIterator 方法和上面的 reconcileChildrenArray 基本一致
  • 就是判断条件不同,不再赘述
  • 上述两个 API 是 对可遍历的 children 调和的一个过程
  • 目的是尽量的复用可复用的 fiber 节点
  • 减少对象声明和内存回收的过程

你可能感兴趣的:(React,React,Native,react.js,前端,前端框架)