【从0实现React18】 (六) 完成commit提交流程并初步实现react-dom包，完成首屏渲染测试

前面，我们提到 React 更新流程有四个阶段：

  • 触发更新（Update Trigger）
  • 调度阶段（Schedule Phase）
  • 协调阶段（Reconciliation Phase）
  • 提交阶段（Commit Phase）

之前我们已经实现了协调阶段（Reconciliation Phase）的 beginWork 和 completeWork 函数，接下来我们会实现提交阶段

提交阶段的主要任务是将更新同步到实际的 DOM 中，执行 DOM 操作，例如创建、更新或删除 DOM 元素，反映组件树的最新状态

Commit 阶段的三个子阶段

  • Before Mutation (布局阶段):

主要用于执行 DOM 操作之前的准备工作，包括类似 getSnapshotBeforeUpdate 生命周期函数的处理。在这个阶段会保存当前的布局信息，以便在后续的 DOM 操作中能够进行比较和优化。

  • Mutation ( DOM 操作阶段):

执行实际 DOM 操作的阶段，包括创建、更新或删除 DOM 元素等。使用深度优先遍历的方式，逐个处理 Fiber 树中的节点，根据协调阶段生成的更新计划，执行相应的 DOM 操作。

  • Layout (布局阶段):

用于处理布局相关的任务，进行一些布局的优化，比如批量更新布局信息，减少浏览器的重排（reflow）次数，提高性能。其目标是最小化浏览器对 DOM 的重新计算布局，从而提高渲染性能。

  1. 实现 commitWork

要执行的任务：

  • fiber树的切换
  • 执行Placement对应操作

需要注意的问题，考虑如下JSX，如果span含有flag，该如何找到他：

<App>
    <div>
        <span>只因</span>
    </div>
</App>

首先，在 react-reconciler/src/workLoop.ts 的 renderRoot 函数中，执行 commitRoot 函数。

  • commitRoot 是开始提交阶段的入口函数，调用 commitWork 函数进行实际的 DOM 操作；
  • commitWork 函数是提交阶段的核心，它会判断根节点是否存在上述 3 个阶段需要执行的操作，并执行实际的 DOM 操作，并完成 Fiber 树的切换。

我们先只实现 Mutation 阶段的功能，目前已支持的 DOM 操作有：Placement | Update | ChildDeletion，判断根节点的 flags 和 subtreeFlags 中是否包含这三个操作，如果有，则调用 commitMutationEffects 函数执行实际的 DOM 操作。

需要注意的是，由于 current 是与视图中真实 UI 对应的 Fiber 树，而 workInProgress 是触发更新后正在 Reconciler 中计算的 Fiber 树，因此在 DOM 操作执行完之后，需要将 current 指向 workInProgress，完成 Fiber 树的切换。

 // packages/react-reconciler/src/workLoop.ts
/**
 * 整体 reconciler 的工作循环
 */
let workInProgress: FiberNode | null = null

/** reconciler最终执行的方法 */
function renderRoot(root: FiberRootNode) {
  // ...

  // 提交阶段的入口函数
  commitRoot(root)
}

/** 进入commit阶段 */
function commitRoot(root: FiberRootNode) {
  const finishedWork = root.finishedWork

  if (finishedWork === null) {
    return
  }

  if (__DEV__) {
    console.warn('commit阶段开始', finishedWork)
  }

  //重置
  root.finishedWork = null

  // 判断3个子阶段需要执行的操作
  //  使用 MutationMask 判断是否存在副作用
  const subtreeHasEffect =
    (finishedWork.subtreeFlags & MutationMask) !== NoFlags // subtree
  const rootHasEffects = (finishedWork.flags & MutationMask) !== NoFlags // root

  if (subtreeHasEffect || rootHasEffects) {
    // 1.beforeMutation
    
    // 2.mutation
    CommitMutationEffects(finishedWork) // 有副作用则进入Mutation阶段
    root.current = finishedWork // finishedWork 是新生成的 workInProgress 树
    // 3.layout
    
  } else {
    root.current = finishedWork // 完成 Fiber 树的切换
  }
}

  1. 实现 Mutaion

接下来我们来实现 Mutation 阶段执行 DOM 操作的具体实现，新建 packages/react-reconciler/src/commitWork.ts 文件，定义 commitMutationEffects 函数。

let nextEffect: FiberNode | null = null
export const CommitMutationEffects = (finishedWork: FiberNode) => {
  nextEffect = finishedWork

  while (nextEffect !== null) {
    // 向下遍历
    const child: FiberNode | null = nextEffect.child
    if (
      (nextEffect.subtreeFlags & MutationMask) !== NoFlags &&
      child !== null
    ) {
      //  子节点有可能存在Mutation对应的操作
      nextEffect = child
    } else {
      up: while (nextEffect !== null) {
        // 找到第一个没有 subtreeFlags 的节点, 即最下的 flag 处
        commitMutationEffectsOnFiber(nextEffect)
        // 向上遍历 DFS
        const sibling: FiberNode | null = nextEffect.sibling
        if (sibling !== null) {
          nextEffect = sibling
          break up
        }
        nextEffect = nextEffect.return
      }
    }
  }
}

commitMutationEffects 函数负责深度优先遍历 Fiber 树，递归地向下寻找子节点是否存在 Mutation 阶段需要执行的 flags，如果遍历到某个节点，其所有子节点都不存在 flags（即 subtreeFlags == NoFlags），则停止向下，调用 commitMutationEffectsOnFiber 处理该节点的 flags，并且开始遍历其兄弟节点和父节点，即继续向上遍历。

/** 对 Fiber节点的 Mutation 操作 */
const commitMutationEffectsOnFiber = (finishedWork: FiberNode) => {
  const flags = finishedWork.flags

  if ((flags & Placement) !== NoFlags) {
    // 存在 Placement 操作
    commitPlacement(finishedWork)
    finishedWork.flags &= ~Placement //移除Placement
  } else if ((flags & Update) !== NoFlags) {
  }
}

commitMutationEffectsOnFiber 会根据每个节点的 flags 和更新计划中的信息执行相应的 DOM 操作。

const commitPlacement = (finishedWork: FiberNode) => {
  if (__DEV__) {
    console.warn('执行Placement操作', finishedWork)
  }

  // 找到parentDom
  const hostParent = getHostParent(finishedWork)
  appendPlacementNodeIntoContainer(finishedWork, hostParent)
  // 找到finishedWork对应的Dom 然后 append 到 hostParent
}

以 Placement 为例：如果 Fiber 节点的标志中包含 Placement，表示需要在 DOM 中插入新元素，此时就需要取到该 Fiber 节点对应的 DOM，并将其插入对应的父 DOM 节点中。

至此，我们就完成了 React 更新流程中的提交阶段（Commit Phase），实现了 DOM 树更新

React-Dom

React 是一个跨平台的库，可以用于构建 Web 应用、移动应用（React Native）等。而 react-dom 就是 React 在 Web 环境中的渲染实现，用于将 React 组件渲染到实际的 DOM 上，并提供了一些与 DOM 操作相关的功能。

之前我们在 react-reconciler/src/hostConfig.ts 中模拟实现了一些生成、插入 DOM 元素的函数，现在就在 react-dom 中真正实现它。

  1. 实现 react-dom 包

先创建 packages/react-dom 文件夹，并初始化：

cd packages
mkdir react-dom
cd react-dom

pnpm init

修改package.json文件：

{
  "name": "react-dom",
  "version": "1.0.0",
  "description": "",
  "module": "index.ts",
  "dependencies": {
    "shared": "workspace:*",
    "react-reconciler": "workspace:*"
  },
  "peerDependencies": {
    "react": "workspace:*"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

新建 packages/react-dom/scr/hostConfig.ts 文件，将之前的 hostConfig.ts 文件复制过来并删除：

/**
 * 描述数组环境方法
 */

export type Container = Element
export type Instance = Element

/** 创建Dom实例 */
export const createInstance = (type: string, props: any): Instance => {
  // TODO 处理props
  const element = document.createElement(type)
  return element
}

/** Dom 的插入 */
export const appendInitialChild = (
  parent: Instance | Container,
  child: Instance
) => {
  parent.append(child)
}

/** 创建Text 节点 */
export const createTextInstance = (content: string) => {
  return document.createTextNode(content)
}

/** 插入节点 */
export const appendChildToContainer = appendInitialChild

接着实现 packages/react-dom/scr/root.ts，先来实现 ReactDOM.createRoot().render() 方法，我们之前讲过，这个函数过程中会调用两个 API：

  • createContainer 函数: 用于创建一个新的容器（container），该容器包含了 React 应用的根节点以及与之相关的一些配置信息。
  • updateContainer 函数: 用于更新已经存在的容器中的内容，将新的 React 元素（element）渲染到容器中，并更新整个应用的状态。

这两个 API 在 react-reconciler 包里面已经实现了，直接调用即可。

import {
  createContainer,
  updateContainer,
} from 'react-reconciler/src/fiberReconciler'
import { Container } from './hostConfig'
import { ReactElementType } from 'shared/ReactTypes'

// 实现 ReactDom.createRoot(root).render(<App/>)
export function createRoot(container: Container) {
  const root = createContainer(container)

  return {
    render(element: ReactElementType) {
      updateContainer(element, root)
    },
  }
}

现在我们已经实现了 React 首屏渲染的更新流程，即：

通过 ReactDOM.createRoot(root).render(<App />) 方法，创建 React 应用的根节点，将一个 Placement 加入到更新队列中，并触发了首屏渲染的更新流程：在对 Fiber 树进行深度优先遍历（DFS）的过程中，比较新旧节点，生成更新计划，执行 DOM 操作，最终将 <App /> 渲染到根节点上。

目前我们还只实现了首屏渲染触发更新，还有很多触发更新的方式，如类组件的 this.setState()、函数组件的 useState useEffect ，将在后面实现。

  1. 实现 ReactDom 打包流程

接着来实现 react-dom 包的打包流程，具体过程参考 第 2 节，需要注意两点：

  • 需要安装一个包来处理 hostConfig 的导入路径：pnpm i -D -w @rollup/plugin-alias；
  • ReactDOM = Reconciler + hostConfig，不要将 react 包打包进 react-dom 里，否则会出现数据共享冲突；

react-dom.config.js 的具体配置如下：

import { getPackageJSON, resolvePkgPath, getBaseRollupPlugins } from './utils'
import generatePackageJson from 'rollup-plugin-generate-package-json'
import alias from '@rollup/plugin-alias'

const { name, module, peerDependencies } = getPackageJSON('react-dom')
// react-dom 包的路径
const pkgPath = resolvePkgPath(name)
// react-dom 包的产物路径
const pkgDistPath = resolvePkgPath(name, true)

export default [
  // react-dom
  {
    input: `${pkgPath}/${module}`,
    output: [
      {
        file: `${pkgDistPath}/index.js`,
        name: 'ReactDOM',
        format: 'umd',
      },
      {
        file: `${pkgDistPath}/client.js`,
        name: 'client',
        format: 'umd',
      },
    ],
    external: [...Object.keys(peerDependencies)],
    plugins: [
      ...getBaseRollupPlugins(),
      // webpack resolve alias
      alias({
        entries: {
          hostConfig: `${pkgPath}/src/hostConfig.ts`,
        },
      }),
      generatePackageJson({
        inputFolder: pkgPath,
        outputFolder: pkgDistPath,
        baseContents: ({ name, description, version }) => ({
          name,
          description,
          version,
          peerDependencies: {
            react: version,
          },
          main: 'index.js',
        }),
      }),
    ],
  },
]

再将 tsconfig.json 中的 hostConfig 指向 react-dom 包中的路径；

// tsconfig.json
{
        // ...
        "paths": {
                "hostConfig": ["./react-dom/src/hostConfig.ts"]
        }
}

最后，为了在执行 npm run build-dev 时能同时将 react 和 react-dom 都打包，我们新建一个 dev.config.js 文件，将 react.config.js 和 react-dom.config.js 统一导出。

// scripts/rollup/dev.config.js
import reactDomConfig from './react-dom.config';
import reactConfig from './react.config';

export default [...reactConfig, ...reactDomConfig];

并将 package.json 中的 npm run build-dev 命令改为："rimraf dist && rollup --config scripts/rollup/dev.config.js --bundleConfigAsCjs"。

现在运行 npm run build-dev 就可以得到 react 和 react-dom 的打包产物了。

  1. 打包后的测试

通过 pnpm lint --global 全局链接自己开发的react包和react-dom包：

cd .\dist\node_modules\react\
pnpm link --global

cd ..\react-dom\
pnpm link --global

打开测试项目，链接至全局包，然后启动项目：

pnpm link react --global
pnpm link react-dom --global
pnpm start

在项目src/index.js中:

import React from 'react'
import ReactDOM from 'react-dom'

const jsx = (
  <div key={123} ref={'khs'}>
    <span>big-react</span>
  </div>
)

const root = document.querySelector('#root')
ReactDOM.createRoot(root).render(jsx)

console.log(React)
console.log(jsx)
console.log(ReactDOM)

渲染测试成功：

至此，我们就实现了基础版的 react-dom 包，更多的功能我们将在后面一一实现。

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

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

相关文章

安防监控视频平台LntonAIServer视频监控管理平台裸土检测算法技术核心和应用场景

安防监控视频平台LntonAIServer视频监控管理平台裸土检测算法技术核心和应用场景

LntonAIServer裸土检测算法是一种基于人工智能技术的创新解决方案&#xff0c;旨在实现对裸土地表的自动识别。以下是对该算法的详细分析&#xff1a; 技术基础&#xff1a; 1、该算法利用深度学习和计算机视觉技术&#xff0c;通过捕捉视频或图像中的关键信息&#xff0c;如…
阅读更多...
【ES】--Elasticsearch的翻页详解

【ES】--Elasticsearch的翻页详解

目录 一、前言二、from+size浅分页1、from+size导致深度分页问题三、scroll深分页1、scroll原理2、scroll可以返回总计数量四、search_after深分页1、search_after避免深度分页问题一、前言 ES的分页常见的主要有三种方式：from+size浅分页、scroll深分页、search_after分页。…
阅读更多...
IT运维问题分析报告编写经验模版

IT运维问题分析报告编写经验模版

IT运维问题分析报告编写经验&模版 为提高IT运维用户服务感知满意度&#xff0c;提高运维工作效率&#xff0c;完善运维基础设施建设&#xff0c;现对IT运维工作中存在的紧迫性问题进行分析总结&#xff0c;报告如下&#xff1a; 本文参考资料。专栏地址&#xff08;50运维…
阅读更多...
期末考试结束，成绩如何快速发布？

期末考试结束，成绩如何快速发布？

随着期末考试的落幕&#xff0c;老师们又迎来了一项繁琐的任务将成绩单私信给学生家长。这项工作耗时耗力&#xff0c;而且极易出错&#xff0c;期末老师的工作已经足够繁重还要私发成绩&#xff0c;简直是雪上加霜。 好消息是&#xff0c;现在有了易查分小程序&#xff0c;只需…
阅读更多...
MATLAB-振动问题：两自由度耦合系统自由振动

MATLAB-振动问题：两自由度耦合系统自由振动

一、基本理论 二、MATLAB实现 以下是两自由度耦合系统自由振动质量块振动过程动画显示的MATLAB程序。 clear; clc; close allx0 1; D1 40; D12 8; D2 D1; m1 1; omega0 sqrt(D1/m1); k1 D12 / D1; k2 D12 / D2; k sqrt(k1 * k2); omegazh omega0 * sqrt(1 k); omeg…
阅读更多...
不可编辑的加密word文件破解

不可编辑的加密word文件破解

文章目录 1 将word文件另存为xml格式2 使用记事本打开xml格式的word文件3 ctrlF查找w:enforcement4 将w:enforcement"1"改成w:enforcement"0"并保存5 用word打开xml格式的文件并另存为docx格式6 成功可以编辑 1 将word文件另存为xml格式 2 使用记事本打开x…
阅读更多...
丙酮传感器TGS1820在呼吸气体丙酮含量分析检测中的应用

丙酮传感器TGS1820在呼吸气体丙酮含量分析检测中的应用

随着科技的进步&#xff0c;无创检测技术逐渐成为医疗保健领域的新宠。其中&#xff0c;基于呼吸气体的分析检测技术以其独特的优势受到了广泛关注。呼吸气中的挥发性有机化合物&#xff08;VOCs&#xff09;不仅为研究者们提供了关于人体健康状态的宝贵信息&#xff0c;而且它…
阅读更多...
PKG打包sqlite3项目，如何添加node_sqlite3.node依赖

PKG打包sqlite3项目，如何添加node_sqlite3.node依赖

项目地址&#xff1a;https://github.com/helson-lin/pkg_sqlite 在ffandown项目内&#xff0c;由于项目使用了sqlite3&#xff0c;在跨平台打包的时候&#xff0c;除了本机外其他平台打包之后运行缺少node_sqlite3.node依赖。 为了解决问题&#xff0c;百度了很久&#xff0c…
阅读更多...
为什么您需要将软件本地化为其他语言

为什么您需要将软件本地化为其他语言

将软件翻译成其他语言可以让用户和开发软件的公司受益。以下是软件翻译之所以重要的几个原因&#xff1a; 不断增加的受众&#xff1a;当软件被翻译成不同的语言时&#xff0c;世界各地的更多人都可以访问它。这使公司能够扩大客户群并增加销售额。 改善用户体验&#xff1a;用…
阅读更多...
1.7 计算机体系结构分类

1.7 计算机体系结构分类

Flynn分类法 CISC与RISC
阅读更多...
Java异常处理详解【入门篇】

Java异常处理详解【入门篇】

Java异常处理详解【入门篇】 Java异常处理详解1. 异常的概念2. 异常的分类2.1 检查异常&#xff08;Checked Exception&#xff09;2.2 非检查异常&#xff08;Unchecked Exception&#xff09;2.3 错误&#xff08;Error&#xff09; 3. 异常处理机制3.1 try-catch3.2 finally…
阅读更多...
1/7精确到100位，1000位，100000位怎么算？

1/7精确到100位，1000位，100000位怎么算？

双精度 Console.WriteLine("1/7的值是" (double)1 / 7);结果:0.14285714285714285 即使使用双精度浮点数&#xff0c;精确的位数也是有限的&#xff0c;如果想精确到小数点后100位&#xff0c;1000位&#xff0c;甚至更高哪&#xff1f; 朴素的除法 除数 余数 商…
阅读更多...
麒麟桌面系统CVE-2024-1086漏洞修复

麒麟桌面系统CVE-2024-1086漏洞修复

原文链接&#xff1a;麒麟桌面操作系统上CVE-2024-1086漏洞修复 Hello&#xff0c;大家好啊&#xff01;今天给大家带来一篇在麒麟桌面操作系统上修复CVE-2024-1086漏洞的文章。漏洞CVE-2024-1086是一个新的安全漏洞&#xff0c;如果不及时修复&#xff0c;可能会对系统造成安全…
阅读更多...
设计模式 - Observer Pattern 观察者模式

设计模式 - Observer Pattern 观察者模式

文章目录 定义观察者模式的实现构成构成UML图 观察者模式的代码实现场景代码实现 总结优点缺点应用场景 其他设计模式文章&#xff1a; 定义 观察者模式是行为型模式的一种&#xff0c;它定义对象间的一种一对多的依赖关系&#xff0c;使得每当一个对象改变状态&#xff0c;它…
阅读更多...
ThreadPoolExecutor线程池创建线程

ThreadPoolExecutor线程池创建线程

线程池介绍 降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。提高响应速度。当任务到达时&#xff0c;任务可以不需要等到线程创建就能立即执行。提高线程的可管理性。线程是稀缺资源&#xff0c;如果无限制的创建&#xff0c;不仅会消耗系统资源&#…
阅读更多...
find()方法——字符串首次出现的索引位置

find()方法——字符串首次出现的索引位置

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 语法参考 find()方法实现查询一个字符串在其本身字符串对象中首次出现的索引位置&#xff0c;如起始位置从11到结束位置17之间子字符串出现的位置&a…
阅读更多...
Profinet IO从站数据 转EtherCAT项目案例

Profinet IO从站数据 转EtherCAT项目案例

这里是引用 目录 1 案例说明 1 2 VFBOX网关工作原理 1 3 准备工作 2 4 使用PRONETA软件获取PROFINET IO从站的配置信息 2 5 设置网关采集PROFINETIO从站设备数据 5 6 启动ETHERCAT从站转发采集的数据 8 7 选择槽号和数据地址 9 8 选择子槽号 11 9 案例总结 12 1 案例说明 设置…
阅读更多...
【shell脚本实战案例】主机状态监控脚本

【shell脚本实战案例】主机状态监控脚本

文章目录 案例需求脚本应用场景解决问题脚本思路实现代码 &#x1f308;你好呀&#xff01;我是 山顶风景独好 &#x1f388;欢迎踏入我的博客世界&#xff0c;能与您在此邂逅&#xff0c;真是缘分使然&#xff01;&#x1f60a; &#x1f338;愿您在此停留的每一刻&#xff0c…
阅读更多...
统计信号处理基础 习题解答11-6

统计信号处理基础 习题解答11-6

题目 考虑例11.1对WGN中单个正弦信号的数据模型&#xff0c;将模型重写为 其中&#xff1a; &#xff0c;证明A的PDF是瑞丽的&#xff0c;的PDF是&#xff0c;且和是相互独立的。 解答 根据例11.1&#xff1a; 由于N维联合高斯分布为&#xff1a; 由&#xff1a; 因此&#…
阅读更多...
ProfibusDP主站转Modbus模块连接称重仪配置案例

ProfibusDP主站转Modbus模块连接称重仪配置案例

在工业自动化领域&#xff0c;常常需要将不同协议的设备进行连接。比如&#xff0c;将ProfibusDP主站转Modbus模块&#xff08;XD-MDPBM20&#xff09;用于连接称重仪&#xff0c;可以实现不同设备之间的数据交换和通信。ProfibusDP主站转Modbus网关&#xff08;XD-MDPBM20&…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站