React16源码: React中的updateHostRoot的源码实现

HostRoot 的更新

1 )概述

  • HostRoot 是一个比较特殊的节点, 因为在一个react应用当中
  • 它只会有一个 HostRoot, 它对应的 Fiber 对象是我们的 RootFiber 对象
  • 重点在于它的更新过程

2 )源码

定位到 packages/react-reconciler/src/ReactFiberBeginWork.js#L612

js 复制代码
// 这个函数的重点在: update 来自哪里, 里面是什么内容
// 最终通过 processUpdateQueue 得到了 element 里面的内容,之后以此作为children来调和
function updateHostRoot(current, workInProgress, renderExpirationTime) {
  // 跳过 context 相关
  pushHostRootContext(workInProgress);
  const updateQueue = workInProgress.updateQueue;
  invariant(
    updateQueue !== null,
    'If the root does not have an updateQueue, we should have already ' +
      'bailed out. This error is likely caused by a bug in React. Please ' +
      'file an issue.',
  );
  // 获取一系列数据
  const nextProps = workInProgress.pendingProps;
  const prevState = workInProgress.memoizedState;
  // 对于 HostRoot 一开始是没有 state,也就是 `prevState.element`, 在第一次渲染的时候,prevState 是 null,在ReactDOM.render中创建了一个update
  // 经过 processUpdateQueue 这次更新后,它会拿到一个 {element} 对象作为 state
  const prevChildren = prevState !== null ? prevState.element : null;
  // 得到创建的update传递的element
  processUpdateQueue(
    workInProgress,
    updateQueue,
    nextProps,
    null,
    renderExpirationTime,
  );
  const nextState = workInProgress.memoizedState;
  // Caution: React DevTools currently depends on this property
  // being called "element".
  const nextChildren = nextState.element;
  if (nextChildren === prevChildren) {
    // If the state is the same as before, that's a bailout because we had
    // no work that expires at this time.
    resetHydrationState(); // 服务端渲染,复用dom节点相关内容
    // 跳出更新过程,不需要更新
    // 对 RootFiber来说,大部分情况下,只在 ReactDOM.render 的时候有更新,其他时候都不需要更新
    // 一般都是在App内更新,不会在RootFiber节点创建更新
    return bailoutOnAlreadyFinishedWork(
      current,
      workInProgress,
      renderExpirationTime,
    );
  }
  const root: FiberRoot = workInProgress.stateNode;
  // 跳过 hydrate 相关
  if (
    (current === null || current.child === null) &&
    root.hydrate &&
    enterHydrationState(workInProgress)
  ) {
    // If we don't have any current children this might be the first pass.
    // We always try to hydrate. If this isn't a hydration pass there won't
    // be any children to hydrate which is effectively the same thing as
    // not hydrating.

    // This is a bit of a hack. We track the host root as a placement to
    // know that we're currently in a mounting state. That way isMounted
    // works as expected. We must reset this before committing.
    // TODO: Delete this when we delete isMounted and findDOMNode.
    workInProgress.effectTag |= Placement;

    // Ensure that children mount into this root without tracking
    // side-effects. This ensures that we don't store Placement effects on
    // nodes that will be hydrated.
    // 在 current === null || current.child === null 这种情况下,都是第一次渲染
    workInProgress.child = mountChildFibers(
      workInProgress,
      null,
      nextChildren,
      renderExpirationTime,
    );
  } else {
    // Otherwise reset hydration state in case we aborted and resumed another
    // root.
    // 不是第一次渲染
    reconcileChildren(
      current,
      workInProgress,
      nextChildren,
      renderExpirationTime,
    );
    resetHydrationState();
  }
  return workInProgress.child;
}
  • HostRoot 创建更新的过程就是在 ReactFiberReconciler.js 中的调用 ReactDOM.render 的过程

  • 定位到 scheduleRootUpdate 位置在 packages/react-reconciler/src/ReactFiberReconciler.js#L110

    js 复制代码
    function scheduleRootUpdate(
      current: Fiber,
      element: ReactNodeList,
      expirationTime: ExpirationTime,
      callback: ?Function,
    ) {
      // ... 省略
      const update = createUpdate(expirationTime);
      update.payload = {element};
      // ... 省略
      return expirationTime;
    }
    • 它这里创建一个 update, 并挂在 update.payload 是 {element}
    • 这个 element 就是传给 ReactDOM.render 的第一个参数
    • 这个 update 对象没有后续指定类型
    • 这和调用 setState 在组件内创建更新效果是类似的
    • 所以,update.payload 就相当于 state
    • 对于 HostRoot 来说, 它的state只有一个属性,就是element
    • 就是 ReactDOM.render 的第一个参数
相关推荐
小周同学@30 分钟前
谈谈对this的理解
开发语言·前端·javascript
Wiktok33 分钟前
Pyside6加载本地html文件并实现与Javascript进行通信
前端·javascript·html·pyside6
一只小风华~37 分钟前
Vue:条件渲染 (Conditional Rendering)
前端·javascript·vue.js·typescript·前端框架
柯南二号39 分钟前
【大前端】前端生成二维码
前端·二维码
程序员码歌1 小时前
明年35岁了,如何破局?说说心里话
android·前端·后端
博客zhu虎康2 小时前
React Hooks 报错?一招解决useState问题
前端·javascript·react.js
灰海2 小时前
vue中通过heatmap.js实现热力图(多个热力点)热区展示(带鼠标移入弹窗)
前端·javascript·vue.js·heatmap·heatmapjs
王源骏3 小时前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码3 小时前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby3 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js