目录
- 前言
- 一、vue2 与 react 15 的对比
- 1、vue2 与 react 15 的相同点
- 2、vue2 与 react 15 的不同点
- (1)、数据流的不同
- (2)、框架本质不同
- (3)、模板不同
- (4)、组件通信方式不同
- (5)、组合不同功能的方式不同
- (6)、state 数据的变更方式不同
- (7)、监听数据变化的实现原理不同
- 二、vue3 和 react18 对比
- 1、vue3 和 react18 的相同点
- 2、vue3 和 react18 的不同点
- (1)、 react 使用更加灵活
- (2)、vue3 更智能的依赖收集
- (3)、vue3 和 react 优化手段不同
前言
Vue 由 EvanYou 开发。
React 由 由 Facebook 开发。
React 版本
Vue 版本
一、vue2 与 react 15 的对比
此时 Vue 和 React 还都没支持 Hooks 语法。
1、vue2 与 react 15 的相同点
- 都支持声明式编程。
- 都使用虚拟 DOM,只更新那些已经修改的对象,从而实现快速渲染。
- 都是支持响应式组件,专注于组件化开发,将其他功能(如路由和全局状态管理等)交给相关的库来处理。
2、vue2 与 react 15 的不同点
(1)、数据流的不同
Vue 双向数据流:
- 父子组件之间,props 可以双向绑定;
- 组件与 DOM 之间可以通过 v-model 双向绑定。
React 单向数据流:
- 自顶向下,由外及内。
- 数据在某个节点被改动后,只会影响一个方向上的其他节点。
- 将父组件的方法以属性的形式传递给子组件,进而操作父组件的属性。
(2)、框架本质不同
Vue 采用 MVVM 框架,由 MVC 发展而来,详情请看 从 MVC 到 MVVM 软件架构。
React 既不属于 MVC 也不属于 MVVM 架构。React 是前端组件化框架,由后端组件化发展而来。
(3)、模板不同
模板的语法不同:
- Vue 采用 SFC(single-file-component)模板系统——组件包括 template、script 和 style 三个模块。将 HTML、CSS 和 JS 分离了。
- React 采用 JSX 语法。
模板的原理不同:
- Vue 是在单独的 template 模板中,通过一些列 Vue 指令来实现的。
- React 是在组件 JS 代码中,通过原生 JS 来实现模板的,更加原生,详见 React 与 DOM。
(4)、组件通信方式不同
Vue 中常用的 3 种组件通信的方式(具体请看 Vue 组件之间的通信):
- 父组件通过 props 向子组件传递数据或者回调,虽然可以传递回调,但是我们一般只传数据。
- 子组件向父组件发送消息有两种方式:事件和回调函数。但 Vue 更倾向于使用事件。
- 可以通过 provide/inject 来实现父组件向子组件注入数据,可以跨越多个层级。
React 中常用的 3 种组件通信的方式(具体请看 React 组件的“组件间的通信”小节):
- 父组件通过 props 可以向子组件传递数据或者回调。
- 子组件向父组件发送消息,都是使用回调函数的,这可能是他们二者最大的区别。
- 可以通过 context 进行跨层级的通信,这其实和 provide/inject 起到的作用差不多。
(5)、组合不同功能的方式不同
Vue 组合不同功能的方式是通过 mixin(vue3 弃用了),Vue 中组件是一个被包装的函数,并不简单的就是我们定义组件的时候传入的对象或者函数。比如我们定义的模板怎么被编译的?比如声明的 props 怎么接收到的?这些都是 vue 创建组件实例的时候隐式干的事。由于 vue 默默帮我们做了这么多事,所以我们自己如果直接把组件的声明包装一下,返回一个 HoC,那么这个被包装的组件就无法正常工作了。
React 组合不同功能的方式是通过 HoC(高阶组件)。React 最早也是使用 mixins 的,不过后来他们觉得这种方式对组件侵入太强会导致很多问题,就弃用了 mixinx 转而使用 HoC。高阶组件本质就是高阶函数,React 的组件是一个纯粹的函数,所以高阶函数对 React 来说非常简单。
(6)、state 数据的变更方式不同
Vue 中 state 对象不是必须的。数据由 data 属性在 vue 对象中管理,可以直接通过 this.state.属性名
来修改 state 对象里的数据。
React 中 state 对象是必须的。不能直接修改 state 对象里的数据,只能通过 setState() 方法更新 state 对象里的数据。
(7)、监听数据变化的实现原理不同
Vue:
- Vue 通过 getter/setter 以及一些函数的劫持,能精确知道数据变化。
- Vue 可以更快地计算出 Virtual DOM 的差异,这是因为 Vue 是以组件为颗粒度的,会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树。
React:
- React 默认是通过比较引用的方式(diff)进行的,如果不优化可能导致大量不必要的 VDOM 的重新渲染。
- React 默认会重新渲染其全部子组件。当然,这也可以通过 shouldComponentUpdate 这个生命周期方法来进行控制,但 Vue 将此视为默认的优化。
为什么 React 不精确监听数据变化呢?这是因为 Vue 和 React 设计理念上的区别:
- Vue 使用的是可变数据。
- React 更强调数据的不可变。
Vue 和 React 的 diff 算法都是进行同层次的比较,主要有以下两点不同:
- Vue 对比节点,如果节点元素类型相同,但是 className 不同,认为是不同类型的元素,会进行删除重建,但是 React 则会认为是同类型的节点,只会修改节点属性。
- Vue 的列表对比采用的是首尾指针法,而 react 采用的是从左到右依次比对的方式,当一个集合只是把最后一个节点移动到了第一个,React 会把前面的节点依次移动,而 Vue 只会把最后一个节点移动到最后一个,从这点上来说 Vue 的对比方式更加高效。
二、vue3 和 react18 对比
1、vue3 和 react18 的相同点
在 vue2 与 react 15 的相同点 的基础上又增加了以下两点。
- 都用 hooks 来逻辑复用。
- 都支持 JSX 语法。
2、vue3 和 react18 的不同点
(1)、 react 使用更加灵活
react18 中使用 JSX 语法更加灵活,而 vue3 虽然也支持了 JSX 语法,但是使用较少。
vue3 的 SFC 是一把双刃剑,一方面它让 vue3 更易上手,让代码更易阅读与维护,另一方面,它需要到固定位置写逻辑,没 react18 的 JSX 语法灵活。
(2)、vue3 更智能的依赖收集
vue3 在模板中的数据可以被模板自动查询,而 react18 需要手动调用 useState 定义数据和修改数据的方法。
vue3 的 watchEffect 和 computed 是可以自动寻找依赖的,而 react18 的 useEffect、useMemo 和 useCallBack 的第二个参数“数组[]
”需要写上依赖的数据。
(3)、vue3 和 react 优化手段不同
vue3 是以组件为颗粒度的,可以精准的找到需要更新的地方,组件拆分细一点,就可以达到一定优化效果。
react18 是对比差异来更新的,而且父组件更新,子组件默认也会更新,所以 react18 更新手段一个方法就是浅比较,判断父组件更新的时候,子组件是否要更新,从而跳过子组件更新。
【参考文章】
2022年前端框架趋势:React与Vue深度对比
React与Vue的区别和对比
Vue和React的使用场景和深度有何不同?
vue和react区别
Vue与REACT两个框架的区别和优势对比
Vue与React的区别和优势对比
思考vue3和react18的区别
更多推荐
Vue 和 React 的对比
发布评论