尝试了React教程后，我发现了它与Vue.js的区别

1 年 ago

清, 扬

1 minute

背景

我在实际工作中已经开发了大约一年半的Vue.js。虽然在文章中经常看到React，并且一提到单页应用就会首先想到React，但我从未接触过React（也许因为它们都是响应式的，所以我认为差别不大，所以没有特别去接触）。但是，没有接触过这么常听到的React也让我有点担心，为了学习的目的我试着做了一些教程。以下的比较主要是针对Vue.js的选项API和React的Hook进行比较。

我对React的了解很少（最近才了解到类组件和函数组件之间的区别）。

React的教程已经更新了。它的内容是基于React Hook的。

教學：井字遊戲 – React

更改父组件的数据

在Vue.js中，当需要从子组件更改父组件的数据时，我们可以使用emit来改写数据。而在React中，我们可以通过传递一个匿名函数（闭包）来改写数据。在Vue.js中，不推荐使用prop来传递匿名函数，因为它会增加组件的依赖性。

比较代码（通过子组件增加父组件的count）Vue：
const ParentComp = {
template: `

`,
data() {
return {
count: 0
}
},

components: [ChildComp]
}

const ChildComp = {
props: [“count”],
emits: [“setCount”],
template: `

`
}

React：
function ParentComp() {
const [count, setCount] = useState(0);

function handleClick() {
setCount(count + 1);
}

return (

);
}

function ChildComp({ count, onClick }) {
return (

);
}

重复的显示

使用React时，您可以通过使用名为JSX的标记语法简单地将模板放入变量中并将其显示出来。而在Vue.js中，我们需要在模板中编写for循环来实现相同的功能。尽管您也可以在React中尝试相同的方法，但可能会产生很多不必要的处理。

比较代码（以列表形式显示食物的组件）Vue：
const ProductsComp = {
template: `

{{ product.name }}

`,
data() {
return {
products: [
{id: 1, name: “苹果”},
{id: 2, name: “香蕉”}
]
}
},
}

React：
function ProductsComp() {
const products = [
{id: 1, name: “苹果”},
{id: 2, name: “香蕉”}
]
const listItems = products.map(product =>

{product.name}

);
return (

{listItems}

);
}

Markdown语法

在Vue.js中，我们使用bind来在模板中编写想要显示的标记。而在React中，使用名为JSX的标记语法，函数组件可以返回标记，这使得它具有更高的自由度。

比较代码（根据已观看或未观看来切换显示的文本）Vue
const TitleComp = {
template: `

已观看

未观看

`,
data() {
return {
isWatched: false
}
}
}

React
function TitleComp() {
const [isWatched, toWatched] = useState(false);

if (isWatched) {
return (

已观看

)
} else {
return (

未观看

)
}
}

试一试的感想

如果你已经在使用Vue.js一段时间了，我认为进入门槛是非常低的。如果你理解了组件之间的数据交互的概念，就不会遇到太多困难。

尽管与教程的内容无关，但我觉得网页加载速度很快。由于使用了Next.js，可能是在使用SSG功能吧？虽然我从未写过Next.js，但我很想在将来尝试一下。

Qiita的折叠功能太不方便了。