从 Vue 转 React 的一些体验

发表于 | 更新于

原本打算自己写一写 Vue 转 React 的体验的，但是掘金上一搜发现一些不错的文章。这里就不进行技术细节上的对比了，只说下体验。

使用 Vue 和 React 的区别

如果对于两者的区别感兴趣可以看下下面两篇文章：

看了上面两篇文章简单整理出以下几点区别：

  1. Vue 使用 setter/getter 实现双向绑定，React 根据数据渲染页面。
  2. Vue 使用 props 向子组件通信，使用 events 向父组件通信。React 通过 props 传递数据和回调函数进行父子组件间通信。
  3. Vue 使用 mixins 而 React 使用 HOC 高阶组件组合功能。
  4. Vue 使用 provide/inject 进行跨层级组件通信，React 通过 context 进行跨层级组件通信。
  5. 模板渲染方式上，Vue 通过 v-if/v-show/v-for 语法糖封装的逻辑来渲染，而 React 通过原生 JavaScript 代码逻辑来渲染。
  6. 状态管理上，Vuex 和 Redux 思路差不多。但是 Vuex 是双向绑定的，状态可变；而 Redux 的数据是不可变的，采取整体替换的方式更新状态。
  7. Vue 中的 computed 和 watch 属性在 React 中并没有，需要手写逻辑控制或者使用外部工具，如 mobx。
  8. Vue 使用 slot 标签来实现组件嵌套，而 React 通过将需要嵌套的组件当做 props 传给子组件的方式来实现嵌套。
  9. Vue 和 React 的生命周期必然是不同的。

写 React 的体验

之前写惯了 Vue，在写 React 的时候给我几个感受：

  • 相比于 Vue 提供的一整套语法糖来实现渲染，React 的对渲染细节的控制能力比 Vue 好，更自由。
  • 相比于 Vue 的类 HTML 写法让人看着很自然很舒服，React 的函数式编程让整体代码显得有些乱，应该是我还不习惯函数式编程的缘故把。
  • React 的社区真的很活跃，所以相关框架和库非常多。就我接手的两个 React 项目分别用到了 dva、umi、mobx 等不同的框架和库，而 Vue 大多数都是用的 Vue 提供的全家桶来进行开发。
  • ant design 真的很棒，据说有一个团队在维护它，相对而言 Vue 的几个组件库的功能数量和组件质量上就稍微差一些了。
  • 在 React 中用到了像 class、注解等很多新特性，感觉很高级。Vue 项目并没有加这些新特性。由于 React 的自由度，社区把各种新语法都在 React 上玩起来了。
  • 虽然大家各种对比前端三大框架，其实底层逻辑还是 JavaScript、HTML 和 CSS。我最近学习的 this、箭头函数、class、原型、ES6特性等知识点对我上手 React 的确有很大的帮助。所以说万变不离其宗，学好基础和底层逻辑最重要。

教训

  1. 遇到新技术一定仔细阅读完文档，可以避免很多不必要的坑。比如我在写 React 项目的时候花了一天时间写了一个组件，结果回头一看 antd 里面有差不多一样的 demo，实现的还比我好。
  2. 解决类似问题的技术的技术逻辑必然也是类似的，通过类比联想的方式学习相似技术可以提高不少的效率。
  3. 遇到问题要仔细阅读文档、Google 查找，在确认没有答案之后再询问他人，随意的打断他人问一些低级问题是非常不礼貌、不专业的。

最后

个人认为，如果前端基础足够扎实，上手这些框架都并非难事，只要熟悉了框架以及相关库的用法就可以得心应手了。