Vue 最快,但我们团队还是选择拥抱 React !

职场   2024-11-28 08:33   江苏  

点击下方“前端开发爱好者”,选择“设为星标

第一时间关注技术干货!

哈喽,大家好,我是 xy👨🏻‍💻。Vue 速度最快,但我们团队还是选择拥抱 React !!

在前端开发的世界里,性能一直是衡量框架优劣的重要标准之一。

最近,Vue.js 因为其卓越的性能表现而备受瞩目。

近日,Vue.js 团队宣布,Vue 的响应式系统将成为所有框架中最快的,这背后,alien-signals 信号库功不可没。

什么是 alien-signals?

alien-signals 是一个轻量级的信号库,由 StackBlitz 推出

目标是创建一个具有最低开销的 signal 库。这个库通过一系列限制条件实现了卓越的性能:

  • 不使用动态对象字段
  • 不使用 Array/Set/Map
  • 不进行递归调用
  • 类属性少于 10 个

alien-signals 能够在不使用复杂调度策略的情况下实现信号库的卓越性能,其整体性能约为 Vue 3.4 响应式系统的 **400%**。

alien-signals 的主要特点

alien-signals 基于推拉模型,旨在实现高性能的代码生成。

Vue 3.5 中,响应式系统转向了 Pull 模式,而 alien-signals 继续研究 Push-Pull 模式,虽然受到双向链表概念的启发,但并没有采用类似的实现。

性能提升

Vue.js 3.4 版本中,响应式系统经过了重构,使得 effect 触发更为精确和高效。而 alien-signals 的引入,进一步将性能提升超过 30 倍(随规模增加而提升),特别是在更改 ref 后读取大量 computed 的场景中。

内存使用量降低

在创建大量 refcomputedeffect 实例时,内存使用减少了约 13%(从 2.3MB 降低到 2.0MB)。

尽管 Vue.js 的性能提升令人瞩目,但我们团队还是选择拥抱 React

React 没有采用 alien-signals

React 没有采用 alien-signals,主要是因为它与 React 的设计理念生态系统性能优化方向兼容性迁移成本以及发展路线有关:

  • 不同的设计理念:React 有自己的设计哲学和架构,它的核心是虚拟 DOM 和声明式编程。React 团队认为,React 的模式是在每次更新时“假装”重新创建所有内容,这种模式与 alien-signals 的响应式系统有所不同。React 核心团队成员 Andrew Clark 曾表示,虽然可能会在 React 中添加一个类似 Signals 的基元,但他并不认为这是编写 UI 代码的好方法。React 更倾向于通过编译器来实现与之相当的性能。

  • 生态和社区:React 拥有一个强大的社区和生态系统,许多第三方库提供了类似于 Signals 的功能,例如 mobx-react 和 @preact/signals-react。这些库尝试为 React 带来类似 Signals 的体验,但它们的实现和使用方式与 alien-signals 不同,并且可能存在一些与 React 集成的问题。

  • 性能优化的方向:React 团队可能认为,通过优化现有的架构和利用编译器技术(如 React 的未来版本可能会使用的编译器),可以达到与 alien-signals 相当的性能,而无需引入一个全新的响应式系统。

  • 兼容性和迁移成本:React 已经拥有广泛的用户基础和大量的现有代码。引入 alien-signals 这样的新系统可能会带来兼容性问题和迁移成本,这对于 React 和其社区来说是一个需要慎重考虑的问题。

  • React 的发展路线:React 的发展路线图可能已经规划了其他性能优化和新特性的引入,这些可能与 alien-signals 的目标和方法不完全一致。React 团队可能更倾向于沿着自己的路线图前进,而不是采用外部的解决方案。

React 占据主流的原因

React 之所以能够在前端框架中引领主流,确实不仅仅是因为性能,还因为其在工程化组织灵活度可扩展性等方面的优势。

以下是 React 在这些方面的特点:

组织灵活度

  • React 的组件化开发模式使得项目结构清晰,便于团队协作和维护。通过将 UI 拆分成独立的组件,React 提高了代码的可维护性和可重用性。
  • 组件化开发还允许开发者根据项目需求灵活地组合和重用组件,这增加了项目的适应性和灵活性。

可扩展性

  • React 的应用通常从简单的项目开始,但可以逐渐扩展到复杂的大型应用程序。这种渐进式的应用开发使得 React 非常适合不同规模的项目。
  • 通过结合使用 Redux、React-router 等工具,React 应用可以构建出高度可扩展的前端应用。

工程化便利度

  • 随着前端项目的复杂度提升,工程化成为提高开发效率和代码质量的关键。React 提供了从项目搭建到自动化部署的全流程最佳实践,帮助开发者构建高效、稳定的前端工程。
  • 使用如 UmiCreate React App 这样的脚手架可以快速启动项目,并提供了丰富的插件和配置选项,简化了初始配置。

性能优化

  • 尽管 React 可能在某些性能测试中不是最快的框架,但它提供了多种性能优化手段,如useMemouseCallback等 Hooks,以及 React 的并发特性和Suspense组件,这些都使得 React 应用能够在实际使用中表现出良好的性能。
  • React 的虚拟 DOM 和优化算法使其在处理大量数据和高频交互时保持流畅的性能。

生态系统

  • React 拥有一个强大的社区和生态系统,提供了丰富的工具、库和开源项目,这些都是 React 工程化和性能优化的重要支撑。

总结,React 之所以能够成为主流前端框架,是因为它在工程化组织灵活度可扩展性等方面的优势,这些优势使得 React 不仅适合构建小型项目,也能够适应大型和复杂的应用需求。

虽然在某些性能测试中可能不是最佳,但 React 的性能优化手段和生态系统的支持使其在实际应用中表现出色。

点击上方“前端开发爱好者”,选择“设为星标
第一时间关注技术干货!

前端开发爱好者
分享 web 前端相关技术文章、工具资源、精选课程、视频教程资源、热点资讯等
 最新文章