江苏龙网

  1. 首页 > 资讯 > 资讯 > >

构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）

构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）
文章图片
作者丨 Sunil Sandhu
译者丨王强
策划丨小智
几年前，我决定试着分别在 React 和 Vue 中构建一个相当标准的 To Do（待办事项）应用。这两个应用都是使用默认的 CLI 构建的（React 的 create-react-app 和 Vue 的 vue-cli）。我想尽量保持中立，通过这样的例子来告诉大家这两种技术执行特定任务时是怎样做的。
当 React Hooks 发布时，我为这篇文章更新了“2019 版”，用函数式 Hooks 取代了类组件。随着 Vue 3 及其组合（Composition）API 的发布，现在是时候更新这篇文章的“2020 版”了。
先来大致看一下两款应用的外观：
构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）
文章图片
两款应用的 CSS 代码完全相同，但代码所处的位置有所不同。记住这一点，接下来让我们看一下它们的文件结构：
构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）
文章图片
你会发现它们的结构也几乎相同。唯一的区别是 React 应用有两个 CSS 文件，而 Vue 应用没有任何 CSS 文件。这是因为在 create-react-app 中，默认每个 React 组件都会附带一个单独文件来保存其样式，而 Vue CLI 用单一的文件来为默认组件包含 HTML、CSS 和 JavaScript。
最后它们俩都达成了同样的目标，也没什么可多说的，因为在 React 或 Vue 中你都不能改变文件结构。选择哪个确实取决于个人喜好。开发社区关于 CSS 的结构化方式这个话题有大量的讨论，尤其是 React 这块，因为有许多 CSS-in-JS 解决方案，诸如样式化组件和 emotion 等。顺便说一句，CSS-in-JS 就是字面上的意思。虽然这些都很有用，但这里我们只用两边的 CLI 给出的结构。
在进一步深入之前，我们先来看一下典型的 Vue 和 React 组件长什么样：
典型的 React 文件：
构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）
文章图片
典型的 Vue 文件：
构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）
文章图片
看过之后我们来深入了解细节吧！
我们如何突变数据？
首先，“突变数据”到底是什么意思呢？听起来是不是有点高深？其实它基本上就是指更改我们已存储的数据。如果我们想将一个人名的值从 John 更改为 Mark，我们就是在“突变“这份数据。这就是 React 和 Vue 之间的关键区别所在。Vue 本质上创建了一个数据对象，可以在其中自由更新数据，而 React 通过所谓的状态 Hook 来处理数据突变。
从下面的图片中可以看到两者的设置，然后我们会具体说明：
React 状态：
构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）
文章图片
Vue 状态：
构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）
文章图片
于是你看到我们将相同的数据传递给了两者，但各自的结构有所不同。
在 React 中，至少从 2019 年开始，我们一般会通过一系列 Hooks 处理状态。你可能以前没接触过这种概念，一开始它看起来可能有点奇怪。它的工作机制基本上是这个样子：
假设我们要创建一个待办事项列表，我们可能需要创建一个名为 list 的变量，它可能需要接收一个由字符串或对象组成的数组（比如说给每个 todo 字符串一个 ID 或其他一些东西）。我们需要写的代码是。这里我们用的就是 React 里面的 Hook，称为 useState。它本质上是让我们能够在组件中保留局部状态。
另外，你可能已经注意到我们在 useState() 内部传入了一个空数组 []。放在其中的是我们希望 list 最初设置的内容，这里我们希望是一个空数组。但从上图可以看到，我们在数组内传入了一些数据，这些数据最后成了 list 的初始化数据。想知道 setList 是做什么的？稍后会进一步说明！
在 Vue 中，通常会将组件的所有突变数据放置在一个 setup() 函数内，该函数返回一个对象，其中包含要公开的数据和函数（就是那些你要在应用中使用的东西）。你会注意到，应用中的每个状态数据（也就是我们希望能够突变的数据）都包装在一个 ref() 函数内部。这个 ref() 函数是我们从 Vue 导入的，可让我们的应用在这些数据更改 / 更新时完成更新。简而言之，如果你想在 Vue 中创建突变数据，请为 ref() 函数分配一个变量，并在其中放入默认数据。
如何在应用中引用突变数据？
假设我们有一些数据名为 name，被分配了 Sunil 值。
在 React 中，由于我们使用 useState() 创建了较小的状态，因此很可能已经用创建了一些东西。在应用中，我们将简单地调用 name 来引用同一段数据。这里的主要区别在于我们不能简单地写上，因为 React 有一些限制来预防这种简单且无所顾忌的突变。在 React 中，我们要写成。这里用到了 setName。在中，它创建两个变量，一个变量变为，而第二个 const setName 被分配了一个函数，该函数使 name 可以用新值重新创建。
【 构建|我用React和Vue构建了同款应用，来看看哪里不一样（2020版）】在 Vue 中，它位于 setup() 函数内部，并且被称为。在应用中，我们将调用 name.value 来引用它。如果要使用在 ref() 函数内部创建的值，我们将在变量上寻找.value 而不是简单地调用该变量。换句话说，如果我们想要一个持有状态的变量值，我们将寻找 name.value 而不是 name。如果要更新 name 的值，可以通过更新 name.value 来完成。例如，假设我想将我的名字从 Sunil 更改为 John, 可以写来做到这一点。


推荐阅读


上一篇： 烟头|全县志愿者们在做一件关于“烟头”与文明的大事！

下一篇： 组合|中国女排新组合出炉！李盈莹喊话龚翔宇未获回应，一变化最为明显