为什么我会选择 React 而不是 Vue?

你注意到我过于圆滑的标题了吗?我将依据我所喜欢的方式去构建这个对话,而不是我客观上认为的唇枪舌战。我想后者并不会起作用。

React 和 Vue 从表面上来看是非常相似的,我在项目当中使用了这两个框架。他们都运用了 virtual DOM 并且都是重点关注 View 层的。两者都是为了解决相同的作为动态 HTML 渲染工具的问题,但我相信它们两者之间肯定存在着定义上的差异,贯穿着整个工作流。 React 是完全采用 Javascript 的, 而 Vue 不是。

在 React 的使用者中,有一个非常常见且真实的口头禅,那就是“这只是 Javascript”(“it’s just Javascript”),Vue 似乎有很多不必要的功能,这就会让组件更难理解,下面给出一些例子:

模板

一个 React 组件可以简单地被认为是返回元素的函数(或者至少有一个具有这样的功能的类)。 这种功能性方法对于 Javascript 开发人员是非常自然的。 传入数据,得到元素。 如果你有一堆内容在数组当中,你可以简单地将它们遍历出一系列元素。 如果你想排除这些项目中的某一些元素,你可以使用 Array 数组对象中的 filter 方法和 map 方法去处理元素并且得到结果。这个功能性工作流程完美地反映了您对应用程序的其他部分的理解。 这种方法是对Javascript的优势的补充。

一个 Vue 组件更像是一个能够从数据结构当中引用数据的模板。它包含了一个 DSL(Domain specific language),虽然是次要的,但是显然是完全没有必要的。我不需要 v-for 因为我可以使用 map()。我不需要 v-if 因为我可以使用普通的老旧的 if。模板至少会带来一定程度的有限或无益的认知压力。

模板还引入了作用域的问题。 如果我将一些静态数据导入到我的 React 组件中,我可以在我的渲染函数中使用它,因为所有标准的 JavaScript 作用域规则都应用于此。 它只是一个 函数,与其他任何 函数 完全一样。 Vue 的模板与 Javascript 的单独作用域相互作用,因此您必须将该静态数据写到 Vue 组件中,并将其作为计算属性字段返回。 这些东西都不是特别痛苦,但都是不必要的。

工具

因为 React 是“Just Javascript”,在我的经验中,开发经验要好得多。 例如,prettier-js(一个令人惊讶的,有主见的代码格式化程序)只适用于JSX,但是在 Vue 模板中可以嵌入表达式,因为 Vue 的模板不是“Just Javascript”。 另外,由于模板和 Javascript 在不同的范围内运行,所以对于 linter (此处 Linter 参考维基百科) 来说,模板中缺少/拼错的变量是不可能的(至少目前是这样)。 这是另一个烦心且不必要的地方。

惯例的颠覆者:响应式状态

React 和 Redux 永远不变地拥抱它们的核心。同样,React 是一个 reducer 渲染函数,它将 props 传入一个元素当中,React 状态变化也是简单的函数将旧状态和一个动作变成一个新的状态。而 Vue(和Vuex)有 * 响应式状态 *,这意味着你可以使用规定的方法修改状态。这与我在 JavaScript 中其他地方使用的操作风格不太协调。

我已经习惯了不可变的数据结构,这对我来说会觉得比较靠谱。Vuex 几乎迫使你不去使用它们,因为所有的 getter/setter 都被添加进了 store。在 React/Redux 中也有 state/store,你猜对了,“只是 JavaScript 对象”。

如果你喜欢这篇文章,请转发,让更多的人能读到它!

_Steven Poulton 是一位居住在英国曼彻斯特的 Web开发者和技术架构师。 在空余时间,他喜欢制作独立音乐和独立游戏,与自己的猫咪们一起玩耍。


往期精选文章

使用虚拟dom和JavaScript构建完全响应式的UI框架

扩展 Vue 组件

使用Three.js制作酷炫无比的无穷隧道特效

一个治愈JavaScript疲劳的学习计划

全栈工程师技能大全

WEB前端性能优化常见方法

一小时内搭建一个全栈Web应用框架

干货:CSS 专业技巧

四步实现React页面过渡动画效果

让你分分钟理解 JavaScript 闭包



小手一抖,资料全有。长按二维码关注京程一灯,阅读更多技术文章和业界动态。

原文发布于微信公众号 - 京程一灯(jingchengyideng)

原文发表时间:2017-11-02

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券