为什么Vue(默认情况下)比React性能更好

2022-11-24 0 945

为什么Vue(默认情况下)比React性能更好
时评
Vue2与Vue3基本功小册子
译者:后端小智
19.9币
1人扬皮尔区
查阅

责任编辑并非要辩论会 Vue 好却是 React 好,而要要看一看这三个架构在低阶上是怎样优先选择的。

我晓得很多开发人员在优先选择架构以后会偏激于看基准。但是,这并并非最关键性的各方面,即使99%的操控性都源自于你写的标识符,而并非你采用的架构。

所以,我是怎样得出结论那个推论的呢?

这儿挑选出了四个常用的web插件难题,并检查和了Vue和React在每一情景中的积极响应情形。

工程项目

这儿有两个类似于 TODO 的工程项目,但是这儿加进的并非事宜而要蔬果。

为什么Vue(默认情况下)比React性能更好

下面是 React 标识符:

为什么Vue(默认情况下)比React性能更好

Vue 标识符:

为什么Vue(默认情况下)比React性能更好

测试1:静态模块

在第两个测试中,我们将比较 React 和 Vue 是怎样编译静态部分的。

先来看一看React:

为什么Vue(默认情况下)比React性能更好

如上图所示,在 JSX 中,编译器是非常简单的。所有的 JSX 元素都被替换成 React 的createElement函数。它将在插件的每次状态更新时重新渲染所有静态元素。

再来看一看 Vue 中是怎么做的:

为什么Vue(默认情况下)比React性能更好

可能看起来很多复杂,但这儿注意一下 hoisted_1 变量和 setup 方法。正如我们所看到的,hoisted_1变量包含了我们的静态内容,并被定义在 setup函数之外。

在编译过程中,Vue检测所有不依赖于插件状态的静态节点,并将变量提升到组件设置之外,这样它就不必在每次渲染后重新生成这些静态节点。

小结

React 只将 JSX 编译为JS,而 Vue 通过提升有效地优化了静态块。这种优化对具有许多节点和深层树状结构的大页面是有益的。

测试2:重新渲染

React 和 Vue 之间的显著差异在这第二个测试中显现出来。

当我们在文本输入中输入 “TEST “时,React 插件的控制台:

为什么Vue(默认情况下)比React性能更好

我们可以看到,MyFruits组件被渲染了五次。

在父组件的第一次渲染时一次在输入中每按一次键,就有四次(test 的个数)。

再来看一看 Vue 的情形:

为什么Vue(默认情况下)比React性能更好

MyFruits组件只渲染了一次。

预设情形下,Vue中的任何孩子组件都是有缓存。只有当它的 props 发生变化时,它才会被重新渲染。

React 中无论 props是否改变,都会重新渲染。

因此,Vue 中的同等标识符比 React 的操控性更强。

React 是怎么来解决那个难题的?

在React中,开发人员可以优先选择通过采用memo helper来启用 memoization。可以通过下面的标识符来完成:

为什么Vue(默认情况下)比React性能更好

但是,这需要额外的标识符来达到相同的性能。

测试 3:计算属性

在Vue中,两个计算属性是两个将根据其他属性而被重新计算粜的的值。例如,两个 hashed password 只有在 password 被改变时才会被重新计算。

在 React 中:

为什么Vue(默认情况下)比React性能更好

每次渲染时都会调用 hash 。

在Vue中,只有在采用 hashed时才会重新执行。如果该值在模板中并非必需的,就不会重新执行。此外,Vue 隐含地检测到了依赖关系,只有在 password 改变时才会进行计算。

为什么Vue(默认情况下)比React性能更好

这在 React中也是可行的,也也是需要额外的标识符:

为什么Vue(默认情况下)比React性能更好

我们需要调用 useMemo 并提供两个依赖数组。此外,React 无法检测到模板中是否采用了 hashed 变量,并会在第一次渲染时计算 hash

这是两个非常简单的例子,但要考虑复杂的操作。这将极大地影响组件的渲染时间,特别是当计算的属性在初始渲染时没有被采用时。

所以 Vue > React?

不,经过上面所有的例子,你可能认为 Vue 比 Reac t的操控性更快。但这是错误的。事实上,这三个库有不同的理念。Vue 是隐式的,而 React 是显式的。

怎么说?

Vue 是老好人,偏激于将尽可能多的事情自动化,因此开发人员可以专注于业务逻辑。Vue 预设提供更快的操控性。

另一各方面,如果我们想开发更复杂的功能,这也会导致缺乏一些灵活性。如果你没有真正掌握 Vue组件的生命周期,你可能会花很多时间来调试一些愚蠢的标识符。

另外,React 比较懒,需要开发人员自己动手,但是,这样也给我们带来更多的灵活性。但也会多写些标识符,像上面的四个例子一样,才能达到与Vue相同的操控性。

综上,如果是新手,可以先从 vue 上手,比较好入手。相比之下,React 适合那些已经有基于组件的架构工作经验的开发人员。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务