React 和 Vue 的区别

2023-06-18 14:45:52

diff

在 react 中，当状态发生改变时，组件树就会自顶向下的全 diff, 重新 render 页面， 重新生成新的虚拟 dom tree, 新旧 dom tree 进行比较， 进行 patch 打补丁方式，局部更新 dom。所以 react 为了避免父组件更新而引起不必要的子组件更新， 可以在 shouldComponentUpdate 做逻辑判断，减少没必要的 render， 以及重新生成虚拟 dom，做差量对比过程。

在 vue 中， 通过 Object.defineProperty 把 data 属性全部转为 getter/setter。同时 watcher 实例对象会在组件渲染时，将属性记录为 dep, 当 dep 项中的 setter 被调用时，通知 watch 重新计算，使得关联组件更新。

生态

React 官方只关注底层，上层应用解决方案都交给社区，所以 React 生态体系丰富，社区强，而且每次更新改动较小

Vue 是由官方主导开发和维护，生态没那么丰富，虽然上手比 React 简单一些，但每次更新堪称破土重来，改的倒是潇洒得很，这就注定我们学习成本大大增加，并不能做到学习一次就可以一直使用这个框架，1.0 改版 2.0 需要重新学习一遍，2.0 改版 3.0 又要学习一遍，甚至 3.0 到 3.2 都要重学一部分，有些程序员到了 35 退休不是不想干，也是学不动了吧。像是需要记的 API，React 就那么几个，剩下的自己去写就行了，Vue 虽然在代码维护上有一定优势，可是它的 API 就多得多了，而且还分版本，比如 Vue2 有过滤器，Vue3 却没了，不仅要多记很多 API 和自定义指令，还需要对自己所学的 API 根据版本进行选择使用。

Vue 更像是有种大家长的感觉，很多东西都是由官方规范好的，相对应的他的社区的活力感就明显感觉是不如 react 的，不像是 react 光是状态管理库就可以打一场 “口舌之战”。像是智子做的 Vue Macros 带来了一些宏，和沈青川的 Vue-Vine为单文件中编写多个 Vue 组件的解决方案，并不是要取代 Vue SFC，而是提供更多管理 Vue 组件的灵活性，让 Vue 的可扩展性更高了一些。

相对应的这就导致了 Vue 的上手程度是要易于 react 的，因为很多东西由官方规范好，对于开发者来说不需要纠结于太多，而 react 对于新手来说可能光是状态管理库和 css 解决方案都要去调研很久，并且上手试验过后才会知道哪个更适合于自己。

hooks

React hook 是根据调用顺序来确定下一次重新渲染时的 state 是来源于哪个，所以有一些限制，比如不能在循环/条件判断/嵌套函数里使用，而且必须在函数最顶层调用 hook 等

Vue3 hook 是基于响应式实现的，它是声明在 setup 里，一次组件实例化只调用一次 setup，而 React 每次重新渲染都要重新调用，性能上自然不言而喻，而且可以在循环/条件判断/嵌套函数里使用，并且正因为是基于响应式实现的，还自动实现了依赖收集，而 React 需要手动传入依赖等