当前位置： 首页 > news >正文

不只是mini-react第一节：实现最简单mini-react

news 2025/6/19 20:03:44
项目总结构：
├─ 📁core
│  ├─ 📄React.js
│  └─ 📄ReactDom.js
├─ 📁node_modules
├─ 📁tests
│  └─ 📄createElement.spec.js
├─ 📄App.js
├─ 📄index.html
├─ 📄main.js
├─ 📄package-lock.json
├─ 📄package.json
└─ 📄pnpm-lock.yaml
原生js怎么写？
const dom = document.createElement("div")
dom.id="app"
document.querySelector('#root').append(dom)const textNode = document.createTextNode("")
textNode.nodeValue = "app"
dom.append(textNode)
为什么需要虚拟dom？

通过以上原生写法可以看出，虚拟dom可以简化开发，使代码更加框架、结构化，清晰可读易于维护。

框架层面：频繁的dom操作会一直导致浏览器重排和重绘，会严重影响性能。

原生层面：相对于原生层面虚拟dom对性能提示微乎其微，并且在复杂情况会损耗性能。

当然虚拟dom还有个非常重要的作用就是跨端运行。

面试怎么答？

  • 减少浏览器重排和重绘（框架层面、原生层面）
  • 跨平台运行，不局限于浏览器
  • 减少心智负担，提高开发效率

当然不能干巴巴的把这几点甩出去，记得拓展。

极简版React内核

此处代码实现了一个极简的创建虚拟dom和虚拟dom转真实dom

/core/React.js

//创建文本对象虚拟dom
function createTextNode(text) {return {type: "TEXT_ELEMENT",props: {nodeValue: text,children: [],},};
}//创建虚拟dom对象
function createElement(type, props, ...children) {return {type,props: {...props,children: children.map((child) => {return typeof child === "string" ? createTextNode(child) : child;}),},};
}//渲染器，vdom->tdom
function render(el, container) {const dom =el.type === "TEXT_ELEMENT"? document.createTextNode(""): document.createElement(el.type);// id classObject.keys(el.props).forEach((key) => {if (key !== "children") {dom[key] = el.props[key];}});const children = el.props.children;children.forEach((child) => {render(child, dom);});container.append(dom);
}const React = {render,createElement,
};export default React;

可以看到以上代码中createElement函数就实现了一个极简版的虚拟dom，里面有三个元素分别是：

  • type：类型
  • props：传入的值
  • children：子节点

而render函数则实现了一个极简版的渲染器，用于将虚拟dom转化成真实dom，传入的值分别是：

  • el：虚拟dom对象
  • container：具体在哪个真实dom节点渲染
创建虚拟dom对象

/App.js

通过上面定义的createElement函数来创建一个虚拟dom对象app并将其导出

import React from './core/React.js';
const App = React.createElement("div", { id: "app" }, "hi- ", "mini-react");
export default App
极简React渲染组件

定义了一个createRoot函数，通过传入的渲染容器container和虚拟dom对象App来将虚拟dom元素渲染到真实dom上。

/core/ReactDom.js

import React from "./React.js";
const ReactDOM = {createRoot(container) {return {render(App) {React.render(App, container);},};},
};export default ReactDOM;
创建ReactDOM

/main.js

import ReactDOM from "./core/ReactDom.js";
import App from "./App.js";ReactDOM.createRoot(document.querySelector("#root")).render(App);
使用vitest单元测试验证

控制台运行npm i vitest下载依赖。

然后再package.json中自定义测试脚本

/package.json

{"scripts": {"test": "vitest"},"devDependencies": {"vitest": "^1.1.3"}
}

然后创建tests文件夹并编写测试文件，具体路径于代码如下：

/tests/createElement.spec.js

import React from "../core/React";
import { it, expect, describe } from "vitest";describe("createElement", () => {it("props is null", () => {const el = React.createElement("div", null, "hi");expect(el).toMatchInlineSnapshot(`{"props": {"children": [{"props": {"children": [],"nodeValue": "hi",},"type": "TEXT_ELEMENT",},],},"type": "div",}`)});it("should return element vdom", () => {const el = React.createElement("div", {id:"id"}, "hi");expect(el).toMatchInlineSnapshot(`{"props": {"children": [{"props": {"children": [],"nodeValue": "hi",},"type": "TEXT_ELEMENT",},],"id": "id",},"type": "div",}`)});
});

创建完成后在控制台输入npm test即可运行测试脚本。

在上面代码中，describe用于创建测试组，每个it是测试组内的单个测试单元，而it内就是具体测试内容。

这里使用的是toMatchInlineSnapshot快照测试，用于比对el结果是否与快照函数toMatchInlineSnapshot内容一致，如果一致则测试通过。

总结

createRoot用于将虚拟dom渲染成真实dom

createElement用于创建虚拟dom对象

render是createRoot的内核

贴上main.js：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="root"></div><script type="module" src="main.js"></script>
</body></html>

相关文章：

不只是mini-react第一节：实现最简单mini-react

项目总结构&#xff1a; ├─ &#x1f4c1;core │ ├─ &#x1f4c4;React.js │ └─ &#x1f4c4;ReactDom.js ├─ &#x1f4c1;node_modules ├─ &#x1f4c1;tests │ └─ &#x1f4c4;createElement.spec.js ├─ &#x1f4c4;App.js ├─ &#x1f4c4;in…...

编程日记 2025/1/6 17:31:17

前端路由layout布局处理以及菜单交互(三)

上篇介绍了前端项目部署以及基本依赖的应用&#xff0c;这次主要对于路由以及布局进行模块化处理 一、 创建layout模块 1、新建src/layout/index.vue <template><el-container class"common-layout"><!-- <el-aside class"aside">&l…...

编程日记 2025/1/6 17:27:10

小结：DNS,HTTP,SMTP,IMAP,FTP,Telnet,TCP,ARP,ICMP

DNS&#xff08;Domain Name System&#xff0c;域名系统&#xff09; 是互联网的重要组成部分&#xff0c;它负责将人类易读的域名&#xff08;如 www.google.com&#xff09;转换为机器可以识别的 IP 地址&#xff08;如 142.250.72.206&#xff09;。这一过程被称为域名解析…...

编程日记 2025/1/6 17:26:09

【C++】P2550 [AHOI2001] 彩票摇奖

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;题目描述输入格式&#xff1a;输出格式&#xff1a;输入输出样例&#xff1a; &#x1f4af;题解思路1. 问题解析 &#x1f4af;我的实现实现逻辑问题分析 &#x1f4af;老…...

编程日记 2025/1/6 17:25:08

并发服务器框架——zinx

zinx框架 Zinx 是一个用 Go 语言编写的高性能、轻量级的 TCP 服务器框架&#xff0c;它被设计为简单、快速且易于使用。Zinx 提供了一系列的功能&#xff0c;包括但不限于连接管理、数据编解码、业务处理、负载均衡等&#xff0c;适用于构建各种 TCP 网络服务&#xff0c;如游戏…...

编程日记 2025/1/6 17:22:05

Unity 中计算射线和平面相交距离的原理

有此方法 能够计算射线和平面是否相交以及射线起点到平面交点的距离 代码分析 var dot Vector3.Dot(ray.direction, plane.normal);计算射线和平面法线的点积&#xff0c;如果大于等于0&#xff0c;则说明射线和平面没有相交&#xff0c;否则&#xff0c;说明射线和平面相交…...

编程日记 2025/1/6 17:21:04

浅谈棋牌游戏开发流程七：反外挂与安全体系——守护游戏公平与玩家体验

一、前言&#xff1a;为什么反外挂与安全这么重要&#xff1f; 对于任何一款线上棋牌游戏而言&#xff0c;公平性和玩家安全都是最重要的核心要素之一。如果游戏环境充斥着各式各样的外挂、作弊方式&#xff0c;不仅会毁坏玩家体验&#xff0c;更会导致游戏生态崩塌、口碑下滑…...

编程日记 2025/1/6 17:20:03

《无力逃脱》V1.0.15.920(59069)官方中文版

艾丹是一名三臂赏金猎人&#xff0c;他必须追捕银河系中最危险、最难以捉摸的割喉者。 有些悬赏是金钱&#xff0c;有些则是有价值的信息。艾丹可以利用这些信息找到让他走上这条路的人&#xff0c;同时也会卷入一个全银河系的阴谋中。 拥有三条手臂可以让你同时对付更多的敌…...

编程日记 2025/1/6 17:14:57

六种主流服务器的选择与使用

网络的运行离不开各种服务器&#xff0c;它们各司其职&#xff0c;为我们提供稳定的网络服务。本文带大家了解6种常见服务器类型。 服务器的六大种类 第一种&#xff1a;Web服务器 Web服务器是互联网的核心。当你打开一个网站&#xff0c;比如百度或淘宝&#xff0c;浏览器会…...

编程日记 2025/1/6 17:09:50

TiDB 升级至高版本提示'mysql.tidb_runaway_watch' doesn't exist 问题处理

作者&#xff1a; asd80703406 原文来源&#xff1a; https://tidb.net/blog/90394c97 背景 近期发现很多人从低版本升级至TiDB v7 或者v8版本&#xff0c;均遇到了tidb-server启动失败&#xff0c;提示报错如下&#xff1a; ["get runaway watch record failed"…...

编程日记 2025/1/6 17:08:48

GRU-PFG：利用图神经网络从股票因子中提取股票间相关性

“GRU-PFG: Extract Inter-Stock Correlation from Stock Factors with Graph Neural Network” 论文地址&#xff1a;https://arxiv.org/pdf/2411.18997 摘要 股票预测模型可以分为两个主要类别&#xff1a;第一类&#xff0c;例如GRU和ALSTM&#xff0c;这些模型仅基于股票…...

编程日记 2025/1/6 17:03:37

数字化供应链创新解决方案在零售行业的应用研究——以开源AI智能名片S2B2C商城小程序为例

摘要&#xff1a; 在数字化转型的浪潮中&#xff0c;零售行业正经历着前所未有的变革。特别是在供应链管理方面&#xff0c;线上线下融合、数据孤岛、消费者需求多样化等问题日益凸显&#xff0c;对零售企业的运营效率与市场竞争力构成了严峻挑战。本文深入探讨了零售行业供应…...

编程日记 2025/1/6 17:01:33

安卓Activity执行finish后onNewIntent也执行了

测试反应投屏时下一集可能播放不成功。 首先看一下日志&#xff1a; onCompletion onCast handlerMessage: 2 finish: PlayerActivityabc7fdc onPause: PlayerActivityabc7fdc onNewIntent: PlayerActivityabc7fdc onResume: PlayerActivityabc7fdc onPause: PlayerActivityab…...

编程日记 2025/1/6 16:59:31

数据结构.期末复习.学习笔记（c语言）

《数据结构》复习概要 一、概论 二、基础1. 基本概念2. 四种逻辑结构及特点3. 算法的概念、特性4. 算法设计的4个要求 三、线性结构1.顺序表2.单链表3.循环链表双向链表4.栈&#xff08;后进先出&#xff09;5.队列&#xff08;先进先出&#xff09; 四、树和二叉树1.树2.二叉…...

编程日记 2025/1/6 16:57:29

Kafaka安装与启动教程

1.下载 先去官网Apache Kafka可以查看到每个版本的发布时间。选择你要安装的版本。 然后进入linux建立要存放的文件夹&#xff0c;用wget命令下载 2.安装 先解压缩&#xff1a; tar -xvzf kafka_2.12-3.5.1.tgz -C ../ 3.配置文件 修改server.properties&#xff1a; cd .…...

编程日记 2025/1/6 16:56:27

根据docker file 编译镜像

比如给到一个Dockerfile 第一步编译镜像 cd /path/to/Dockerfiledocker build -t <DOCKER_IMAGE_NAME> . build 命令编译镜像 -t 镜像名字 . 指dockerfile 所在目录 如果遇到报错 [] Building 0.3s (3/3) FINISHED …...

编程日记 2025/1/6 16:53:22

联邦学习的 AI 大模型微调中，加性、选择性、重参数化和混合微调

联邦学习的 AI 大模型微调中，加性、选择性、重参数化和混合微调 在联邦学习的 AI 大模型微调中，加性、选择性、重参数化和混合微调是不同的操作方式，具体如下： 加性微调 定义与原理：加性微调是在原始模型的基础上添加额外的可训练参数来进行模型调整。这种方式不会改变原…...

编程日记 2025/1/6 16:51:20

android 外挂modem模块实现Telephony相关功能(上网，发短信，打电话)

一.背景 当前模块不支持Telephony相关的功能，例如上网、发短信等功能，就需要外挂另一个模块实现此功能，这就是外挂modem模块实现Telephony功能，此篇主要就是说实现外挂modem模块功能中的Framework层实现逻辑，如下流程是在Android 13中实现的外挂pcie模块的流程 二.ril库相…...

编程日记 2025/1/6 16:50:18

【计算机视觉技术 - 人脸生成】2.GAN网络的构建和训练

GAN 是一种常用的优秀的图像生成模型。我们使用了支持条件生成的 cGAN。下面介绍简单 cGAN 模型的构建以及训练过程。 2.1 在 model 文件夹中新建 nets.py 文件 import torch import torch.nn as nn# 生成器类 class Generator(nn.Module):def __init__(self, nz100, nc3, n…...

编程日记 2025/1/6 16:42:08

数据中台与数据治理服务方案[50页PPT]

本文概述了数据中台与数据治理服务方案的核心要点。数据中台作为政务服务数据化的核心&#xff0c;通过整合各部门业务系统数据&#xff0c;进行建模与加工&#xff0c;以新数据驱动政府管理效率提升与政务服务能力增强。数据治理则聚焦于解决整体架构问题&#xff0c;确保数据…...

编程日记 2025/1/6 16:41:07

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2025/6/19 11:25:04

CVPR 2025 MIMO: 支持视觉指代和像素grounding 的医学视觉语言模型

CVPR 2025 | MIMO&#xff1a;支持视觉指代和像素对齐的医学视觉语言模型 论文信息 标题&#xff1a;MIMO: A medical vision language model with visual referring multimodal input and pixel grounding multimodal output作者&#xff1a;Yanyuan Chen, Dexuan Xu, Yu Hu…...

编程新知 2025/6/18 20:00:46

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

编程新知 2025/6/17 7:10:17

对WWDC 2025 Keynote 内容的预测

借助我们以往对苹果公司发展路径的深入研究经验&#xff0c;以及大语言模型的分析能力&#xff0c;我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际&#xff0c;我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测&#xff0c;聊作存档。等到明…...

编程新知 2025/6/18 20:35:43

基于数字孪生的水厂可视化平台建设：架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

编程新知 2025/6/16 21:39:46

PL0语法，分析器实现！

简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...

编程新知 2025/6/18 8:37:40

基于Springboot+Vue的办公管理系统

角色&#xff1a; 管理员、员工 技术&#xff1a; 后端: SpringBoot, Vue2, MySQL, Mybatis-Plus 前端: Vue2, Element-UI, Axios, Echarts, Vue-Router 核心功能&#xff1a; 该办公管理系统是一个综合性的企业内部管理平台&#xff0c;旨在提升企业运营效率和员工管理水…...

编程新知 2025/6/15 10:37:05

打手机检测算法AI智能分析网关V4守护公共/工业/医疗等多场景安全应用

一、方案背景​ 在现代生产与生活场景中&#xff0c;如工厂高危作业区、医院手术室、公共场景等&#xff0c;人员违规打手机的行为潜藏着巨大风险。传统依靠人工巡查的监管方式&#xff0c;存在效率低、覆盖面不足、判断主观性强等问题&#xff0c;难以满足对人员打手机行为精…...

编程新知 2025/6/16 11:32:10

Leetcode33（ 搜索旋转排序数组）

题目表述 整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], …, nums[n-1], nums[0], nu…...

编程新知 2025/6/16 18:00:55

【iOS】 Block再学习

iOS Block再学习 文章目录 iOS Block再学习前言Block的三种类型__ NSGlobalBlock____ NSMallocBlock____ NSStackBlock__小结 Block底层分析Block的结构捕获自由变量捕获全局(静态)变量捕获静态变量__block修饰符forwarding指针 Block的copy时机block作为函数返回值将block赋给…...

编程新知 2025/6/16 16:00:12