为什么我不再用Vue，改用React？ - 网站源码_资源分享

为什么我不再用Vue，改用React？译者 | Alexandre Lion译者者 | 王磊策画 | 李德辰当我走近当代后端开发金融行业的这时候，我做了两个每人开发者都要做的重大决策：优先选择两个最合适的架构。彼时恰逢 jQuery 被出局，后端开发者们无须用它撰写吓人的、非内部形式化的旧式 JavaScript 流程了。后端已经开始迈向两个盛行时尚的，盛行的，模组化的 JavaScript 架构的新时代。因此我优先选择了 VueJS。

责任编辑起初正式发布于 Medium 中文网站，经原作许可由 InfoQ 英文站译者并撷取。

上面是我爱好（那时却是爱着）VueJs 的其原因所处。

1. 它将 HTML/CSS/JS 内部结构紧密结合到一同

现阶段上看，这是 VueJS 最招揽人的竞争优势。

Vue 文档对新手十分有诱惑力。它更易认知，因此他们很难将整座 HTML 模版降解为很多 Vue 文档。我一看就能看出内部结构（模版）、犯罪行为（JAVA）和外形（式样）。<template><div id=“myComponent”> <Counter /> <span v-if=“reading”>Hello reader !</span></div></template><script>importCounterfrom “@/components/Counter”;export default { name: “myComponent”, components: { Counter }}</script><style>#myDiv { display: block;}</style> 2. Vuex

我开始了解状态管理系统时是从 Redux 入门的。它很难学，因此似乎过于复杂。但有了 Vuex，体验就太棒了。

Redux 需要 action、reducer 和 store，而 Vuex 只有 action、mutation 和 store。相比 mutation，reducer 的逻辑实在很难认知，因为在我学习后者时，很少见到优秀的学习资源。在我看来，Vuex 对于新手来说更难上手。

3. NuxtJS

老实说，受 React NextJS 启发的 NuxtJS 是我在 Vue 项目中的默认架构。我喜欢 Nuxt 项目的约定优于配置的架构。

页面位于 page 目录下。组件位于 component 目录。存储在 store 目录中。中间件则在 middleware 目录里，依此类推。

所有注入都是透明的。所有配置都在 nuxt.config.js 里。太棒了！它使你可以轻松构建启用 SSR 的中文网站和 SPA。

然而，我又试了一下 React

在学习 Vue 之前我也尝试过 React，但后者初看上去太难学了。随着时间推移，我更深入了解了状态管理机制和 ES6 语言规范，于是我对 React 的看法也有了变化。

我看到有很多文章在推荐 React，甚至我周围的人都在谈论 React，因此我尝试了一下。结果很不错，于是我开始在项目中使用这个架构。上面是我眼中 React 一些最明显的竞争优势。

1. 对 ES6 和 TypeScript 友好

开发者掌控类、接口和枚举。因此我很难就能认知 React 组件的工作机制，并知道该如何将其集成到应用流程中。

你也可以在 Vue 中使用 ES6 语法，但是 React 比 Vue 设计得更好。看一下如何在 React 中注册组件：class MyComponent extends React.Component { render() { return(<div />) }}对于 VueJS，你将两个对象传递给 Vue Component 函数：Vue.component({ template: `<div></div>`})

也是说，当代 React（2020 年）无须用到 class，而是使用函数式组件（和 hooks）。

VueJs 那时提供了 TypeScript 支持。但这种支持不像 React 那样自然，后者只需一条命令 就能使用 CRA（Create React App）获得 TS 支持。

在 Vue 这边，他们仍然需要一些带有自定义装饰器和特性的第三方包来创建两个真正完善的 TypeScript 应用流程，并且它的官方文档并未包含入门所需的所有信息。

2. JSX

JSX 并非恶魔。有两个流派：亲 JSX 和反 JSX。我不想卷进他们的战争。JSX 可以是天使也可以是恶魔，具体取决于你要如何使用模版。

从我的角度上看，对于开发者来说，撰写像上面这样的 JSX 更加合乎逻辑：return ( <div> {students.map(student => <p>{student}</p>)} </div>)比 Vue 的方式更像 HTML：<div> <p v-for=“student in students”>{{ student }}</p></div>

萝卜青菜各有所爱；在我个人看来，JSX 更强大，更灵活。

3. 省事的 Hooks我开始学习使用 React 组件做开发。问题在于，要创建单个组件作为两个 React 组件类是很费事的。class MyComponent extends React.Component { constructor(props) { super(props) this.state = { counter: 0 } } render() { return(<div/>)}}函数式组件让你可以使用带有 hooks 的局部状态。它移除了很多样板和无用的构造器。function MyComponent() { const[counter, setCounter] = useState(0) return(<div />)}

React Hooks 简化了状态和其他 React 部件（如 useEffect）的应用，那时他们用不着 componentDidMount 和 componentDidUpdate 了。一些开发者喜欢 OOP 方法，因此继续使用 class；而其他开发者则偏爱函数式方法。你可以在项目中同时使用两者！

4. 社区

伟大的项目背后都有很多伟大的头脑。

根据我的经验，React 的文档、第三方工具和模块要比 Vue 多得多。有时，我会为很多 Nuxt 问题而挣扎许久，搜索解决方案的过程中还会发现很多 Next（React）主题。

看看 Github 仓库，数字可以说明一切。

为什么我不再用Vue，改用React？或它们各自的架构：