不只是mini-react第二节：实现最简fiber

省流|总结

首先，我们编写JSX文件，并通过Babel等转换工具将其转化为createElement()函数的调用，最终生成虚拟 DOM（Vdom）格式。举个例子：

// 原始 JSX
const App = <div>hi-mini-react</div>;

// Babel 编译后
const App = React.createElement(
  "div",
  null,
  "hi-mini-react"
);

// createElement 返回的虚拟 DOM 结构
const App = {
  type: "div",
  props: {
    children: ["hi-mini-react"]
  }
};

接下来，将转换后的虚拟 DOM 格式传入render函数，启动fiber流程，调用代码如下：

ReactDOM.createRoot(document.querySelector("#root")).render(App);

这段代码的作用是将整个App组件渲染到root容器中。

然后，fiber流程启动。render函数接收传入的虚拟 DOM，并构建root fiber节点，即fiber树的根节点，也是第一个工作单元nextWorkOfUnit。此时，fiber树中仅包含根节点的真实 DOM 引用（容器），其他节点尚未创建。root fiber节点具有如下特点：

  • 它的dom属性指向容器节点
  • 它的props.children包含整个应用的虚拟 DOM 结构
  • 它是整个fiber树的起点
nextWorkOfUnit = {
  dom: container,  // 真实 DOM 元素
  props: {
    children: [el],  // el 是传入的 App 虚拟 DOM
  },
};

接下来，启用workLoop任务调度系统。该系统通过requestIdleCallback在浏览器空闲时执行任务。当检测到剩余时间不足（小于 1ms）时，系统会主动让出主线程，从而实现任务的分片处理。

每次workLoop循环都会调用performWorkOfUnit，确保每次只处理一个fiber节点，实现任务的分片执行，这些任务可以随时中断与恢复。如果当前fiber节点的真实 DOM 引用不存在，performWorkOfUnit会在此fiber节点上添加dom引用，并将该fiber节点指向父级fiber节点，同时将其真实 DOM 引用传递给父级节点，形成如下结构：

//可视化展示
fiber节点                 真实DOM节点
┌─────────┐               ┌─────────┐
│div1 fiber│    dom引用    │  <div>  │
├─────────┤ ────────────► ├─────────┤
│parent   │               │         │
│dom      │               │         │
└─────────┘               └─────────┘
     ▲                         ▲
     │                         │
     │ parent                  │ append(h1)
     │                         │
┌─────────┐               ┌─────────┐
│h1 fiber │    dom引用    │  <h1>   │
├─────────┤ ────────────► ├─────────┤
│parent   │               │         │
│dom      │               │         │
└─────────┘               └─────────┘

//具体代码
 const dom = (fiber.dom = createDom(fiber.type));
 fiber.parent.dom.append(dom);

接着，performWorkOfUnit会调用两个函数：

  • updateProps：读取fiber节点中的虚拟 DOM 属性，并将其应用到对应的真实 DOM 上。
  • initChildren：将当前fiber节点传入，通过深度优先遍历的方式，将当前树形结构的fiber节点转化为链表结构。这样，大的fiber节点被拆分成一个个小的fiber节点，最终形成自上而下的树形结构。这种方式将整个渲染过程分割成一个个小任务，每个任务处理一个节点，从而实现任务的分片，避免了长任务阻塞主线程。

最后，遍历由initChildren构建的链表结构。需要注意的是，这里并不是先遍历再执行，而是边遍历边执行。

最简任务调度器workLoop（时间分片）

  1. 首次调用requestIdleCallback(workLoop)，浏览器会在空闲时执行workLoop函数。
  2. workLoop函数会执行任务，并在每次执行任务时检查剩余空闲时间。
  3. 如果空闲时间不足 1 毫秒（timeRemaining() < 1），shouldYield会被设置为true，从而暂停当前任务。
  4. 然后，requestIdleCallback(workLoop)会被调用来请求下一次空闲时间，从而在下次空闲时继续执行未完成的任务。
  5. 每次任务执行时，taskId都会递增，用于标记任务的顺序。

什么是下次空闲时？这里的下次空闲时是指当前可能有高优先级任务需要处理，那么浏览器会暂停当前相对低优先级的任务而去处理这个高优先级任务，等这个高优先级任务处理完成后再回过头来执行低优先级任务，这就是时间分片。

let taskId = 1;
function workLoop(deadline) {
  taskId++;

  let shouldYield = false;
  while (!shouldYield) {
    // run task
    console.log(`taskId:${taskId} run task`);
    // dom

    shouldYield = deadline.timeRemaining() < 1;
  }

  requestIdleCallback(workLoop);// 再次调用
}

requestIdleCallback(workLoop);//首次调用

实现最简fiber

执行顺序：

jsx→babel等工具编译→createElement()→render()→workLoop()→performWorkOfUnit()→initChildren()→树形结构转链表结构

1.通过createElement创建虚拟DOM树

createElement函数负责创建一个虚拟 DOM 对象。它的参数包括：type（元素类型，如div、span等），props（元素属性），children（元素的子节点）。在 React 中，children的处理方式非常重要，因为它决定了如何渲染子元素。createElement会递归处理children，如果children是文本节点，则直接将其转换为文本节点。如果是其他 React 元素或组件，它会再次调用createElement来生成对应的虚拟 DOM。

// 1. 首先通过createElement创建React元素
function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map((child) => {
        // 如果子元素是字符串，则创建文本节点
        return typeof child === "string" ? createTextNode(child) : child;
      }),
    },
  };
}
2.调用render函数，设置工作单元（fiber节点）nextWorkOfUnit

由前一节博客可以知道：

el为编写的jsx文件

container为传入的真实dom节点（在这里是root节点）

render函数是 React 渲染流程的起点。它会将传入的虚拟 DOM（el）渲染到指定的容器（container）中。在这个过程中，React 会为每个虚拟 DOM 元素创建一个 fiber 对象，并构建一个 fiber 树。每个 fiber 节点包含对应的 DOM 元素、props、children等信息。这样 React 就能根据这个 fiber 树来管理和更新实际的 DOM。

// 2. 调用render函数开始渲染
function render(el, container) {
  // 创建第一个工作单元（root fiber）
  nextWorkOfUnit = {
    dom: container,//传入的真实root节点
    //虚拟dom元素
    props: {
      children: [el],
    },
  };
}
3.工作循环workLoop启动

workLoop是 React 渲染任务的调度器。它会根据浏览器的空闲时间进行任务调度，并决定什么时候更新哪些 fiber 节点。当浏览器空闲时，workLoop会通过requestIdleCallback触发任务执行。如果当前任务无法在空闲时间内完成，workLoop会暂停任务，等待下一次空闲时间。通过这种异步调度方式，React 可以避免阻塞主线程，确保渲染操作的流畅性。

// 3. 程序启动时就开始监听空闲时间
let nextWorkOfUnit = null;
function workLoop(deadline) {
  // deadline对象包含：
  // timeRemaining(): 返回当前空闲期剩余的毫秒数
  // didTimeout: 表示任务是否超时
  let shouldYield = false;
  while (!shouldYield && nextWorkOfUnit) {
    // 1. 条件判断：
    // - 是否需要让出主线程（shouldYield）
    // - 是否还有工作要做（nextWorkOfUnit）
    
    // 2. 处理当前工作单元并重新分配工作单元
    nextWorkOfUnit = performWorkOfUnit(nextWorkOfUnit);
    
    // 3. 检查是否需要让出主线程
    shouldYield = deadline.timeRemaining() < 1;
  }
  // 4. 无论是否完成所有工作，都继续监听下一个空闲时间
  requestIdleCallback(workLoop);
}
4.performWorkOfUnit重新分配工作单元

performWorkOfUnit是处理每个 fiber 节点的函数。在执行过程中，它会根据虚拟 DOM 的type和props更新实际 DOM。当 fiber 节点包含子节点时，performWorkOfUnit会递归处理子节点。每处理完一个节点，performWorkOfUnit会返回该节点的下一个待处理工作单元，从而继续构建 DOM 树。

function performWorkOfUnit(fiber) {
  // 4 如果没有DOM节点，创建DOM
  if (!fiber.dom) {
    const dom = (fiber.dom = createDom(fiber.type));
    fiber.parent.dom.append(dom);
    //5 属性协调
    updateProps(dom, fiber.props);
  }
//---------------------------------------只关注前面即可
  // 6 处理子节点，构建fiber树
  initChildren(fiber)

  // 7 返回下一个工作单元，按照以下优先级：
  // 先找子节点
  if (fiber.child) {
    return fiber.child;
  }
  // 没有子节点找兄弟节点
  if (fiber.sibling) {
    return fiber.sibling;
  }
  // 都没有就回到父节点的兄弟节点
  return fiber.parent?.sibling;
}
5.updateProps 属性协调

updateProps 函数的核心目的是将 React 元素的属性（props）设置到实际的 DOM 节点上，而这里传入的dom实际上就是fiber.dom

function updateProps(dom, props) {
  Object.keys(props).forEach((key) => {
    if (key !== "children") {
      dom[key] = props[key];
    }
  });
}

举个简单的例子：

// 假设我们写了这样一个React元素
<div className="box" id="main">Hello</div>

// React会将其转换为这样的对象
{
  type: 'div',
  props: {
    className: 'box',
    id: 'main',
    children: ['Hello']
  }
}

// 然后在performWorkOfUnit中：
// 1. 首先创建DOM节点
const dom = document.createElement('div')  // <div></div>

// 2. 调用updateProps设置属性
updateProps(dom, props)  
// 结果：<div class="box" id="main"></div>

可视化展示：

   React元素的属性      →     真实DOM节点的属性
    {                           <div
      className: 'box'    →       class="box"
      id: 'main'         →       id="main"
      children: [...]            >
    }                           </div>
  
  
   React属性世界           DOM属性世界
   ┌──────────┐          ┌──────────┐
   │  props   │   ═══>   │   DOM    │
   └──────────┘          └──────────┘
        │                      │
   className: 'box'       class="box"
   onClick: fn         addEventListener
6.initChildren子节点处理

initChildren函数的任务是初始化虚拟 DOM 中的子节点。它会遍历子节点，并为每个子节点创建一个新的 fiber 节点。每个新创建的 fiber 节点将被添加到父节点的children数组中，从而形成树形结构。React 会继续递归处理每个子节点，直到所有子节点都被处理为止。

function initChildren(fiber) {
  const children = fiber.props.children;
  let prevChild = null;
  // 遍历所有子节点，建立fiber链接关系
  children.forEach((child, index) => {
    const newFiber = {
      type: child.type,
      props: child.props,
      child: null,//子级
      parent: fiber,//父级
      sibling: null,//兄弟级
      dom: null,
    };

    // 第一个子节点设为child
    if (index === 0) {
      fiber.child = newFiber;
    } else {
      // 其他子节点设为上一个节点的sibling
      prevChild.sibling = newFiber;
    }
    prevChild = newFiber;
  });
}
7.performWorkOfUnit将树形结构通过深度遍历转化为链表结构

在performWorkOfUnit函数中，React 通过深度优先遍历将树形结构转化为链表结构。这种链表结构可以帮助 React 更高效地遍历并更新每个节点。每个 fiber 节点不仅包含当前节点的信息，还持有对父节点、兄弟节点的引用，这使得 React 可以灵活地在渲染过程中调整工作单元。

function performWorkOfUnit(fiber) {
  // ... 前面的代码省略 ...

  // 这三行代码决定了下一个工作单元，实际上就是在构建链表
  if (fiber.child) {
    return fiber.child;      // 1️⃣ 优先返回子节点
  }
  if (fiber.sibling) {
    return fiber.sibling;    // 2️⃣ 没有子节点就返回兄弟节点
  }
  return fiber.parent?.sibling;  // 3️⃣ 都没有就返回父节点的兄弟节点
}

源代码

// 创建文本节点
function createTextNode(text) {
  console.log("heiheihei!!!!!!!");
  return {
    type: "TEXT_ELEMENT",
    props: {
      nodeValue: text,
      children: [],
    },
  };
}

// 创建React元素
// type: 元素类型
// props: 元素属性
// children: 子元素
function createElement(type, props, ...children) {
  return {
    type,
    props: {
      ...props,
      children: children.map((child) => {
        return typeof child === "string" ? createTextNode(child) : child;
      }),
    },
  };
}

// 渲染函数：将React元素渲染到容器中
function render(el, container) {
  nextWorkOfUnit = {
    dom: container,
    props: {
      children: [el],
    },
  };
}

// 下一个工作单元
let nextWorkOfUnit = null;

// 工作循环：利用浏览器空闲时间处理任务
function workLoop(deadline) {
  let shouldYield = false;
  while (!shouldYield && nextWorkOfUnit) {
    nextWorkOfUnit = performWorkOfUnit(nextWorkOfUnit);
    // 当剩余时间小于1ms时，让出主线程
    shouldYield = deadline.timeRemaining() < 1;
  }

  requestIdleCallback(workLoop);
}

// 根据类型创建DOM节点
function createDom(type) {
  return type === "TEXT_ELEMENT"
    ? document.createTextNode("")
    : document.createElement(type);
}

// 更新DOM节点的属性
function updateProps(dom, props) {
  Object.keys(props).forEach((key) => {
    if (key !== "children") {
      dom[key] = props[key];
    }
  });
}

// 初始化fiber节点的子节点
// 构建fiber树的链表结构：child（第一个子节点）和sibling（兄弟节点）
function initChildren(fiber) {
  const children = fiber.props.children;
  let prevChild = null;
  children.forEach((child, index) => {
    const newFiber = {
      type: child.type,
      props: child.props,
      child: null,
      parent: fiber,
      sibling: null,
      dom: null,
    };

    if (index === 0) {
      fiber.child = newFiber;
    } else {
      prevChild.sibling = newFiber;
    }
    prevChild = newFiber;
  });
}

// 处理工作单元
// 主要完成三件事：
// 1. 创建DOM节点
// 2. 处理props
// 3. 构建fiber树
// 4. 返回下一个工作单元
function performWorkOfUnit(fiber) {
  // 1. 创建DOM节点，保证一次只处理一个fiber节点（任务分片机制）
  if (!fiber.dom) {
    const dom = (fiber.dom = createDom(fiber.type));
    // 将DOM节点添加到父节点
    fiber.parent.dom.append(dom);
    // 2. 处理props
    updateProps(dom, fiber.props);
  }

  // 3. 构建fiber树
  initChildren(fiber)

  // 4. 返回下一个要执行的任务
  // 遍历顺序：先子节点，然后兄弟节点，最后回到父节点的兄弟节点
  if (fiber.child) {
    return fiber.child;
  }

  if (fiber.sibling) {
    return fiber.sibling;
  }

  return fiber.parent?.sibling;
}

// 启动工作循环
requestIdleCallback(workLoop);

// React对象
const React = {
  render,
  createElement,
};

export default React;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/962790.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Baklib揭示内容中台实施最佳实践的策略与实战经验

Baklib揭示内容中台实施最佳实践的策略与实战经验

内容概要 在当前数字化转型的浪潮中&#xff0c;内容中台的概念日益受到关注。它不再仅仅是一个内容管理系统&#xff0c;而是企业提升运营效率与灵活应对市场变化的重要支撑平台。内容中台的实施离不开最佳实践的指导&#xff0c;这些实践为企业在建设高效内容中台时提供了宝…
阅读更多...
牛客周赛round78 B,C

牛客周赛round78 B,C

B.一起做很甜的梦 题意&#xff1a;就是输出n个数&#xff08;1-n&#xff09;&#xff0c;使输出的序列中任意选连续的小序列&#xff08;小序列长度>2&&<n-1&#xff09;不符合排列&#xff08;例如如果所选长度为2&#xff0c;在所有长度为2 的小序列里不能出…
阅读更多...
微机原理与接口技术期末大作业——4位抢答器仿真

微机原理与接口技术期末大作业——4位抢答器仿真

在微机原理与接口技术的学习旅程中&#xff0c;期末大作业成为了检验知识掌握程度与实践能力的关键环节。本次我选择设计并仿真一个 4 位抢答器系统&#xff0c;通过这个项目&#xff0c;深入探索 8086CPU 及其接口技术的实际应用。附完整压缩包下载。 一、系统设计思路 &…
阅读更多...
Android记事本App设计开发项目实战教程2025最新版Android Studio

Android记事本App设计开发项目实战教程2025最新版Android Studio

平时上课录了个视频&#xff0c;从新建工程到打包Apk&#xff0c;从头做到尾&#xff0c;没有遗漏任何实现细节&#xff0c;欢迎学过Android基础的同学参加&#xff0c;如果你做过其他终端软件开发&#xff0c;也可以学习&#xff0c;快速上手Android基础开发。 Android记事本课…
阅读更多...
设计模式Python版 组合模式

设计模式Python版 组合模式

文章目录 前言一、组合模式二、组合模式实现方式三、组合模式示例四、组合模式在Django中的应用 前言 GOF设计模式分三大类&#xff1a; 创建型模式&#xff1a;关注对象的创建过程&#xff0c;包括单例模式、简单工厂模式、工厂方法模式、抽象工厂模式、原型模式和建造者模式…
阅读更多...
4-图像梯度计算

4-图像梯度计算

文章目录 4.图像梯度计算（1）Sobel算子（2）梯度计算方法（3）Scharr与Laplacian算子4.图像梯度计算 （1）Sobel算子 图像梯度-Sobel算子 Sobel算子是一种经典的图像边缘检测算子，广泛应用于图像处理和计算机视觉领域。以下是关于Sobel算子的详细介绍： 基本原理 Sobel算子…
阅读更多...
MATLAB实现多种群遗传算法

MATLAB实现多种群遗传算法

多种群遗传算法&#xff08;MPGA, Multi-Population Genetic Algorithm&#xff09;是一种改进的遗传算法&#xff0c;它通过将种群分成多个子种群并在不同的子种群之间进行交叉和交换&#xff0c;旨在提高全局搜索能力并避免早期收敛。下面是多种群遗传算法的主要步骤和流程&a…
阅读更多...
WebRtc06: 音视频数据采集

WebRtc06: 音视频数据采集

音视频采集API 通过getUserMedia这个API去获取视频音频&#xff0c; 通过constraints这个对象去配置偏好&#xff0c;比如视频宽高、音频降噪等 测试代码 index.html <html><head><title>WebRtc capture video and audio</title></head><…
阅读更多...
浅析CDN安全策略防范

浅析CDN安全策略防范

CDN&#xff08;内容分发网络&#xff09;信息安全策略是保障内容分发网络在提供高效服务的同时&#xff0c;确保数据传输安全、防止恶意攻击和保护用户隐私的重要手段。以下从多个方面详细介绍CDN的信息安全策略&#xff1a; 1. 数据加密 数据加密是CDN信息安全策略的核心之…
阅读更多...
高温环境对电机性能的影响与LabVIEW应用

高温环境对电机性能的影响与LabVIEW应用

电机在高温环境下的性能可能受到多种因素的影响&#xff0c;尤其是对于持续工作和高负荷条件下的电机。高温会影响电机的效率、寿命以及可靠性&#xff0c;导致设备出现过热、绝缘损坏等问题。因此&#xff0c;在设计电机控制系统时&#xff0c;特别是在高温环境下&#xff0c;…
阅读更多...
MapReduce简单应用(一)——WordCount

MapReduce简单应用(一)——WordCount

目录 1. 执行过程1.1 分割1.2 Map1.3 Combine1.4 Reduce 2. 代码和结果2.1 pom.xml中依赖配置2.2 工具类util2.3 WordCount2.4 结果 参考 1. 执行过程 假设WordCount的两个输入文本text1.txt和text2.txt如下。 Hello World Bye WorldHello Hadoop Bye Hadoop1.1 分割 将每个文…
阅读更多...
PPT演示设置：插入音频同步切换播放时长计算

PPT演示设置：插入音频同步切换播放时长计算

PPT中插入音频&同步切换&放时长计算 一、 插入音频及音频设置二、设置页面切换和音频同步三、播放时长计算 一、 插入音频及音频设置 1.插入音频&#xff1a;点击菜单栏插入-音频-选择PC上的音频&#xff08;已存在的音频&#xff09;或者录制音频&#xff08;现场录制…
阅读更多...
32.Word：巧克力知识宣传【32】

32.Word：巧克力知识宣传【32】

目录 NO1.2.3 NO4.5 NO5制表位设置​ ​NO6.7​ NO8.9图表 NO10​ NO11.12 NO1.2.3 FnF12或另存为&#xff1a;考生文件夹&#xff1a;Word.docx布局→纸张大小→页面设置对话框→页边距&#xff1a;上下左右ctrlx剪切文本→插入→文本框选择对应的→手动拖拉文本框到合…
阅读更多...
【零拷贝】

【零拷贝】

目录 一&#xff1a;了解IO基础概念 二&#xff1a;数据流动的层次结构 三&#xff1a;零拷贝 1.传统IO文件读写 2.mmap 零拷贝技术 3.sendFile 零拷贝技术 一&#xff1a;了解IO基础概念 理解CPU拷贝和DMA拷贝 ​ 我们知道&#xff0c;操作系统对于内存空间&…
阅读更多...
数据分析系列--⑨RapidMiner训练集、测试集、验证集划分

数据分析系列--⑨RapidMiner训练集、测试集、验证集划分

一、数据集获取 二、划分数据集 1.导入和加载数据 2.数据集划分 2.1 划分说明 2.2 方法一 2.3 方法二 一、数据集获取 点击下载数据集 此数据集包含538312条数据. 二、划分数据集 1.导入和加载数据 2.数据集划分 2.1 划分说明 2.2 方法一 使用Filter Example Range算子. …
阅读更多...
vsnprintf() 将可变参数格式化输出到字符数组

vsnprintf() 将可变参数格式化输出到字符数组

vsnprintf{} 将可变参数格式化输出到一个字符数组 1. function vsnprintf()1.1. const int num_bytes vsnprintf(NULL, 0, format, arg); 2. Parameters3. Return value4. Example5. llama.cppReferences 1. function vsnprintf() https://cplusplus.com/reference/cstdio/vs…
阅读更多...
Jenkins未在第一次登录后设置用户名，第二次登录不进去怎么办？

Jenkins未在第一次登录后设置用户名，第二次登录不进去怎么办？

Jenkins在第一次进行登录的时候&#xff0c;只需要输入Jenkins\secrets\initialAdminPassword中的密码&#xff0c;登录成功后&#xff0c;本次我们没有修改密码&#xff0c;就会导致后面第二次登录&#xff0c;Jenkins需要进行用户名和密码的验证&#xff0c;但是我们根本就没…
阅读更多...
【Arxiv 大模型最新进展】TOOLGEN：探索Agent工具调用新范式

【Arxiv 大模型最新进展】TOOLGEN：探索Agent工具调用新范式

【Arxiv 大模型最新进展】TOOLGEN&#xff1a;探索Agent工具调用新范式 文章目录 【Arxiv 大模型最新进展】TOOLGEN&#xff1a;探索Agent工具调用新范式研究框图方法详解 作者&#xff1a;Renxi Wang, Xudong Han 等 单位&#xff1a;LibrAI, Mohamed bin Zayed University o…
阅读更多...
数据库内存与Buffer Pool

数据库内存与Buffer Pool

数据库内存与Buffer Pool 文章目录 数据库内存与Buffer Pool一&#xff1a;MySQL内存结构1&#xff1a;MySQL工作组件2&#xff1a;工作线程的本地内存3&#xff1a;共享内存区域4&#xff1a;存储引擎缓冲区 二&#xff1a;InnoDB的核心&#xff1a;Buffer Pool1&#xff1a;数…
阅读更多...
[CVPR 2022]Cross-view Transformers for real-time Map-view Semantic Segmentation

[CVPR 2022]Cross-view Transformers for real-time Map-view Semantic Segmentation

论文网址&#xff1a;Cross-View Transformers for Real-Time Map-View Semantic Segmentation 论文代码&#xff1a;cross_view_transformers/cross_view_transformer at master bradyz/cross_view_transformers GitHub 英文是纯手打的&#xff01;论文原文的summarizing …
阅读更多...
最新文章

Copyright @ 2022~2023