hello 大家好,我是 superZidan,这篇文章想跟大家聊聊 微软决定弃用 React
,如果大家遇到任何问题,欢迎 联系我 或者直接微信添加 superZidan41
🔥🔥🔥 前方高能,干货满满,建议点赞➕关注➕收藏;
最近,Microsoft Edge 团队发表了一篇文章,介绍了他们如何改进 Edge 浏览器以提升其速度。
在文章中,微软对 React 提出了一些批评,并宣布他们将不再在 Edge 浏览器中使用 React。
接下来,我将详细解释这篇文章的内容,分析这对 React 和 JavaScript 开发者的影响,以及 Microsoft Edge 团队的真正意图。
历史
Microsoft Edge 是基于 Google 的开源浏览器项目 Chromium 构建的,默认用户界面来源于 Chromium。
为了避免 Edge 和 Chrome 看起来相似,微软为 Edge 设计了独特的用户界面组件和元素,而且这些组件是用 React 开发的。
在 Edge 浏览器中,许多小组件是用 React 创建的,它们共同构成了整个浏览器。
然而,整个 Edge 浏览器并不是一个完整的 React 应用程序。它使用包含 React 的 HTML 页面组合多个组件。菜单、下拉菜单和收藏标签都是小型的 React 应用程序。
这并不高效,对吧?尤其是对于那些数据不会动态变化的用户界面来说。这种低效率让微软对使用 React 产生了疑问。
但这只是冰山一角。我们很快会揭示,到底是 React 自身的问题,还是微软人为制造的缺陷。
问题
微软认为 React 效率不高,因此他们进行了改进,并在 2024 年 5 月 28 日发表的文章中宣布了这一消息。
微软发现组件之间的共享代码包过大,导致浏览器变慢。
他们本不应该在不同组件之间共享代码包,但这是一个问题。以下是他们的理由:
- 用户界面代码的模块化问题。不同组件的团队共享了公共包、文件等。可能会出现某一部分使用了共享包,但共享包里包含了不必要的内容,从而导致这部分的用户界面被拖慢
- 微软使用了 JavaScript 的框架并使用客户端渲染的技术方案,这是导致微软浏览器变慢的第二个原因。
正如我之前解释的那样,Edge 共享了多个 React 应用程序。
他们并没有创建多个 React 项目,而是在多个地方使用同一个 JavaScript 包,并将该包挂载到多个组件的属性上。
JavaScript 包是一种优化技术,它将多个 JavaScript 文件组合成一个文件,以有效减少服务器请求并提高处理效率。
而第二个原因正是我写这篇文章的原因。微软间接指出,React 是导致他们代码包问题的罪魁祸首。
微软间接地提到了React,因为他们正在开发基于 React 的项目,例如用于Windows、MacOS和Xbox 的 React Native。然而他们仍然不愿意在Edge中使用React
尽管微软正在开发 React Native,但他们仍然没有在 Edge 浏览器中使用它。Edge 是一个原生桌面应用程序,React Native 本应是一个理想的解决方案,但微软有不同的看法。
这是因为在过去,使用 HTML、CSS 和 JavaScript 或 React 来制作菜单、下拉菜单等是常见的模式。那么他们为什么要改变这种做法呢?
在早期,菜单及其选项都是独立的 HTML 文件。每个按钮或链接执行特定操作时都会跳转到一个 HTML 文件。
然而,这种旧模式仅用于菜单等组件,但微软显然没有意识到这一点。
他们为每一个简单的组件都使用了带有 React 的 HTML 文件。每个 HTML 文件都需要 JavaScript,并且他们将这些 JavaScript 代码作为代码包共享给每个团队。
微软在他们的浏览器中嵌入了多个 HTML 页面(在 React 应用中)来控制整个用户界面。现在,他们正在寻找一个能够解决这些问题的方案。
解决方案
首先,问题不在于 React,而在于微软的错误使用。
一个包(bundle)应该针对特定的网页工作,并能够独立完成其功能。每个页面可以有单独的包。
然而,当你在不同团队之间共享相同的包或文件时,可以预料到可能会出现混乱。每个团队都会访问并修改相同的包。
结果是可以预见的。React 并不是为他们那样的使用方式设计的。React 并不慢,但当你创建几十个实例时,也不能期望它速度飞快。
微软为他们自己引发的问题想出了一个解决方案。他们创建了一个自定义框架。
微软发布了 WebUI 2.0(不是 Web 2.0)。这是一种「标记优先」的架构。它通过最小化代码包体积和初始化时运行的 JavaScript 数量来解决大代码包的问题。
微软已经开始使用这种新架构来解决之前提到的两个问题。他们错误地使用了 React,忽视了 React Native 的存在,并试图解决一个自己制造的问题。
最初,他们为每个组件使用了包含 React 的独立 HTML 文件。然后,他们将每个 HTML 文件所需的 JavaScript 代码载入到一个由其他十个团队共享的包中。
现在,他们已经不再使用 React。
写在最后
如果你发现这篇博文有帮助,欢迎与其他人分享。 你还可以关注我,了解有关 AI、 Javascript、React 和其他 Web 开发主题的更多内容。与往常一样,如果你有任何疑问,请随时与我联系或发表评论。如果大家遇到任何问题,欢迎 联系我 或者直接微信添加 superZidan41。祝你编程愉快!
本文为翻译文,原文地址:medium.com/javascript-…