第 47 题：Vue 和 React的对比

[ravencrown]

Vue 和 React的对比

模板 vs JSX

React与Vue最大的不同是模板的编写。Vue鼓励你去写近似常规HTML的模板。写起来很接近标准HTML元素，只是多了一些属性。

另一方面，React推荐你所有的模板通用JavaScript的语法扩展——JSX书写。同样的代码，用JSX书写的例子如下：

React/JSX乍看之下，觉得非常啰嗦，但使用JavaScript而不是模板来开发，赋予了开发者许多编程能力。

值得一提的是，与React一样，Vue在技术上也支持render函数和JSX，但只是不是默认的而已。

场景

对于管理大型应用中的状态这一话题而言，Vue.js的作者尤雨溪曾说过，（Vue的）解决方案适用于小型应用，但对于对于大型应用而言不太适合。

状态管理 vs 对象属性

如果你对React熟悉，你就会知道应用中的状态是（React）关键的概念。也有一些配套框架被设计为管理一个大的state对象，如Redux。此外，state对象在React应用中是不可变的，意味着它不能被直接改变（这也许不一定正确）。在React中你需要使用setState()方法去更新状态。

在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理。

JSX vs Templates

在 React 中，所有的组件的渲染功能都依靠 JSX。
使用 JSX 的渲染函数有下面这些优势：

• 你可以使用完整的编程语言 JavaScript 功能来构建你的视图页面。比如你可以使用临时变量、JS 自带的流程控制、以及直接引用当前 JS 作用域中的值等等。

• 开发工具对 JSX 的支持相比于现有可用的其他 Vue 模板还是比较先进的 (比如，linting、类型检查、编辑器的自动完成)。

虽然Vue也可以使用JSX，但基本都使用模版语法，这也带来了一些特有的优势：

• 对于很多习惯了 HTML 的开发者来说，模板比起 JSX 读写起来更自然。这里当然有主观偏好的成分，但如果这种区别会导致开发效率的提升，那么它就有客观的价值存在。

• 基于 HTML 的模板使得将已有的应用逐步迁移到 Vue 更为容易。

个人观点

• React对比Vue来说，Vue的学习成本更低，更容易入手，模版语法开发起来个人觉得会比React的Jsx更快。

• vue 适合中小型项目，React适合大型项目