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
相关推荐
Python私教2 小时前
yggjs_rlayout框架v0.1.2使用教程 02 TechLayout 布局组件
react.js
盛夏绽放6 小时前
jQuery 知识点复习总览
前端·javascript·jquery
胡gh8 小时前
依旧性能优化,如何在浅比较上做文章,memo 满天飞,谁在裸奔?
前端·react.js·面试
大怪v9 小时前
超赞👍!优秀前端佬的电子布洛芬技术网站!
前端·javascript·vue.js
胡gh9 小时前
你一般用哪些状态管理库?别担心,Zustand和Redux就能说个10分钟
前端·面试·node.js
项目題供诗9 小时前
React学习(十二)
javascript·学习·react.js
roamingcode10 小时前
Claude Code NPM 包发布命令
前端·npm·node.js·claude·自定义指令·claude code
码哥DFS10 小时前
NPM模块化总结
前端·javascript
灵感__idea11 小时前
JavaScript高级程序设计(第5版):代码整洁之道
前端·javascript·程序员
唐璜Taro11 小时前
electron进程间通信-IPC通信注册机制
前端·javascript·electron