ReactDOM.render() 源码思考

https://github.com/facebook/react/blob/master/packages/react-dom/src/client/ReactDOMLegacy.js

将参数 一层层 传递,最终是对根原元素的更新。
render --return–> legacyRenderSubtreeIntoContainer --return–>getPublicRootInstance

export function render(
  element: React$Element<any>, // 要渲染的元素( string / classComponent / FunctionComponent )
  container: Container, // 根节点 root  React.Fragment
  callback: ?Function, // 渲染完成执行的回调
) {
  invariant(
    isValidContainer(container), // 判断 更节点是否有效,并返回相应的提示。
    'Target container is not a DOM element.',
  );
  return legacyRenderSubtreeIntoContainer(
    null,
    element,
    container,
    false,
    callback,
  );
}
}
function legacyRenderSubtreeIntoContainer(
  parentComponent: ?React$Component<any, any>, // null
  children: ReactNodeList, // 要渲染的元素
  container: Container, // 根节点
  forceHydrate: boolean, // false
  callback: ?Function, // 渲染完成执行的回调
) {
  // root => _reactRootContainer => _internalRoot  知道存在该属性
  let root: RootType = (container._reactRootContainer: any); // 接收根节点
  let fiberRoot;
  if (!root) {... // 根元素不存在的处理,不过一般都会有根元素。} 
  else {
    fiberRoot = root._internalRoot;
    if (typeof callback === 'function') {
      const originalCallback = callback;
      callback = function() {
        const instance = getPublicRootInstance(fiberRoot);
        originalCallback.call(instance);
      };
    }
    // Update
    updateContainer(children, fiberRoot, parentComponent, callback); // 暂时不要去关注
  }
  return getPublicRootInstance(fiberRoot);
}
export function getPublicRootInstance(
  container: OpaqueRoot, // 根元素相关对象
): React$Component<any, any> | PublicInstance | null {
  const containerFiber = container.current;
  if (!containerFiber.child) {
    return null;
  }
  switch (containerFiber.child.tag) {
    case HostComponent: // export const HostComponent = 5;
      return getPublicInstance(containerFiber.child.stateNode); // 传入啥返回啥
	 // export function getPublicInstance(instance) {
	 //     return instance;
	 // }
    default:
      return containerFiber.child.stateNode; //  当前根元素(FiberRootNode)
  }
}

细节说明

// other
    function Container({children, updates}) {
      const [step, setStep] = useState(0);
      useLayoutEffect(() => {if (updates !== undefined) {...}}, [updates]);
	  // children 为 根元素的 children => HTMLCollection
      return <React.Fragment key={step}>{children}</React.Fragment>;
    }

啥也看不到,就知道这个根元素是相关的

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值