Vue与React的区别

Cap原创大约 3 分钟

从核心差异出发

从核心差异出发，能更清晰的将两者的不同形成脉络。

核心差异：Vue进行数据的拦截/代理，颗粒度更细。React偏重函数式，页面更新就是不断的执行函数。

从这个核心差异衍生出来的不同：

保证页面渲染性能的手段不一样
vue因为颗粒度更细，所以能采用依赖追踪，变多少，动多少，自动更新。React则将这个更新的心智通过
shouldComponentUpdate这个生命周期hook交给开发者控制）。（在这一块，他们也有共同点，例如合并更新操作。）
Hooks的实现和表现不一致
React在每次render时都会按照顺序执行，但是vue主会被注册调用一次，因为他是基于数据代理观察的。这也就是为什么
vue会包装.value这么一层，因为基于对象代理观察，那么一些基本类型，number和string是没办法做到的。

数据的变动会通知所有订阅者，通过diff算法，实现最小更新

组件化思想，所以都需要考虑数据流的问题，数据状态管理的解决方案也就自然而然

实现方式的不同，会导致优化能力的不同。参考上面的核心差异

Vue 需要做数据双向绑定，需要进行数据拦截或代理，那它就需要在预编译阶段静态分析模版，分析出视图依赖了哪些数据，进行响应式处理。而 React 就是局部重新渲染，React 拿到的或者说掌管的，所负责的就是一堆递归 React.createElement 的执行调用，它无法从模版层面进行静态分析

React早期是class组件和生命周期，这就引申出高阶组件

Vue也是有生命周期的概念

探究生命周期的原理，其实它就是收集和处理副作用的节点，是副作用在视图不同阶段的产物。

这里需要思考，什么是副作用，怎么理解它。

其实从Vue3到React，两者都很默契的弱化了生命周期这个概念，着重介绍Hooks。

专注函数组件 + Hooks的开发模式，淡化生命周期的意识。
本质就是如何利用好函数组件一遍遍重复执行变更视图。

众所周知周知，React的Hooks调用有限制，是因为Hooks是基于链表调用的。