为什么我会选择 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开发者和技术架构师。 在空余时间，他喜欢制作独立音乐和独立游戏，与自己的猫咪们一起玩耍。

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