React16源码: React中的reconcileChildren的源码实现-Toy模板网

这篇具有很好参考价值的文章主要介绍了React16源码: React中的reconcileChildren的源码实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

reconcileChildren

1 ）概述

在更新了一个节点之后，拿到它的props.children
要根据这个children里面的 ReactElement 来去创建子树的所有的 fiber 对象
要根据 props.children 来生成 fiber 子树，然后判断 fiber 对象它是否是可以复用的
- 因为我们在第一次渲染的时候，就已经渲染了整个 fiber 子树
- 再有一个更新进来之后，state 变化可能会导致一些子节点产生一个新的变化
- 可能就不能复用之前的 fiber 节点了，它里面的很多东西都变得不一样
- 大部分情况下所有 fiber 节点都是可以可以重复利用的
- 这个时候我们根据什么进行判断，是这里面的一个非常重要的一个点
在这里就会拿出react当中的非常重要的key，列表根据key来优化

2 ）源码

在 packages/react-reconciler/src/ReactFiberBeginWork.js#L137 中

export function reconcileChildren(
  current: Fiber | null,
  workInProgress: Fiber,
  nextChildren: any,
  renderExpirationTime: ExpirationTime,
) {
  if (current === null) {
    // 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,
      renderExpirationTime,
    );
  } 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,
      renderExpirationTime,
    );
  }
}

可见，根据 current 是否为 null 调用两个方法: mountChildFibers, reconcileChildFibers
- 两个方法的区别，在第二个参数
- 在前者方法中传递的是 null, 因为第一次渲染，不存在 current.child
- 因为第一次渲染的时候，都是父亲节点先渲染，子节点后渲染
- 只有在后续的渲染过程当中，已经过第一次渲染了我们的父节点
- 这个时候才有一个子节点存在，所以这是一个区别
- 在 react-reconciler/src/ReactFiberBeginWork.js 中的 reconcileChildren 调用这个 reconcileChildFibers

看一下这两个方法，它们来自于 ReactChildFiber.js

export const reconcileChildFibers = ChildReconciler(true);
export const mountChildFibers = ChildReconciler(false);

可见，上述两个方法的区别是参数的 true 和 false
- 这个参数的意思是: 表示是否要跟踪副作用
进入 ChildReconciler，这个方法 1k 多行，这里不去全部摘抄
用到哪里，逐个分析

整体框架

// 参数 shouldTrackSideEffects 表示是否要跟踪副作用
function ChildReconciler(shouldTrackSideEffects) {
  // ... 跳过很多代码

  // This API will tag the children with the side-effect of the reconciliation
  // itself. They will be added to the side-effect list as we pass through the
  // children and the parent.
  function reconcileChildFibers(
    returnFiber: Fiber,
    currentFirstChild: Fiber | null,
    newChild: any,
    expirationTime: ExpirationTime,
  ): Fiber | null {
    // 省略很多代码
    // Remaining cases are all treated as empty.
    return deleteRemainingChildren(returnFiber, currentFirstChild);
  }

  return reconcileChildFibers;
}

在 ChildReconciler 方法的最后, return reconcileChildFibers;，先看下这个方法

// This API will tag the children with the side-effect of the reconciliation
// itself. They will be added to the side-effect list as we pass through the
// children and the parent.
function reconcileChildFibers(
  returnFiber: Fiber,
  currentFirstChild: Fiber | null,
  newChild: any,
  expirationTime: ExpirationTime,
): 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.

  // newChild 是计算出来的 新children
  // 这个节点是一个 top level 的节点，因为 <></> 这种类型会匹配 REACT_FRAGMENT_TYPE
  // 符合以下就是没有key的 topLevel节点
  const isUnkeyedTopLevelFragment =
    typeof newChild === 'object' &&
    newChild !== null &&
    newChild.type === REACT_FRAGMENT_TYPE &&
    newChild.key === null;
  // 如果匹配了，那么 Fragment 是没有任何的操作更新的, 本身并没有什么实际的意义
  // 如果匹配了，则将newChild赋值
  if (isUnkeyedTopLevelFragment) {
    newChild = newChild.props.children;
  }

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

  // 如果是对象，说明有下面两种情况
  // 下面两种方法调用相似，都是基于 placeSingleChild 传递不同参数
  // 一个是 reconcileSingleElement
  // 另一个是 reconcileSinglePortal
  if (isObject) {
    switch (newChild.$$typeof) {
      // 匹配 REACT_ELEMENT，是通过 React.createElement 产生的
      case REACT_ELEMENT_TYPE:
        return placeSingleChild(
          reconcileSingleElement(
            returnFiber,
            currentFirstChild,
            newChild,
            expirationTime,
          ),
        );
      // 匹配 REACT_PORTAL, 是通过 ReactDOM.createPortal
      case REACT_PORTAL_TYPE:
        return placeSingleChild(
          reconcileSinglePortal(
            returnFiber,
            currentFirstChild,
            newChild,
            expirationTime,
          ),
        );
    }
  }

  // 匹配到 string 和 number 类就是 text类型的Node
  if (typeof newChild === 'string' || typeof newChild === 'number') {
    return placeSingleChild(
      reconcileSingleTextNode(
        returnFiber,
        currentFirstChild,
        '' + newChild,
        expirationTime,
      ),
    );
  }

  // 匹配到数组
  if (isArray(newChild)) {
    return reconcileChildrenArray(
      returnFiber,
      currentFirstChild,
      newChild,
      expirationTime,
    );
  }
  
  // 匹配到可迭代的对象
  if (getIteratorFn(newChild)) {
    return reconcileChildrenIterator(
      returnFiber,
      currentFirstChild,
      newChild,
      expirationTime,
    );
  }

  // 以上都没有匹配，但仍然是对象，则 throw error
  if (isObject) {
    throwOnInvalidObjectType(returnFiber, newChild);
  }

  // 忽略 DEV
  if (__DEV__) {
    if (typeof newChild === 'function') {
      warnOnFunctionType();
    }
  }

  // 匹配到 undefined 的对象
  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) {
      // 匹配到 ClassComponent 忽略
      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
      // 匹配到 FunctionComponent 提醒
      case FunctionComponent: {
        const Component = returnFiber.type;
        invariant(
          false,
          '%s(...): Nothing was returned from render. This usually means a ' +
            'return statement is missing. Or, to render nothing, ' +
            'return null.',
          Component.displayName || Component.name || 'Component',
        );
      }
    }
  }

  // Remaining cases are all treated as empty.
  // 以上都不符合，则 是 null, 删除现有所有 children
  // 新的 props.children 都是 null, 老的 props 节点都应该被删除
  return deleteRemainingChildren(returnFiber, currentFirstChild);
}

接下来看不同节点的更新 reconcileSingleElement

// 从当前已有的所有子节点中，找到一个可以复用新的子节点的Fiber对象
// 复用它之后，把剩下兄弟节点全部删掉
function reconcileSingleElement(
  returnFiber: Fiber,
  currentFirstChild: Fiber | null, // 是当前已有的fiber节点，初次渲染没有，后续渲染后很可能存在
  element: ReactElement,
  expirationTime: ExpirationTime,
): Fiber {
  // 获取 key 和 child
  const key = element.key;
  let child = currentFirstChild;
  // child 存在
  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 === Fragment
          ? element.type === REACT_FRAGMENT_TYPE // 是否是 frament
          : child.elementType === element.type // 新老 element type
      ) {
        // 删除 已存在当前节点的兄弟节点
        // 为何要删除兄弟节点，因为我们这次渲染只有一个节点，老的节点有兄弟节点，新的节点只有一个，删除之
        deleteRemainingChildren(returnFiber, child.sibling);
        const existing = useFiber(
          child,
          element.type === REACT_FRAGMENT_TYPE
            ? element.props.children
            : element.props,
          expirationTime,
        );
        // 挂载属性
        existing.ref = coerceRef(returnFiber, child, element);
        existing.return = returnFiber;
        if (__DEV__) {
          existing._debugSource = element._source;
          existing._debugOwner = element._owner;
        }
        // 找到可复用节点，直接return
        return existing;
      } else {
        // 条件不符合，删除节点并退出 
        deleteRemainingChildren(returnFiber, child);
        break;
      }
    } else {
      // key 不同，则删除
      deleteChild(returnFiber, child);
    }
    // 当前兄弟节点 等于 child 再次进入while循环
    child = child.sibling;
  }
  // 创建新的节点, 基于各种不同的类型，调用不同的创建 Fiber的方式
  if (element.type === REACT_FRAGMENT_TYPE) {
    const created = createFiberFromFragment(
      element.props.children, // 注意这个参数
      returnFiber.mode,
      expirationTime,
      element.key,
    );
    created.return = returnFiber;
    return created;
  } else {
    const created = createFiberFromElement(
      element,
      returnFiber.mode,
      expirationTime,
    );
    created.ref = coerceRef(returnFiber, currentFirstChild, element);
    created.return = returnFiber;
    return created;
  }
}

进入 createFiberFromFragment

export function createFiberFromFragment(
  elements: ReactFragment,
  mode: TypeOfMode,
  expirationTime: ExpirationTime,
  key: null | string,
): Fiber {
  const fiber = createFiber(Fragment, elements, key, mode);
  fiber.expirationTime = expirationTime;
  return fiber;
}

// This is a constructor function, rather than a POJO constructor, still
// please ensure we do the following:
// 1) Nobody should add any instance methods on this. Instance methods can be
//    more difficult to predict when they get optimized and they are almost
//    never inlined properly in static compilers.
// 2) Nobody should rely on `instanceof Fiber` for type testing. We should
//    always know when it is a fiber.
// 3) We might want to experiment with using numeric keys since they are easier
//    to optimize in a non-JIT environment.
// 4) We can easily go from a constructor to a createFiber object literal if that
//    is faster.
// 5) It should be easy to port this to a C struct and keep a C implementation
//    compatible.
const createFiber = function(
  tag: WorkTag,
  pendingProps: mixed, // 对于 fragment来说，props只有children, 直接把children作为props
  key: null | string,
  mode: TypeOfMode,
): Fiber {
  // $FlowFixMe: the shapes are exact here but Flow doesn't like constructors
  return new FiberNode(tag, pendingProps, key, mode);
};

以上的 fragment 可以在 ReactFiberBeginWork.js 中的 updateFragment 方法中找到验证

function updateFragment(
  current: Fiber | null,
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
) {
  // 看这里，直接通过 .pendingProps 而非 props.children 获取，参考上述 createFiber 写明原因
  const nextChildren = workInProgress.pendingProps;
  reconcileChildren(
    current,
    workInProgress,
    nextChildren,
    renderExpirationTime,
  );
  return workInProgress.child;
}

进入 createFiberFromElement

export function createFiberFromElement(
  element: ReactElement,
  mode: TypeOfMode,
  expirationTime: ExpirationTime,
): Fiber {
  let owner = null;
  if (__DEV__) {
    owner = element._owner;
  }
  // 获取各类属性
  const type = element.type;
  const key = element.key;
  const pendingProps = element.props;
  // 创建 Fiber
  const fiber = createFiberFromTypeAndProps(
    type,
    key,
    pendingProps,
    owner,
    mode,
    expirationTime,
  );
  if (__DEV__) {
    fiber._debugSource = element._source;
    fiber._debugOwner = element._owner;
  }
  return fiber;
}

进入 createFiberFromTypeAndProps

// 这个方法比较复杂，要判断不同的 type 给 fiber 对象增加 不同的 tag
// 主要是去匹配 fiberTag
export function createFiberFromTypeAndProps(
  type: any, // React$ElementType
  key: null | string,
  pendingProps: any,
  owner: null | Fiber,
  mode: TypeOfMode,
  expirationTime: ExpirationTime,
): Fiber {
  let fiber;
  // 组件tag未知时的初始化配置 未指定状态
  let fiberTag = IndeterminateComponent;
  // The resolved type is set if we know what the final type will be. I.e. it's not lazy.
  let resolvedType = type;
  // 根据不同类型来处理 fiberTag
  if (typeof type === 'function') {
    // 判断是否有 constructor 方法
    /*
    function shouldConstruct(Component: Function) {
      const prototype = Component.prototype;
      // 注意，这里 isReactComponent 是一个 {}
      return !!(prototype && prototype.isReactComponent);
    }
    */
    if (shouldConstruct(type)) {
      fiberTag = ClassComponent;
    }
  } else if (typeof type === 'string') {
    fiberTag = HostComponent;
  } else {
    getTag: switch (type) {
      case REACT_FRAGMENT_TYPE:
        return createFiberFromFragment(
          pendingProps.children,
          mode,
          expirationTime,
          key,
        );
      case REACT_CONCURRENT_MODE_TYPE:
        return createFiberFromMode(
          pendingProps,
          mode | ConcurrentMode | StrictMode,
          expirationTime,
          key,
        );
      case REACT_STRICT_MODE_TYPE:
        return createFiberFromMode(
          pendingProps,
          mode | StrictMode,
          expirationTime,
          key,
        );
      case REACT_PROFILER_TYPE:
        return createFiberFromProfiler(pendingProps, mode, expirationTime, key);
      case REACT_SUSPENSE_TYPE:
        return createFiberFromSuspense(pendingProps, mode, expirationTime, key);
      default: {
        if (typeof type === 'object' && type !== null) {
          switch (type.$$typeof) {
            case REACT_PROVIDER_TYPE:
              fiberTag = ContextProvider;
              break getTag;
            case REACT_CONTEXT_TYPE:
              // This is a consumer
              fiberTag = ContextConsumer;
              break getTag;
            case REACT_FORWARD_REF_TYPE:
              fiberTag = ForwardRef;
              break getTag;
            case REACT_MEMO_TYPE:
              fiberTag = MemoComponent;
              break getTag;
            case REACT_LAZY_TYPE:
              fiberTag = LazyComponent;
              resolvedType = null;
              break getTag;
          }
        }
        let info = '';
        if (__DEV__) {
          if (
            type === undefined ||
            (typeof type === 'object' &&
              type !== null &&
              Object.keys(type).length === 0)
          ) {
            info +=
              ' You likely forgot to export your component from the file ' +
              "it's defined in, or you might have mixed up default and " +
              'named imports.';
          }
          const ownerName = owner ? getComponentName(owner.type) : null;
          if (ownerName) {
            info += '\n\nCheck the render method of `' + ownerName + '`.';
          }
        }
        invariant(
          false,
          'Element type is invalid: expected a string (for built-in ' +
            'components) or a class/function (for composite components) ' +
            'but got: %s.%s',
          type == null ? type : typeof type,
          info,
        );
      }
    }
  }
  // 最终创建 Fiber
  fiber = createFiber(fiberTag, pendingProps, key, mode);
  fiber.elementType = type;
  fiber.type = resolvedType;
  fiber.expirationTime = expirationTime;

  return fiber;
}

以上，reconcileSingleElement 就完了

进入 reconcileSingleTextNode

function reconcileSingleTextNode(
  returnFiber: Fiber,
  currentFirstChild: Fiber | null,
  textContent: string,
  expirationTime: ExpirationTime,
): 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);
    // 基于 useFiber 复用当前节点
    const existing = useFiber(currentFirstChild, textContent, expirationTime);
    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,
    expirationTime,
  );
  created.return = returnFiber;
  return created;
}

这个流程就比较简单了

现在我们主要看下 deleteRemainingChildren 这个api

function deleteRemainingChildren(
  returnFiber: Fiber, // 当前正在更新的节点
  currentFirstChild: Fiber | null, // 子节点
): null {
  // 这是第一次渲染的时候，没有子节点
  // 直接 return
  if (!shouldTrackSideEffects) {
    // Noop.
    return null;
  }

  // TODO: For the shouldClone case, this could be micro-optimized a bit by
  // assuming that after the first child we've already added everything.
  // 一个个的删除
  let childToDelete = currentFirstChild;
  while (childToDelete !== null) {
    deleteChild(returnFiber, childToDelete);
    childToDelete = childToDelete.sibling;
  }
  return null;
}

进入 deleteChild

// 可以看到这里没有实施删除的操作，只是改变了节点上的 effectTag
// 这里我们只更新 Fiber Tree, 如果真的要 delete 就会影响到 dom节点
// 所以删除的流程不在这里做，只有在下个阶段，也就是 commit 阶段来做
// 就是把Fiber Tree 需要更新的流程都过一遍之后，把整个需要更新的属性
// 通过 firstEffect，lastEffect 这种链条，最终链到根节点上面
// 最终要执行更新 只需要在 commit 阶段拿到 根节点上面的 这种链条把每个节点去执行即可
// 在处理更新的时候任务是可以中断的，但是在 commit 阶段任务是不可中断的
function deleteChild(returnFiber: Fiber, childToDelete: Fiber): void {
  if (!shouldTrackSideEffects) {
    // Noop.
    return;
  }
  // Deletions are added in reversed order so we add it to the front.
  // At this point, the return fiber's effect list is empty except for
  // deletions, so we can just append the deletion to the list. The remaining
  // effects aren't added until the complete phase. Once we implement
  // resuming, this may not be true.
  const last = returnFiber.lastEffect;
  // 存在 last
  if (last !== null) {
    last.nextEffect = childToDelete;
    returnFiber.lastEffect = childToDelete;
  } else {
    // 不存在 last
    returnFiber.firstEffect = returnFiber.lastEffect = childToDelete;
  }
  childToDelete.nextEffect = null; // 已经是要删除的节点，上面的其他副作用都是没有任何意义的
  // effectTag 就是告诉后续的 commit 阶段，对于这个节点需要执行什么操作，可以看到，这里是删除
  childToDelete.effectTag = Deletion; // 只需要设置这个即可
}