updateFragment

什么是Fragment,那就是React.Fragment。或者不知道各位有没有看过一种写法

<>
  <Child1>
  <Child2>
</>

Fragment对应Node,因为他不是一个单独的DOM节点(或者Fiber节点),而是一组片段。对于Fragment来说,他本身没什么作用,所以只需要处理其Children

reconcileChildFibers里面有这么一段代码:

const isUnkeyedTopLevelFragment =
  typeof newChild === 'object' &&
  newChild !== null &&
  newChild.type === REACT_FRAGMENT_TYPE &&
  newChild.key === null;
if (isUnkeyedTopLevelFragment) {
  newChild = newChild.props.children;
}

也就是说如果你使用Fragment并且没有给他加key,则会变成直接处理他的children

function updateFragment(current, workInProgress) {
  const nextChildren = workInProgress.pendingProps;
  if (hasLegacyContextChanged()) {
    // Normally we can bail out on props equality but if context has changed
    // we don't do the bailout and we have to reuse existing props instead.
  } else if (workInProgress.memoizedProps === nextChildren) {
    return bailoutOnAlreadyFinishedWork(current, workInProgress);
  }
  reconcileChildren(current, workInProgress, nextChildren);
  memoizeProps(workInProgress, nextChildren);
  return workInProgress.child;
}

results matching ""

    No results matching ""