React短文系列 遍历fiber树 App的创建

从createRoot到App节点的创建

createRoot->renderRootSync->prepareFreshStack->workLoopSync->HostRoot:updateHostRoot->reconcileChildren创建节点:FiberRootNode->HostRootFiber->App

  1. createRoot->renderRootSync->prepareFreshStack(root,lanes) 这一步创建出了FiberRootNodeHostRootFiber节点。

    a. createRoot创建了FiberRootNode

    b. prepareFreshStack根据FiberRootNode创建HostRootFiber

    c. HostRootFiberHostRootFiberNode,对应<div id="root"></div>

    d. rootFiberRootNode,root.currentHostRootFiber,复制一份赋值给rootWorkInProgress是第一个workInProgress

  2. workLoopSync->beginWork->HostRoot:updateHostRoot(current,workInProgress,)->reconcileChildren 马上进入到了workLoopSync创建出App

    a. currentwip是上面的HostRootFiber

    b. 进入到reconcileChildren,创建HostRootFiber的子节点App

js 复制代码
createRoot-renderRootSync:
  // root是fiberRootNode, tag=1
  prepareFreshStack(root, lanes)  //这一步创建tag=3,HostRoot,HostRootFiber,rootElement 的wip

  do {
    try {
      workLoopSync();  //这一步创建tag=3的子fiber,因为进入到beginWork-updateHostRoot-reconcileChildren
      break;
    } catch (thrownValue) {
      handleError(root, thrownValue);
    }
  } while (true);

prepareFreshStack:
  var rootWorkInProgress = createWorkInProgress(root.current, null);
  return rootWorkInProgress; // tag=3
createWorkInProgress:
  workInProgress.alternate = current; //创建tag=3的cur的wip
  current.alternate = workInProgress;

workLoopSync-beginWork:
case HostRoot:
      return updateHostRoot(current, workInProgress, renderLanes);
updateHostRoot:
    reconcileChildren(current, workInProgress, nextChildren, renderLanes);
reconcileChildren:
  if (current === null) {
    // 2.然后遍历到App节点进入这里创建App节点的子节点
    workInProgress.child = mountChildFibers(workInProgress, null, nextChildren, renderLanes);
  } else {
    // 1.首先HostRootFiber进入这里创建子节点App节点
    workInProgress.child = reconcileChildFibers(workInProgress, current.child, nextChildren, renderLanes);
  }
}

一些特点

  1. fiberRootNode tag=1,HostRootNode tag=3,App tag=2
  2. current节点current树当前遍历到的节点,workInProgress节点workInProgress树当前遍历到的节点。
  3. current节点wip节点通过alternate相互指向。第一次渲染,HostRootFibercurrent节点不是空的,但是App节点current节点是空的null

通常不画null,如图左所示。

  1. 创建完wip树后切换current树,图3
相关推荐
奕辰杰4 小时前
关于npm前端项目编译时栈溢出 Maximum call stack size exceeded的处理方案
前端·npm·node.js
JiaLin_Denny5 小时前
如何在NPM上发布自己的React组件(包)
前端·react.js·npm·npm包·npm发布组件·npm发布包
路光.6 小时前
触发事件,按钮loading状态,封装hooks
前端·typescript·vue3hooks
我爱996!6 小时前
SpringMVC——响应
java·服务器·前端
咔咔一顿操作7 小时前
Vue 3 入门教程7 - 状态管理工具 Pinia
前端·javascript·vue.js·vue3
kk爱闹7 小时前
用el-table实现的可编辑的动态表格组件
前端·vue.js
漂流瓶jz8 小时前
JavaScript语法树简介:AST/CST/词法/语法分析/ESTree/生成工具
前端·javascript·编译原理
换日线°8 小时前
css 不错的按钮动画
前端·css·微信小程序
风象南8 小时前
前端渲染三国杀:SSR、SPA、SSG
前端
90后的晨仔9 小时前
表单输入绑定详解:Vue 中的 v-model 实践指南
前端·vue.js