为什么vue不需要fiber架构?

最近笔者在学习react的fiber,学习过程中不禁想到:为什么react需要fiber架构来优化,但是vue不需要fiber架构。

搜集了相关资料并学习后,觉得还蛮有意思,于是就写下来这篇文章来记录下这个问题,如有问题,欢迎指正。

目录

根本原因

何为响应式

 原生js实现

react实现

vue实现

react和vue如何实现响应式

视图更新流程

vue响应式实现原理

react响应式实现原理

区别

Fiber


根本原因

这个问题最根本的原因:react和vue响应式实现方式的不同。

何为响应式

什么是响应式呢?让我们看看vue和react官网是如何解释的

vue官网

react官网

 为什么vue不需要fiber架构?_第1张图片

 原生js实现

如果我们使用原生的js去让对应的视图发生变化,该如何实现呢?

  1. 获取到对应的dom
  2. 修改dom的值

react实现

使用setState去修改对应的值就行了,之后对应的视图展示会自动展示成刚才修改的值。

vue实现

直接修改对应state的值,之后对应的视图展示会自动展示成刚才修改的值。

react和vue如何实现响应式

视图更新流程

  1. 触发视图更新,根据变化生成新的虚拟dom树
  2. 新旧虚拟dom树对比,找出变化的部分(diff)
  3. 将变化的部分更新到真实的dom

我们来看官网是如何说的

vue响应式实现原理

官方文档原话:

如何追踪变化

当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项,Vue 将遍历此对象所有的 property,并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性,这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

这些 getter/setter 对用户来说是不可见的,但是在内部它们让 Vue 能够追踪依赖,在 property 被访问和修改时通知变更。”

详见:深入响应式原理 — Vue.js

简单来说就是对数据进行劫持(vue3使用的是Proxy):当该数据发生变化的时候,就知道该找谁,做什么。

react响应式实现原理

react状态改变需要setXXX来触发,当触发之后,会从《声明该state的组件(调用useState的组件)》开始,往下渲染(该组件&其子组件全部都要渲染)。

官方文档原话:

“一旦组件被初次渲染,您就可以通过使用set函数更新其状态来触发之后的渲染。更新组件的状态会自动将一次渲染送入队列。”

“与 props 不同,state 完全私有于声明它的组件。”

详见:​​​​​​​渲染和提交 – React

想象一下,如果现在有一个虚拟dom树,在组件中使用useState定义了状态a,的子组件中只有使用了状态a。

之后我们在中调用了setA(2)修改a的值,之后以及它的所子组件都要重新渲染(红色部分)。

哪怕改变a的值之后只有会有更改,但是为根节点的整个树都要重新渲染,是很浪费性能的。

区别

通过上面分析了vue和react视图更新原理,我们可以得到差别:

react通过setXXX这种触发更新的机制,没有办法像vue那样精确的知道具体是哪一个组件需要重新渲染,只能从父组件开始往下全部渲染,所以很消耗性能。

已知信息不足,造成了react的这种结果。

下图很好的总结出了他们的差别: 

Fiber

关于react的fiber架构,可参考笔者的这篇文章,写的比较详细:从0到1,带你深入了解react fiber_Bule Guy的博客-CSDN博客

参考:​​​​​​​

React

Vue.js 

阿里三面:灵魂拷问——有react fiber,为什么不需要vue fiber呢? - 掘金

你可能感兴趣的:(vue.js,前端,javascript,react.js,前端框架)