React16源码: React中的PortalComponent创建, 调和, 更新的源码实现

PortalComponent

1 ）概述

React Portal之所以叫Portal，因为做的就是和"传送门"一样的事情
render到一个组件里面去，实际改变的是网页上另一处的DOM结构
主要关注 portal的创建, 调和, 更新过程

2 ）源码

定位到 packages/react-dom/src/client/ReactDOM.js#L576

js 复制代码

function createPortal(
  children: ReactNodeList,
  container: DOMContainer,
  key: ?string = null,
) {
  invariant(
    isValidContainer(container),
    'Target container is not a DOM element.',
  );
  // TODO: pass ReactDOM portal implementation as third argument
  return ReactPortal.createPortal(children, container, null, key);
}

这里调用的是 ReactPortal.createPortal, 进入

js 复制代码

// packages/shared/ReactPortal.js#L14
export function createPortal(
  children: ReactNodeList,
  containerInfo: any,
  // TODO: figure out the API for cross-renderer implementation.
  implementation: any,
  key: ?string = null,
): ReactPortal {
  return {
    // This tag allow us to uniquely identify this as a React Portal
    $$typeof: REACT_PORTAL_TYPE,
    key: key == null ? null : '' + key,
    children,
    containerInfo, // dom 挂载节点
    implementation,
  };
}

这里返回一个对象，类似于 ReactElement
区别在于 $$typeof 和 containerInfo 需要的挂载点

对于 REACT_PORTAL_TYPE 类型的组件在 reconcile 时, 看下具体操作, 找到 reconcileSinglePortal

js 复制代码

// packages/react-reconciler/src/ReactChildFiber.js#L1171
function reconcileSinglePortal(
  returnFiber: Fiber,
  currentFirstChild: Fiber | null,
  portal: ReactPortal,
  expirationTime: ExpirationTime,
): Fiber {
  const key = portal.key; // 当前的 key
  let child = currentFirstChild;
  // 如果 存在 child, 对比 child.key === key
  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) {
      // 关注这里，有 containerInfo 的对比，portal 需要关心渲染到的节点是否有变化
      // 如果节点有变化，那么这个 portal 的渲染过程也会有变化
      // 都符合，说明老节点都可以复用
      if (
        child.tag === HostPortal &&
        child.stateNode.containerInfo === portal.containerInfo &&
        child.stateNode.implementation === portal.implementation
      ) {
        deleteRemainingChildren(returnFiber, child.sibling); // 删除其他节点
        // 通过 useFiber 复用这个节点
        const existing = useFiber(
          child,
          portal.children || [],
          expirationTime,
        );
        existing.return = returnFiber;
        return existing;
      } else {
        // key相同，但是不符合上述if, 没法复用，删除干净
        deleteRemainingChildren(returnFiber, child);
        break;
      }
    } else {
      // key 不同，删除当前节点
      deleteChild(returnFiber, child);
    }
    child = child.sibling;
  }

  // 创建一个 portal 的 fiber 对象
  const created = createFiberFromPortal(
    portal,
    returnFiber.mode,
    expirationTime,
  );
  created.return = returnFiber;
  return created;
}

对于更新一个portal节点，进入 updatePortalComponent

js 复制代码

// packages/react-reconciler/src/ReactFiberBeginWork.js#L1322
function updatePortalComponent(
  current: Fiber | null,
  workInProgress: Fiber,
  renderExpirationTime: ExpirationTime,
) {
  // 挂载点处理
  pushHostContainer(workInProgress, workInProgress.stateNode.containerInfo);
  const nextChildren = workInProgress.pendingProps; // 这里 pendingProps 是 children
  if (current === null) {
    // Portals are special because we don't append the children during mount
    // but at commit. Therefore we need to track insertions which the normal
    // flow doesn't do during mount. This doesn't happen at the root because
    // the root always starts with a "current" with a null child.
    // TODO: Consider unifying this with how the root works.
    workInProgress.child = reconcileChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderExpirationTime,
    );
  } else {
    reconcileChildren(
      current,
      workInProgress,
      nextChildren,
      renderExpirationTime,
    );
  }
  return workInProgress.child;
}

之前梳理过的 API 不再赘述
一些API的调用，在源码的注释中