微软正在放弃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了。

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java对象通用比对工具

目录 背景 思路 实现 背景 前段时间的任务中,遇到了需要识别两个对象不同属性的场景,如果使用传统的一个个属性比对equals方法,会存在大量的重复工作,而且为对象新增了属性后,比对方法也需要同步修改,不方…

微软拼音输入法不显示选字框问题

问题展示:不显示选字框 解决方式 打开兼容性即可(估计是升级带来的bug)

STM32 - 内存分区与OTA

最近搞MCU,发现它与SOC之间存在诸多差异,不能沿用SOC上一些技术理论。本文以STM L4为例,总结了一些STM32 小白入门指南。 标题MCU没有DDR? 是的。MCU并没有DDR,而是让代码存储在nor flash上,临时变量和栈…

LeetCode题练习与总结:直线上最多的点数--149

一、题目描述 给你一个数组 points ,其中 points[i] [xi, yi] 表示 X-Y 平面上的一个点。求最多有多少个点在同一条直线上。 示例 1: 输入:points [[1,1],[2,2],[3,3]] 输出:3示例 2: 输入:points [[1,…

水箱高低水位浮球液位开关

水箱高低水位浮球液位开关概述 水箱高低水位浮球液位开关是一种用于监测和控制水箱中液位的自动化设备,它能够在水箱液位达到预设的高低限制时,输出开关信号,以控制水泵或电磁阀的开闭,从而维持水箱液位在一个安全的范围内。这类设…

STM32快速复习(八)SPI通信

文章目录 前言一、SPI是什么?SPI的硬件电路?SPI发送的时序?二、库函数二、库函数示例代码总结 前言 SPI和IIC通信算是我在大学和面试中用的最多,问的最多的通信协议 IIC问到了,一般SPI也一定会问到。 SPI相对于IIC多了…

3.js - 模板渲染 - 简单

3.js 真tm枯燥啊,狗都不学 效果图 源码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/li…

【数据结构】09.树与二叉树

一、树的概念与结构 1.1 树的概念 树是一种非线性的数据结构,它是由n(n>0)个有限结点组成一个具有层次关系的集合。把它叫做树是因为它看起来像一棵倒挂的树,也就是说它是根朝上,而叶朝下的。 根结点:根…

webGL可用的14种3D文件格式,但要具体问题具体分析。

hello,我威斯数据,你在网上看到的各种炫酷的3d交互效果,背后都必须有三维文件支撑,就好比你网页的时候,得有设计稿源文件一样。WebGL是一种基于OpenGL ES 2.0标准的3D图形库,可以在网页上实现硬件加速的3D图…

阶段三:项目开发---大数据开发运行环境搭建:任务2:安装配置ZooKeeper

任务描述 知识点:安装配置ZooKeeper 重 点: 安装配置ZooKeeper 难 点:无 内 容: ZooKeeper是一个开源分布式协调服务,其独特的Leader-Follower集群结构,很好的解决了分布式单点问题。目前主要用于诸…

IT之家最新科技热点 | 小米 AI 研究院开创多模态通用模型

人不走空 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌赋:斯是陋室,惟吾德馨 目录 🌈个人主页:人不走空 💖系列专栏:算法专题 ⏰诗词歌…

一.2.(3)放大电路的图解分析方法和微变等效电路分析方法;

放大电路的主要分析方法:图解法、微变等效电路法 这里以共射放大电路为例 (1) 图解法: 1.静态分析 首先确定静态工作点Q,然后根据电路的特点,做出直流负载线,进而画出交流负载线,最后,画出各极电流电压的波形。求出最大不失真输出电压。 估算IBQ,然后根据数据手册里…

二分查找2

1. 山脉数组的峰顶索引&#xff08;852&#xff09; 题目描述&#xff1a; 算法原理&#xff1a; 根据题意我们可以将数组分为两个部分&#xff0c;一个部分是arr[mid-1]<arr[mid]&#xff0c;另一个部分为arr[mid-1]>arr[mid]&#xff0c;此时不难发现我们可以将二分…

U.S.News发布全美最佳本科AI专业排名

10 加州大学圣迭戈分校 University of California, San Diego UCSD的人工智能项目从事广泛的理论和实验研究&#xff0c;学校的优势领域包括机器学习、不确定性下的推理和认知建模。除了理论学习&#xff0c;UCSD教授非常注重把计算机知识运用到自然语言处理、数据挖掘、计算…

从模拟到预测,从智能到智慧:数字孪生技术在水库管理中的应用演变,推动水利行业向更高层次的智慧化迈进

目录 引言 一、数字孪生技术概述 二、数字孪生技术在水库管理中的应用演变 1. 从模拟到预测&#xff1a;构建精准的数字孪生模型 2. 从智能到智慧&#xff1a;实现全面感知与精准控制 3. 推动公众参与与透明化管理 三、数字孪生技术推动水利行业向更高层次的智慧化迈进 …

密室逃脱——收集版修改测试

一、原版修改 1、导入资源 Unity Learn | 3D Beginner: Complete Project | URP 2、设置Scene 删除SampleScene&#xff0c;打开UnityTechnologies-3DBeginnerComplete下的MainScene 3、降低音量 (1) 打开Hierarchy面板上的Audio降低音量 (2) 打开Prefabs文件夹&#xf…

推荐3款【王炸级别】的效率软件,免费无广告,你一定要收藏

Temp Cleaner Temp Cleaner 是一款专为 Windows 操作系统设计的临时文件清理工具。它的主要功能是安全且快速地清理磁盘上的临时文件和系统缓存&#xff0c;从而释放磁盘空间。该软件体积小巧&#xff08;仅有826KB&#xff09;&#xff0c;并且是无广告的绿色软件&#xff0c;…

智能交通(3)——Learning Phase Competition for Traffic Signal Control

论文分享 https://dl.acm.org/doi/pdf/10.1145/3357384.3357900https://dl.acm.org/doi/pdf/10.1145/3357384.3357900 论文代码 https://github.com/gjzheng93/frap-pubhttps://github.com/gjzheng93/frap-pub 摘要 越来越多可用的城市数据和先进的学习技术使人们能够提…

初学Spring之 AOP 面向切面编程

AOP&#xff08;Aspect Oriented Programming&#xff09;面向切面编程 通过预编译方式和运行期间动态代理实现程序功能的统一维护的一种技术 是面向对象&#xff08;OOP&#xff09;的延续 AOP 在 Spring 中的作用&#xff1a; 1.提供声明式事务 2.允许用户自定义切面 导…

Java 基础--File - IO流(2)

I/O流 定义 数据从硬盘流向内存为输入流&#xff0c;数据从内存流向硬盘为输出流。输入也叫读取数据&#xff0c;输出也叫写出数据。 IO分类 1.按照数据的流向分为&#xff1a;输入流和输出流 ①输入流&#xff1a;把数据从其他设备上读取到内存中的流 ②输出流&#xff1…