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

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

news 2025/9/27 2:55:04

项目总结构：

├─ 📁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

项目总结构： ├─ 📁core │ ├─ 📄React.js │ └─ 📄ReactDom.js ├─ 📁node_modules ├─ 📁tests │ └─ 📄createElement.spec.js ├─ 📄App.js ├─ 📄in…...

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

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

上篇介绍了前端项目部署以及基本依赖的应用，这次主要对于路由以及布局进行模块化处理一、创建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（Domain Name System，域名系统） 是互联网的重要组成部分，它负责将人类易读的域名（如 www.google.com）转换为机器可以识别的 IP 地址（如 142.250.72.206）。这一过程被称为域名解析…...

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

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

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

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

并发服务器框架——zinx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

作者： asd80703406 原文来源： https://tidb.net/blog/90394c97 背景近期发现很多人从低版本升级至TiDB v7 或者v8版本，均遇到了tidb-server启动失败，提示报错如下： ["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” 论文地址：https://arxiv.org/pdf/2411.18997 摘要股票预测模型可以分为两个主要类别：第一类，例如GRU和ALSTM，这些模型仅基于股票…...

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

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

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

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

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

测试反应投屏时下一集可能播放不成功。首先看一下日志： 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.栈（后进先出）5.队列（先进先出） 四、树和二叉树1.树2.二叉…...

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

Kafaka安装与启动教程

1.下载先去官网Apache Kafka可以查看到每个版本的发布时间。选择你要安装的版本。然后进入linux建立要存放的文件夹，用wget命令下载 2.安装先解压缩： tar -xvzf kafka_2.12-3.5.1.tgz -C ../ 3.配置文件修改server.properties： 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]

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

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

label-studio的使用教程(导入本地路径)

文章目录 1. 准备环境2. 脚本启动2.1 Windows2.2 Linux 3. 安装label-studio机器学习后端3.1 pip安装(推荐)3.2 GitHub仓库安装 4. 后端配置4.1 yolo环境4.2 引入后端模型4.3 修改脚本4.4 启动后端 5. 标注工程5.1 创建工程5.2 配置图片路径5.3 配置工程类型标签5.4 配置模型5.…...

编程新知 2025/9/25 19:42:21

基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述通过动态调整节点通信的能量开销，平衡网络负载，延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...

编程新知 2025/9/25 19:44:07

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中，每个页面需要使用ref，onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入，需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

编程新知 2025/9/14 18:41:15

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/9/14 23:47:44

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话： “利润不是赚出来的，是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业，很多企业看着销售不错，账上却没钱、利润也不见了，一翻库存才发现： 一堆卖不动的旧货…...

编程新知 2025/9/26 5:32:15

深入解析C++中的extern关键字：跨文件共享变量与函数的终极指南

🚀 C extern 关键字深度解析：跨文件编程的终极指南 📅 更新时间：2025年6月5日 🏷️ 标签：C | extern关键字 | 多文件编程 | 链接与声明 | 现代C 文章目录前言🔥一、extern 是什么？&…...

编程新知 2025/9/26 12:16:53

【HTTP三个基础问题】

面试官您好！HTTP是超文本传输协议，是互联网上客户端和服务器之间传输超文本数据（比如文字、图片、音频、视频等）的核心协议，当前互联网应用最广泛的版本是HTTP1.1，它基于经典的C/S模型，也就是客…...

编程新知 2025/6/16 8:33:33

大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...

编程新知 2025/9/20 22:30:25

深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用

文章目录前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...

编程新知 2025/9/22 23:36:45

为什么要创建 Vue 实例

核心原因：Vue 需要一个「控制中心」来驱动整个应用你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为，将它们变成一个活的、可交互的应用**。没有这个实例，你的代码只是一堆静态的 HTML、JavaScript 变量和函数，无法「活」起来。 …...

编程新知 2025/9/9 23:11:34