react与vue区别 | bhwa233 Notion Blog

type

status

date

slug

summary

相同点

都有组件化思想

都支持服务器端渲染

都有Virtual DOM（虚拟dom）

数据驱动视图

都有支持native的方案：Vue的weex、React的React native

都有自己的构建工具：Vue的vue-cli、React的Create React App

区别

理念

react推不可变数据，Vue推可变数据

设计思想

react：all in js (html->jsx, css->style-component/jss)

Vue：html，css，js写在一个文件中，使用各自的方式

响应式原理

vue：利用数据劫持和观察订阅者模式实现自动响应，vue会遍历data数据对象，使用Object.definedProperty()将每个属性都转换为getter和setter，每个Vue组件实例都有一个对应的watcher实例，在组件初次渲染的时候进行依赖收集，会记录组件用到了哪些数据，当数据发生改变的时候，会触发setter方法，并通知所有依赖这个数据的watcher实例调用update方法去触发组件的compile渲染方法，进行渲染数据。

react：React主要是通过setState()方法来更新状态，状态更新之后，组件也会重新渲染。

优缺点

vue 是组件级别的数据 watch，当组件内部监听数据变化的地方特别多的时候，一次更新可能计算量特别大，计算量大了就可能会导致丢帧，也就是渲染的卡顿。所以 vue 的优化方式就是把大组件拆成小组件，这样每个数据就不会有太多的 watcher 了。

react 并不监听数据的变化，而是渲染出整个虚拟 dom，然后 diff。基于这种方案的优化方式就是对于不需要重新生成 vdom 的组件，通过 shouldComponentUpdate 来跳过渲染。

组件写法

react：JSX，可以在html上写JS，更多灵活，纯js语法（可以通过babel插件实现模板引擎）

Vue：模板语法，通过模板语法，更加简单（vue也可以使用jsx语法）

优缺点

静态解析。vue template 是受限制的，只能访问 data，prop、method，可以静态分析，而 react 的 jsx 因为直接是 js 的语法，动态逻辑比较多，没法静态分析和优化。

类型推导，vue template因为和 js 上下文割裂开来，引入 typescript 做类型推导的时候就比较困难，需要单独把所有 prop、method、data 的类型声明一遍才行。而 react 的 jsx 本来就是和 js 同一个上下文，结合 typescript 就很自然。

vue学习成本较高，奇怪的语法和指令一大推

复用方式

react：Mixin->Hoc->render props->hook。

Vue：Mixin-> slot->Hoc-> Vue Composition API

状态管理

React 可以通过 React.context 来进行跨层级通信；

Vue 则可以使用 provide/inject 来实现跨层级注入数据。

模版渲染方式

React 在 JSX 中使用原生的 JS 语法来实现插值，条件渲染，循环等。

Vue 则需要依赖指令进行，更容易上手，但封装程度更高，调试成本更大，难以定位 Bug。

性能差异

React ：手动优化，中组件的更新渲染是从数据发生变化的根组件开始往子组件逐层渲染，需要开发者手动使用 React.memo 来避免不必要的组件重新渲染。

Vue ：自动优化，通过 watcher 监听到数据的变化之后，通过自己的 diff 算法，在 virtualDOM 中直接以最低成本更新视图。

react

Fiber每次渲染都需要重新遍历整个DOM树，为了优化性能引入了Fiber。

React 使用 jsx的开发方式，甚至完全兼容js的语法特性，导致其动态性过于强，不运行根本不知道vdom其结构是怎样的，是否发生了变化。所以必须在每次更新时都重新运行，做很多的计算以保证结果的正确性, 导致它的渲染效率比 template 低，因为 template 很容易做静态分析和优化。

React Hooks 将大部分组件树的优化 API 暴露给开发者，开发者很多时候需要手动调用 useMemo 来优化渲染效率。这意味着 React 应用默认就有 render 过多的问题。更严重的是，这些优化在 React 里很难自动化，因为这些优化要求开发者正确设置依赖数组,盲目添加 useMemo 会导致应该 render 的没 render, 很不幸，大部分开发者都很懒，不会在每个地方都加上优化，因此大部分 React 应用都会有大量的没必要的 CPU 计算工作。

vue

Vue 的架构里没有时间分片，也就没有 Fiber，因此简单了很多，这使得渲染可以更快。

Vue 通过分析 template、简化协调过程，做了大量的 AOT 优化，性能测试结果表明大部分的 DOM 内容有 80% 属于静态内容，因此 Vue 3 的协调速度比 Svelte 快，花费的时间比 React 的 1/10 还少。

通过数据响应式追踪，Vue 可以做到组件树级别的优化，比如把插槽编译为函数以避免 children 的变化引发 re-render，比如自动缓存内联事件处理函数以避免 re-render。Vue 3 可以做到在不借助开发者的任何手动优化的情况下，防止子组件在非必要的情况下 re-render。这意味着同样一次更新，React 应用可能要 re-render 多个组件，而 Vue 应用很可能只 re-render 一个组件。