实现简易的 mini-react,并在页面中呈现内容

已于 2024-01-22 01:04:42 修改
阅读量521 收藏 5
点赞数 11
文章标签： 前端 react.js
于 2024-01-22 01:02:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_25320299/article/details/135734789
版权

实现简易的 mini-react,并在页面中呈现内容

下面是实现的基本思路:

在这里插入图片描述

先实现最简单的 mini-react

在浏览器中展示一个简单的字符串 “app”。

index.html 代码如下：

<!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>

main.js 实现了简单的 DOM 操作：

const dom = document.createElement("div");
dom.id = "app";
document.querySelector("#root").append(dom);

const textNode = document.createTextNode("");
textNode.nodeValue = "app";
dom.append(textNode);

这里使用了 document.createTextNode("") 创建一个空的文本节点 textNode，然后通过 textNode.nodeValue = "app" 将文本节点的值设置为 “app”，这样就可以在页面上就可以看到"app"了

接下来，引入vdom概念，对代码进行优化。

引入虚拟 DOM（vdom）

第一步，将vdom写死以及dom渲染也写死
main.js 文件更新如下：

// type props children
const textEl = {
    type: "TEXT_ELEMENT",
    props: { nodeValue: "app", children: [] }
}
const el = {
    type: "div",
    props: {
        id: "app", children: [textEll]
    }
}
const dom = document.createElement(el.type);
dom.id = el.props.iddocument.querySelector("#root").append(dom);
const textNode = document.createTextNode("");
textNode.nodeValue = textEl.props.nodeValuedom.append(textNode)

此时在页面上也可以显示字符串’app’，接着继续优化代码，向官方API的形式靠拢
第二步，将vdom改成动态生成，dom渲染还是写死
此时可以抽取出两个函数，一个是创建元素节点的 createElement，另一个是创建文本节点的 createTextNode; main.js 文件更新如下：

function createTextNode(text) {
    return {
        type: "TEXT_ELEMENT",
        props: {
            nodeValue: text,
            children: []
        },
    }
}
function createElement(type, props, ...children) {
  return {
    type: type,
    props: {
      ...props,
      children: children.map((child) => {
        // 如果是字符串，则处理成文本节点
        return typeof child === "string" ? createTextNode(child) : child;
      }),
    },
  };
}

const textEl = createTextNode("app")
const App = createElement("div", { id: "app" }, createTextNode("app"));
const dom = document.createElement(App.type);
dom.id = App.props.id;
document.querySelector("#root").append(dom);
const textNode = document.createTextNode("");
textNode, nodeValue = textEl.props.nodeValue;
dom.append(textNode)

第三步，将vdom以及dom都改成动态生成，这时候需要添加 render 函数；同时为了更接近 React 的写法，将 render 封装成 ReactDOM 的调用形式， main.js 文件更新如下：


function createTextNode(text) {
    return {
        type: "TEXT_ELEMENT",
        props: {
            nodeValue: text,
            children: []
        },
    }
}
function createElement(type, props, ...children) {
  return {
    type: type,
    props: {
      ...props,
      children: children.map((child) => {
        // 如果是字符串，则处理成文本节点
        return typeof child === "string" ? createTextNode(child) : child;
      }),
    },
  };
}
/** 
 * 渲染函数，将虚拟DOM元素渲染到实际DOM容器中 
 * @param {object} el - 虚拟DOM元素 
 * @param {Element} container - 实际要添加进DOM容器 
 */
function render(el, container) {
    // 判断两种节点类型
    const dom = el.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(el.type);

    // 设置元素的属性
    Object.keys(el.props).forEach((key) => {
        if (key !== "children") {
            dom[key] = el.props[key];
        }
    });

    // 递归渲染子节点
    el.props.children.forEach((child) => {
        render(child, dom);
    });

    // 将DOM节点添加到容器中
    container.append(dom);
}
const ReactDOM = {
    createRoot(container) {
        return {
            render(App) {
                return render(App, container);
            },
        };
    },
};

// 使用
const App = createElement(
    "div",
    { id: "app" },
    "app",
    createElement("p", { id: "text" }, "Hello, App!")
);

ReactDOM.createRoot(document.getElementById("root")).render(App);

现在运行下项目，查看效果

在这里插入图片描述

最后，对代码结构进行整理。将 main.js 中的方法抽取到 core 目录下的 React.js 和 ReactDOM.js 文件中，然后再添加一个 App.js 文件。

目录结构如下：

├─ App.js
├─ index.html
├─ main.js
├─ core
|  ├─ React.js
|  └- ReactDOM.js

React.js 文件：

function createTextNode(text) {
    return {
        type: "TEXT_ELEMENT",
        props: {
            nodeValue: text,
            children: [],
        },
    };
}

function createElement(type, props, ...children) {
    return {
        type: type,
        props: {
            ...props,
            children: children.map((child) => {
                // 如果是字符串，则处理成文本节点
                return typeof child === "string" ? createTextNode(child) : child;
            }),
        },
    };
}

/** 
 * 渲染函数，将虚拟DOM元素渲染到实际DOM容器中 
 * @param {object} el - 虚拟DOM元素 
 * @param {Element} container - 实际要添加进DOM容器 
 */
function render(el, container) {
    // 判断两种节点类型
    const dom = el.type === "TEXT_ELEMENT" ? document.createTextNode("") : document.createElement(el.type);

    // 设置元素的属性
    Object.keys(el.props).forEach((key) => {
        if (key !== "children") {
            dom[key] = el.props[key];
        }
    });

    // 递归渲染子节点
    el.props.children.forEach((child) => {
        render(child, dom);
    });

    // 将DOM节点添加到容器中
    container.append(dom);
}

const React = { createElement, render };
export default React;

ReactDOM.js 文件：

import React from "./React.js";

const ReactDOM = {
    createRoot(container) {
        return {
            render(App) {
                return React.render(App, container);
            },
        };
    },
};

export default ReactDOM;

App.js 文件：

import React from "./core/React.js";

const App = React.createElement(
    "div",
    { id: "app" },
    "app",
    React.createElement("p", { id: "text" }, "Hello, App!")
);

export default App;

main.js 文件：

import ReactDOM from "./core/ReactDOM.js";
import App from "./App.js";

ReactDOM.createRoot(document.getElementById("root")).render(App);

这时候，代码结构和 React 官方的 API 比较接近了。
按照文章开头的实现思路，将大任务拆解为小任务，更清晰的去完善代码。
当然，还有许多需要继续完善的，可以带着问题继续优化代码，例如支持jsx的写法以及dom树大的时候渲染卡顿需要实现任务调度器等
继续努力吧💪

忽而_今夏
关注
  • 11
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Mini-React.zip
04-30
Mini-React模拟了这一行为，确保在合适的时机更新组件状态，并触发重渲染。 通过学习和分析Mini-React，开发者不仅可以深入理解React的基本原理，还能掌握如何优化性能和设计可维护的组件。这将对实际项目开发...
create-react-app修改为多页面支持的方法
12-03
在本文中，我们将探讨如何将`create-react-app`工作流修改为支持多页面的应用程序。`create-react-app`是React官方提供的一个脚手架，它默认配置了一个单页应用（SPA）的开发环境。但有时我们需要创建有SEO优化的多...
Drupal-React-burger:在 Drupal 中呈现的 React 组件
06-02
Drupal-React-汉堡 在 Drupal 中呈现的 React 组件 这是在 Drupal 中呈现的示例React组件。 这只是对如何集成 Drupal 和 React 的测试。 它不会在服务器上调用渲染，而是在 javascript 文件上调用。 该组件包括 ...
mini-react-store:[mini-react-store]没有助焊剂，只有mini-store用于React
05-11
import Store from 'mini-react-store' const store = new Store ( { store : { title : 'hello' , items : [ { name : 'one' } , { name : 'two' } ] } } ) class Item extends React . Component { ...
emoji-picker-react:React表情符号选择器
04-28
假定仅在用户在浏览器中进行交互之后才安装它。 将来可能会添加SSR支持。 安装 npm i emoji-picker-react 或者 yarn add emoji-picker-react v3的新功能 更大的表情库。 苹果表情符号，而不是表情符号。 最近使用...
TinyVue v3.17.0 正式发布，推出了一款基于 Quill 2.0 的富文本编辑器，功能强大、开箱即用！
OpenTiny的博客
07-17 1023
本文由体验技术团队Kagol老师原创~我们非常高兴地宣布，2024年6月26日，TinyVue 发布了 v3.17.0 🎉。TinyVue 每次大版本发布，都会给大家带来一些实用的新特性，上一个版本我们重构了 chart-core，新增 CircleProcessChart 圆环进度图等6个新的图表组件，并增加了 Statistic 数据统计组件。表格图片超链接复制粘贴插入表情文件上传@提醒斜杆菜单v-auto-tip。
Web 性能入门指南 - 2.2 理解和改进最大内容绘制 (LCP)
weixin_43303603的博客
07-15 414
最大内容绘制 (LCP) 衡量的是页面上最大视觉元素的渲染时间。为了让 Google 满意，请将 LCP 时间控制在 2 秒以内。
博客前端项目学习day03——框架页
qq_53237241的博客
07-19 261
【代码】博客前端项目学习day03——框架页。
【Web前端技术 01】 探索HTML5的奥秘：为初学者打造网页的基石
Wc&Yd博客
07-16 892
探索HTML5奥秘，本文带初学者迈入网页设计大门。详解HTML5文档结构、语义化标签、新增API，助您构建现代网页，激发学习兴趣，开启开发之旅。
前端性能优化--懒加载
weixin_43799793的博客
07-19 88
3、同时还可结合 lazy loading 属性，利用浏览器的原生属性，进一步优化图片加载，不过其延迟加载机制完全是由浏览器自身决定的，在不同浏览器上效果不同(BTW，部分浏览器可能并不支持)。2、然后对元素进行监听，当图片进入可视区域时，提取元素的 data-src 即真实的图片地址赋值给 src 属性，就会去发送请求加载图片，实现了懒加载。设置为 1 张 1px*1px 的透明图片用作占位符，以防止出现出错图标。TinyPNG 网站: https://tinypng.com/
vue3前端开发-如何让自己的网站适合SEO排名规则
yrldjsbk的博客
07-17 180
我们大家都知道，原始出生的vue3项目，原始代码层面，是没有meta标签的，也就是说，不适合SEO排名规则。SEO排名规则，蜘蛛爬虫抓取网站页面的内容，就会把这种meta标签内容进行采集，匹配。但是，这个技术要求大家还是应该知道的。黑马教育，课程，前端课程案例项目：小兔鲜儿超市，vue3前端项目案例。想学习vue3前端开发，拿来练习，实战的朋友们，值得一看哦。这个代码，就是我自己手工录入的。录入后，再次在浏览器界面刷新请求服务器。返回的代码模块就可以看见了。自己刚刚手工录入的meta信息出现了。
自定义 Hooks 在 Vue3 中的应用和重要性
CodeQi技术小栈的博客
07-16 1022
自定义Hooks是Vue3提供的一种将可复用逻辑提取到独立函数中的方式。这不仅可以减少代码的重复，还能让你的代码更加清晰易读，维护起来也更加方便。在这篇文章中，我将通过详细的步骤和实例，带你深入了解如何在Vue3中使用自定义Hooks，以及它们在实际项目中的应用和重要性。首先，我们来看一下如何创建一个简单的自定义Hook。在Vue3中，自定义Hook本质上就是一个返回特定功能的函数。让我们从一个简单的计数器例子开始。
前端小项目-强调鼠标悬停时效果的名片
关注收藏，可以私信解决问题！
07-19 835
在学习完HTML和CSS之后，我们就可以开始做一些小项目了。本篇文章所讲的小项目为——动态效果名片。通过这个项目，你将学会如何使用HTML和CSS来创建一个具有动态效果的名片。
【简历】惠州某二本学院：前端简历指导，秋招面试通过率为0
shuize123的博客
07-16 665
因为基本上写网址简历的，直接会被扔掉，会让面试官觉得你要么是上过网课，要么是上过培训，因为现在特别是二本的简历，非常之多，所以HR会一直找一个条件，能够去筛选掉简历，同学说是专业的TOP2，那这个至少比98%的他们同校的同学要好，整体来讲的话，还是不错的，后面可以再补充一下放最好的奖项，，所以这个同学，在二本的这个小群体里面，也是在小公司的秋招里面，在教育背景这块，是可以比大部分二本同学要好一点的。，但是他不会给你减分，他有怀疑，但是他不确定的情况下，他是会给你机会往下去看的，
React
weixin_45836841的博客
07-15 240
create-react-app（创建项目）：npx create-react-app xxx（xxx 项目名）
vue-print-nb 前端打印的一个实现方案
weixin_59685936的博客
07-19 385
vue-print-nb 前端打印的一个实现方案
使用JWT双令牌机制进行接口请求鉴权
北海之灵的博客
07-19 552
1.JWT的使用 2.双令牌模式 3.无感刷新 token
TypeScript 教程(三)：函数与对象类型
cdns_1的博客
07-15 773
在前两章中，我们介绍了 TypeScript 的基础知识，包括安装、配置和基本类型。在本章中，我们将深入探讨函数与对象类型，了解它们的定义与使用，并通过扩展知识点让你有更多的收获。TS 入门(一)：TypeScript 简介与安装TS 入门(二)：Typescript类型与类型注解通过本章的学习，你应该对 TypeScript 中的函数类型和对象类型有了更深入的理解，并掌握了类型别名和接口的使用。
前端Vue项目中腾讯地图SDK集成：经纬度与地址信息解析的实践
最新发布
chenchuang0128的博客
07-19 1021
在前端开发中，我们经常需要将经纬度信息转化为具体的地址信息，这对于定位、地图展示等功能至关重要。Vue作为现代前端框架的代表，其组件化开发的特性使得我们能够更高效地实现这一功能。本文将介绍如何在Vue项目中集成腾讯地图SDK，实现经纬度到地址信息的相互解析，并分享实践过程中的一些经验和注意事项。一、腾讯地图SDK的引入首先，我们需要在Vue项目中引入腾讯地图SDK。
用create-react-app创建 的react项目中实现多页面应用
03-29
2. 在 index.js 文件中编写 React 组件，作为页面的内容。 3. 在 index.html 文件中引入打包后的 js 文件和其他必要的资源文件。 4. 在 public 目录下创建多个 html 文件，分别对应不同的页面，如 page1.html、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值