微软正在放弃React

最近,微软Edge团队撰写了一篇文章,介绍了微软团队如何努力提升Edge浏览器的性能。但在文中,微软对React提出了批评,并宣布他们将不再在Edge浏览器的开发中使用React。

我将详细解析他们的整篇文章内容,探讨这一决定对React、JavaScript开发者的影响,以及微软Edge团队背后的真正意图。

一、历史背景

微软Edge浏览器是基于Chromium构建的,Chromium是谷歌的一个开源网络浏览器项目。微软Edge的默认用户界面来源于Chromium。

显而易见,微软不希望Edge看起来像Chrome。因此,Edge拥有一套由微软设计的用户界面组件和元素。然而,这些组件是利用React开发的。

Edge中的许多小部件都是通过React创建的,它们共同构成了整个浏览器。

实际上,Edge浏览器并非一个彻头彻尾的React项目。它更像是一个精巧的拼图,通过HTML页面巧妙地嵌入了多个React驱动的小部件,诸如菜单、下拉列表以及收藏夹标签,都藏着React编织的小魔法。

可这样的做法并不那么灵光,尤其是面对那些鲜少变动的UI信息时,显得有点力不从心。其效率低下导致微软开始对React产生质疑。

但这个故事远未揭开全部真相。我们很快就会发现,到底是React有问题,还是微软在设计上存在人为缺陷。

二、问题所在

微软声称React效率不高,因此他们进行了改进,并于2024年5月28日发布的一篇文章中宣布了这一消息。

微软注意到,多个组件间共享的捆绑包过大,这导致了浏览器运行速度减慢。

理论上,这些组件不应共用一个捆绑包,但既然微软指出了这个问题,以下是他们的理由:

1.UI代码存在模块化问题。不同组件团队不当共享了通用代码包和文件,导致UI界面中一个区域因加载了不必要的共享资源而拖累了另一个区域的加载速度。

2.微软采用了一个框架,该框架依赖JavaScript,通过客户端渲染技术来呈现UI。微软声称,这是导致其浏览器速度变慢的第二个原因。

如前所述,Edge浏览器中集成了多个React应用。

他们并未启动多个React项目,而是在多个位置使用了一个单一的JavaScript包,并将该包挂载到了许多组件中的多个属性上。

而第二个原因正是我撰写本文的缘由。微软间接地指出,React正是导致其代码包问题的框架。

图片

图片

          

微软时不时提及React,是因为他们正全速推进像React Native这样针对Windows、MacOS乃至Xbox的项目。但对于Edge浏览器,React似乎成了他们不愿触及的“逆鳞”。

即便是亲手操刀React Native的开发,微软也迟迟未让其涉足Edge的领地。作为一款原生桌面应用,Edge与React Native看似天作之合,但微软对此有不同的看法。   

过去,借助HTML、CSS、JavaScript,乃至React来搭建菜单、下拉框等界面元素,是业界的“金科玉律”。而今,微软决意转身,背后自有一番深思熟虑的考量。

图片

图片

在过去,菜单及其选项通常是独立的HTML文件。每个执行特定操作的按钮或链接都会重定向到一个HTML文件。

然而,这种旧模式主要适用于诸如菜单之类的组件。但显然,微软并未完全理解这一点。

他们为每个简单的组件使用带有React的HTML文件。每个HTML文件都需要JavaScript。并且,他们将这些JavaScript代码作为捆绑包与每个团队共享。

微软将多个HTML页面(在React应用中)嵌入浏览器中以控制整个用户界面。现在,他们正在寻找解决这两个问题的办法。

三、解决方案

首先,问题并不在于React本身,而是微软错误地实施了它。

理想的状况下,每个代码包应服务于特定的网页,独立地完成其功能。每个页面可以有自己的独立代码包或集合。

但是,当你在不同团队的工作中共享相同的代码包或文件时,混乱几乎是必然的。每个团队都在访问和修改相同的代码包。

结果不出所料。React并非不适合他们的用途,而是他们使用方式不当。React本身并不慢,但当你创建了数十个实例时,就不能指望它还能保持极高的运行速度。

微软针对自己造成的问题提出了解决方案:他们创建了一个自定义框架。

微软宣布了WebUI 2.0——这是一种以标记优先的架构。它通过最小化代码包的大小及初始化路径中运行的JavaScript量,解决了代码包过大的问题。

微软已开始使用这一新架构来解决我前面提到的两个问题。他们错误地使用了React,忽略了React Native的存在,并解决了一个本可避免的问题。

起初,他们在每个组件中使用了含有React的独立HTML文件。然后,他们将每个HTML文件所需的JavaScript代码卸载到了一个共享包中,这个包同时供其他十个团队使用。而现在,他们不再使用React了。

对此,你怎么看呢?可以把你的想法写在评论区。 

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

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

相关文章

笔记:SpringBoot+Vue全栈开发2

笔记:SpringBootVue全栈开发2 1. MVVM模式2. Vue组件化开发3. 第三方组件element-ui的使用4. axios网络请求5. 前端路由VueRouter 1. MVVM模式 MVVM是Model-View-ViewModel的缩写,是一种基于前端开发的架构模式,其核心是提供对View和ViewMod…

【全面介绍下如何使用Zoom视频会议软件!】

🎥博主:程序员不想YY啊 💫CSDN优质创作者,CSDN实力新星,CSDN博客专家 🤗点赞🎈收藏⭐再看💫养成习惯 ✨希望本文对您有所裨益,如有不足之处,欢迎在评论区提出…

如何使用Python脚本实现SSH登录

调试IDE:PyCharm Python库:Paramiko 首先安装Paramiko包到PyCharm,具体步骤为:在打开的PyCharm工具中,选择顶部菜单栏中“File”下的“Settings”,在设置对话框中,选择“Project”下的“Proje…

线程安全的原因及解决方法

什么是线程安全问题 线程安全问题指的是在多线程编程环境中,由于多个线程共享数据或资源,并且这些线程对共享数据或资源的访问和操作没有正确地同步,导致数据的不一致、脏读、不可重复读、幻读等问题。线程安全问题的出现,通常是…

视频提取字幕怎么弄?5个快速获取视频字幕的方法

在忙碌而又充满活力的生活中,我们常常在通勤路上和午休间隙通过视频来获取信息和放松心情。 但有时候,我们想把视频里那些令人难忘的瞬间或关键信息保存下来,方便以后回顾或者分享。然而,手动摘录不仅费时,还容易漏掉…

【网络安全】实验七(ISA防火墙的规则设置)

一、实验目的 二、配置环境 打开两台虚拟机,并参照下图,搭建网络拓扑环境,要求两台虚拟机的IP地址要按照图中的标识进行设置,并根据搭建完成情况,勾选对应选项。注:此处的学号本人学号的最后两位数字&…

VRay渲染有什么技巧?渲染100邀请码1a12

渲染是视觉行业非常重要的一环,没有渲染就没有效果图,常用的渲染器有Vray,而Vray渲染有很多技巧,可以让渲染更快更省,下面我们总结下。 1、删除无用对象 检查场景,看是否有一些不需要渲染的物体和灯光&am…

时间处理的未来:Java 8全新日期与时间API完全解析

文章目录 一、改进背景二、本地日期时间三、时区日期时间四、格式化 一、改进背景 Java 8针对时间处理进行了全面的改进,重新设计了所有日期时间、日历及时区相关的 API。并把它们都统一放置在 java.time 包和子包下。 Java5的不足之处: 非线程安全&…

十一、作业

1.从大到小输出 写代码将三个整数数按从大到小输出。 void Swap(int* px, int* py) {int tmp *px;*px *py;*py tmp;} int main() {int a 0;int b 0;int c 0;scanf("%d %d %d", &a, &b, &c);int n 0;if (a<b){Swap(&a, &b);}if (a &l…

移动校园(2):express构建服务器,小程序调用接口,展示数据

express做服务器框架&#xff0c;mssql连接数据库&#xff0c;uni-request调用接口 这是文件夹目录 然后是index.js内容 const expressrequire(express) const appexpress() const uniRouterrequire("./uniRouter") const config{user:sa,password:123456,server:l…

基于YOLOv5的人脸目标检测

本文是在之前的基于yolov5的人脸关键点检测项目上扩展来的。因为人脸目标检测的效果将直接影响到人脸关键点检测的效果&#xff0c;因此本文主要讲解利用yolov5训练人脸目标检测(关键点检测可以看我人脸关键点检测文章) 基于yolov5的人脸关键点检测&#xff1a;人脸关键点检测…

批导会计凭证程序报错,通过监控点和消息类来定位触发的位置

ZFIU001 批导会计凭证报错&#xff0c;通过监控点和消息类来定位触发的位置 在使用程序导入会计凭证的时候&#xff0c;发现报错&#xff0c;后面找了很久很久的系统标准程序&#xff0c;打断点才找到这个位置&#xff0c;使用监控点还是可以比较快速找到报错的原因的&#xff…

QWidget窗口抗锯齿圆角的一个实现方案(支持子控件)2

QWidget窗口抗锯齿圆角的一个实现方案&#xff08;支持子控件&#xff09;2 本方案使用了QGraphicsEffect&#xff0c;由于QGraphicsEffect对一些控件会有渲染问题&#xff0c;比如列表、表格等&#xff0c;所以暂时仅作为研究&#xff0c;优先其他方案 在之前的文章中&#…

昇思学习打卡-10-ShuffleNet图像分类

文章目录 网络介绍网络结构部分实现对应网络结构 模型训练shuffleNet的优缺点总结优点不足 网络介绍 ShuffleNet主要应用在移动端&#xff0c;所以模型的设计目标就是利用有限的计算资源来达到最好的模型精度。ShuffleNetV1的设计核心是引入了两种操作&#xff1a;Pointwise G…

国内采用docker部署open-metadata

背景 最近看看开源的元数据管理项目&#xff0c;比较出名点的有open-metadata、datahub、OpenLineage、atlas。 open-metadata有1千多的贡献者&#xff0c;4.8K的stars&#xff0c;社区现在也比较活跃&#xff0c;支持的数据库类型还蛮多&#xff0c;基本市面上常见的都有支持…

【每日一练】python三目运算符的用法

""" 三目运算符与基础运算的对比 """ a 1 b 2#1.基础if运算判断写法&#xff1a; if a > b:print("基础判断输出&#xff1a;a大于b") else:print("基础判断输出&#xff1a; a不大于b")#2.三目运算法判断&#xff1a;…

揭秘IP:从虚拟地址到现实世界的精准定位

1.IP地址介绍 1.内网 IP 地址&#xff08;私有 IP 地址&#xff09; 内网 IP 地址&#xff0c;即私有 IP 地址&#xff0c;是在局域网&#xff08;LAN&#xff09;内部使用的 IP 地址。这些地址不会在公共互联网中路由&#xff0c;因此可以在多个局域网中重复使用。私有 IP 地…

股票Level-2行情是什么,应该怎么使用,从哪里获取数据

行情接入方法 level2行情websocket接入方法-CSDN博客 相比传统的股票行情&#xff0c;Level-2行情为投资者打开了更广阔的视野&#xff0c;不仅限于买一卖一的表面数据&#xff0c;而是深入到市场的核心&#xff0c;提供了十档乃至千档的行情信息&#xff08;沪市十档&#…

STM32第十六课:WiFi模块的配置及应用

文章目录 需求一、WiFi模块概要二、配置流程1.配置通信串口&#xff0c;引脚和中断2.AT指令3.发送逻辑编写 三、需求实现代码总结 需求 完成WiFi模块的配置,使其最终能和服务器相互发送消息。 一、WiFi模块概要 本次使用的WiFi模块为ESP-12F模块&#xff08;安信可&#xf…