从 React 到 Vue

最近在项目中开发了许多 Vue 的组件，以使用 React 的经验来做一些简单的对比，以及使用上的感受总结

总觉得 Vue 用起来不是那么爽，可能也是刚开始上手，显得不是很熟练。

设计理念

React 的设计哲学围绕着 函数式编程 和 单向数据流 展开

函数式组件与纯函数思想 React 将 UI 视为状态的函数（UI = f(state)），通过函数式组件和 Hooks（如 useState、useEffect）实现状态的声明式管理。
这种设计鼓励开发者编写无副作用的纯函数组件，从而提升代码的可预测性和可测试性。
jsx
```
const Button = ({ onClick, label }) => <button onClick={onClick}>{label}</button>;
```
这种组件模式天然支持复用，且与外部状态解耦，并且具有很好的灵活性
单向数据流的控制力 React 强调数据从父组件流向子组件（通过 props），并通过回调函数实现子组件向父组件的通信。
这种模式强制开发者显式管理数据流，避免了双向绑定可能导致的隐式依赖问题。
而 Vue 的双向绑定（如 v-model）虽然简化了表单处理，但也可能增加数据流向的复杂性，尤其在大型应用中。

React 的 JSX 语法允许将 HTML 结构直接嵌入 JavaScript 代码中，打破了传统模板与逻辑的界限。这种 All in JS 的设计赋予了开发者极大的自由度
- 动态生成内容（如条件渲染、循环）无需学习额外语法。
- 可与 JavaScript 生态无缝集成（如 TypeScript、 ES6+）。
Vue 的模板语法更接近传统 HTML，虽然易于上手，但在复杂逻辑表达上需依赖指令（如 v-if、v-for、v-slot），灵活性稍逊。
生态系统的可扩展性， React 的生态系统以 选择自由 著称
- 状态管理：开发者可自由选择 Redux、 MobX 或 Context API，甚至自行实现状态逻辑。
- 工具链：从 CRA 到 Next.js， React 生态提供了多样化的解决方案。
Vue 的官方库（如 Vuex、 Vue Router）虽然集成度高，但也可能限制技术选型的多样性。
不过这一点各有利弊吧，目前感受还不是很强，毕竟踩过 CRA 停止维护的坑，所以感觉官方维护也挺不错。

组件化模式的差异
- React 的 函数式组件：通过 Hooks 实现状态与生命周期的管理，支持函数式编程的抽象能力（如高阶组件）。
- Vue 的 声明式组件：单文件组件（ SFC）将模板、样式与逻辑分离，适合传统前端开发习惯，但可能限制 JavaScript 的动态能力。
响应式系统的实现
- React 的不可变性与手动优化：通过 setState 或状态管理库触发更新，需开发者手动控制渲染优化（如 useCallback、React.memo）。
- Vue 的自动依赖追踪：基于 Proxy 的响应式系统自动追踪依赖，减少手动干预，虽然方便是方便，但可能因过度响应导致性能损耗。

目前开发下来一个比较不适应的点是在于组件间的通讯时

但是 React 组件设计中仅有 props 的概念，无论是事件还是子组件均可以通过 props 传递，这也是函数式组件设计所带来的优势

可仔细想想 React 的灵活性并非没有代价：

而 Vue 通过渐进式框架设计和更统一的 API，降低了入门门槛，适合快速迭代的中小型项目。

没有最好的工具，只有最合适的场景。