众所周知，Vue和React是目前非常有名的前端框架。我在工作中经常使用Vue，所以我对它有很深的了解。同时，我也对React充满了好奇，想要学习和一探究竟。所以我阅读了React文档并观看了一些视频教程，虽然材料很好，但我真正想了解的是React和Vue之间的区别。至于“区别”，我并不想知道它们是否都具有虚拟DOMS或者它们是如何渲染页面的，但我希望有人能从代码的角度解释一下两者之间的区别。我想找一篇解释这些差异的文章，以便Vue或React的初学者可以更好地理解两者之间的差异。不幸的是，我没有找到这样的文章。所以我意识到我必须自己来比较Vue和React之间的异同。在自学的过程中，我用这篇文章来记录一下具体的过程。1.目标我将构建一个标准的待办事项列表应用程序，允许用户在列表中添加和删除项目。这两个应用程序都是使用默认的CLI（命令行界面，命令行界面）构建的，React使用create-react-app，Vue使用vue-cli。这两个应用程序的外观如下：两个应用程序的CSS代码几乎相同，但代码的位置有所不同。考虑到这一点，让我们看一下这两个应用程序的文件结构：您会发现它们的结构几乎完全相同。唯一的区别是ReactApp有三个CSS文件，而VueApp没有CSS文件。这是因为React的create-react-app组件需要一个附带的文件来保存它的样式，而VueCLI采用包罗万象的方法，在实际的组件文件中声明样式。两种不同的策略得到的结果是一样的。相信开发者很快就能掌握这两种不同的策略。开发人员可以根据自己的喜好做出选择，您会在开发社区中听到很多关于如何构建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？RevanthKumar解释说：“这是因为React希望在状态改变时重新运行某些生命周期钩子，如componentWillReceiveProps、shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate。当您调用setState函数时，它知道状态已更改。如果你直接改变状态，React将不得不做更多的工作来跟踪变化、运行生命周期钩子等。所以为了简单起见，React使用setState。"现在我们知道了如何更改数据，让我们看看如何向待办应用程序添加新项目。3.添加新的待办事项。React的实现方法createNewToDoItem=()=>{this.setState(({list,todo})=>({list:[...list,{todo}],todo:''}));};在React中，我们的输入字段有一个名为value的属性。使用几个函数自动更新绑定在一起以创建双向绑定。我们通过将onChange事件侦听器附加到输入字段来创建这种双向绑定形式。查看代码以了解：
