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 ""

扫码添加Jokcy，更多更新更优质的前端学习内容不断更新中，期待与你一起成长！