vue与react创建APP的差别是什么-创新互联

这篇文章主要讲解了“vue与react创建APP的差别是什么”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“vue与react创建APP的差别是什么”吧！

1. 目标

我将会构建一个标准的待办事项应用程序，允许用户添加和删除列表中的项目。这两个应用程序都使用默认的 CLI（command-line interface，命令行界面） 构建，React 使用 create-react-app，Vue 使用 vue-cli。

两个应用程序的外观如下：

两个应用程序的 CSS 代码几乎一样，但这些代码的位置存在差异。考虑到这一点，我们来看看这两个应用程序的文件结构：

你会发现它们的结构几乎完全相同。唯一的区别在于 React App 拥有三个 CSS 文件，而 Vue App 中没有 CSS 文件。这是因为 React 的 create-react-app 组件需要一个附带文件来保存其样式，而 Vue CLI 采用全包方法，其样式在实际组件文件中声明。

在这里小编建了一个前端学习交流扣扣群：132667127，我自己整理的最新的前端资料和高级开发教程，如果有想需要的，可以加群一起学习交流

两种不同的策略得到的结果是一样的，相信开发者很快能够掌握这两种不同的策略。开发者可以根据自己的偏好做出选择，你会听到开发社区关于如何构建 CSS 的大量讨论。以上，我们遵循两个 CLI 列出了代码结构。

在我们进一步讨论之前，先快速看一下典型的 Vue 和 React 组件的外观：

左侧为 Vue，右侧为 React

现在让我们正式开始，深入其中的细节！

2. 如何修改数据

首先，我们需要明白“修改数据”的意思是什么。它听起来有些学术，但实际上很简单，就是把我们已经存储好的数据进行更改。比如，如果我们想把一个人的名字变量从“Jhon”改为“Mark”，我们就需要执行“修改数据”的操作。在这一点上，React 和 Vue 的处理方式有所区别。Vue 本质上会创建一个数据对象，其中的数据可以自由更改；React 则创建一个状态对象，更改数据需要一些额外的操作。React 之所以需要额外的操作有着自己的理由，稍后我会深入介绍。在此之前，我们先看看 Vue 中的数据对象和 React 中的状态对象：

Vue 数据对象

React 状态对象

从图中可以看出，我们传入了相同的数据，但它们的标记方法不同。因此，将初始数据传递到组件的方式非常相似。但正如我们提到的那样，在两个框架中更改数据的方式有所不同。

假设我们有一个名为 name: ‘Sunil’ 的数据元素。

在 Vue 中，我们通过调用 this.name 来引用它。我们也可以通过调用 this.name ='John' 来更新它。这样一来，名字就被成功改为了 “Jhon”。

在 React 中，我们通过调用 this.state.name 来引用同一段数据。现在关键的区别在于，我们不能简单地写成 this.state.name ='John'，因为 React 有限制机制，它会阻止这种简单的修改方式。在 React 中，我们需要这样写：this.setState({name：'John'})。

虽然这基本上与我们在 Vue 中实现的结果一样，但是 React 的操作更为繁琐，那是因为 Vue 在每次更新数据时默认组合了自己的 setState 版本。 简单来说就是，React 需要 setState，然后更新其内部数据，而对于 Vue 来说，当你更新数据对象的值时它就默认了你的更改意图。 那么为什么 React 没有进行简化，为什么需要 setState 呢？ Revanth Kumar 对此做出了解释：

“这是因为 React 希望在状态发生变化时重新运行某些生命周期 hook，比如 componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。当你调用 setState 函数时，它知道状态已经改变。如果你直接改变状态，React 将需要做更多工作来跟踪更改以及运行生命周期 hook 等等。所以为了简单起见，React 使用 setState。"现在我们知道如何更改数据了，接下来看看如何在待办应用程序中添加新的事项。

3. 添加新的待办事项

React 的实现方法

createNewToDoItem = () => {
 this.setState( ({ list, todo }) => ({
 list: [
 ...list,
 {
 todo
 }
 ],
 todo: ''
 })
 );
};

在 React 中，我们的输入字段有一个名为 value 的属性。这个 value 通过使用几个函数自动更新，这些函数绑定在一起以创建双向绑定。我们通过在输入字段上附加一个 onChange 事件监听器来创建这种形式的双向绑定。看看代码，一探究竟：

只要输入字段的值发生更改，handleInput 函数就会运行。它通过将状态对象设置为输入字段中的任何内容来更新状态对象内的 todo。handleInput 函数如下：

handleInput = e => {
 this.setState({
 todo: e.target.value
 });
};

现在，只要用户按下页面上的 + 按钮添加新项目，createNewToDoItem 函数就会运行 this.setState 并向其传递一个函数。该函数有两个参数，第一个是来自状态对象的整个列表数组，第二个是由 handleInput 函数更新的todo。然后该函数返回一个新对象，该对象包含之前的整个列表，并在其末尾添加todo。整个列表是通过使用扩展运算符添加的。

最后，我们将 todo 设置为空字符串，它会自动更新输入字段中的 value。

Vue 的实现方法

createNewToDoItem() {
 this.list.push(
 {
 'todo': this.todo
 }
 );
 this.todo = '';
}

在 Vue 中，我们的输入字段中有一个名为 v-model 的句柄。这实现了**双向绑定。输入字段代码如下：

V-Model 将输入字段的内容绑定到名为 toDoItem 的数据对象的键（key）上。当页面加载时，我们将 toDoItem 设置为空字符串，比如：todo：' '。如果已经存在数据，例如 todo：'添加文本处'，输入字段将加载添加文本处的输入内容。无论如何，将其作为空字符串，我们在输入字段中键入的任何文本都会绑定到 todo。这实际上是双向绑定（输入字段可以更新数据对象，数据对象可以更新输入字段）。

因此，回顾前面的 createNewToDoItem() 代码块，我们将 todo 的内容存放到列表数组中 ，然后将 todo 改为空字符串。

4. 删除待办事项

React 的实现方法

deleteItem = indexToDelete => {
 this.setState(({ list }) => ({
 list: list.filter((toDo, index) => index !== indexToDelete)
 }));
};

尽管 deleteItem 函数位于 ToDo.js 文件中，但是从 ToDoItem.js 文件中引用它也很容易，将 deleteItem() 函数作为 上的 prop 传递：

这会将该函数传递给子组件，使其可以访问。我们绑定了 this 并传递 key 参数，当用户点击删除项时，函数通过 key 区分用户点击的是哪一条 ToDoItem 。然后，在ToDoItem 组件内部，我们执行以下操作：

想要引用位于父组件内部的函数，只需引用 this.props.deleteItem 即可。Vue 的实现方法onDeleteItem(todo){
 this.list = this.list.filter(item => item !== todo);
}Vue 的实现方法稍有不同，我们需要做到以下三点：Step 1：首先，在元素上调用函数：-