了解了这些你就掌握了 React（上）-CSDN博客

本文链接：https://blog.csdn.net/weixin_41990299/article/details/137879291

theme: condensed-night-purple

1. 前言

本文将以 React 和 Vue3 进行同步对比，带大家快速掌握 React。这个系列分为上下两篇，上篇内容包括：

组件
JSX
插值
数据通信
渲染
事件
状态

下篇包括：

元素引用
跨级传值
Portals
Suspense
Error Boundaries
Hooks

2. 组件

第一次遇见“组件”是比较抽象的，实际上，它相当于电路板上的电阻、电容、变压器、二极管等等元器件，这些元器件共同组成了一块电路板。

同理，网页中的一个个UI块就是一个个元器件，它们被称为“组件”，这些组件共同构成了一张完整的UI界面。

Vue： ```html ``` React： ```html ``` ## 3. JSX 组件的本质是 JS 函数，以 MyHeader 组件为例： Vue： ```ts // MyHeader.ts export default { template: '

MyHeader

', }; // SFC // MyHeader.vue

MyHeader

``` React： ```ts // MyHeader.tsx export default function MyHeader() { return

MyHeader

; } ``` 在 React 中返回了一串 HTML 标记，这种语法被称为 JSX，它等价于： ```tsx React.createElement('div', null, 'MyHeader'); ``` 注意：Vue 中也支持 JSX 语法(搭配插件：`@vitejs/plugin-vue-jsx`)： ```tsx // MyHeader.tsx import { defineComponent } from 'vue'; export const MyHeader = defineComponent({ setup() { return () =>

MyHeader

; }, }); ``` ## 4. 插值在Vue中插值使用一对双大括号表示，而在React中使用一对大括号。 Vue： ```tsx

Hello, {{ msg }}.

``` React： ```tsx

Hello, {msg}.

``` ## 5. 数据通信数据的通信分为传值和传组件，都是从外部传入。 ### 5.1 传值通过自定义属性进行传值。 Vue： ```tsx // 父组件 // Coding.vue

Coding for {{ who }}.

``` React： ```tsx // 父组件 // Coding.tsx export default function Coding(props: { who: string }) { return

Coding for {props.who}.

; } ``` ### 5.2 传组件通过插槽来传组件，这就像游戏机的卡槽、电脑边上的各种接口。 Vue： ```tsx // 父组件 This is my card. // MyCard.tsx ``` React： ```tsx // 父组件 This is my card. // MyCard.tsx export default function MyCard({ children }: { children: React.ReactNode }) { return

{children}

; } ``` ## 6. 渲染 ### 6.1 列表渲染 Vue： ```tsx const list = [ { id: 1, name: '🍎', price: 6 }, { id: 2, name: '🍌', price: 3 }, { id: 3, name: '🍐', price: 5 }, ];

{{ item.name }}-{{ item.price }}

``` React： ```tsx

{list.map((item) => (
{item.name}-{item.price}
))}

``` ### 6.2 条件渲染 Vue： ```tsx const visible = false;

显示

隐藏

``` React： ```tsx const visible = false; {visible ?

显示

隐藏

} ``` ## 7. 事件在网页中可以实现很多交互功能，借助于各种事件：点击事件、鼠标移动事件、键盘点击事件…… Vue： ```tsx ``` React： ```tsx ``` ## 8. 状态在 Vue 中使用 ref(响应式引用)、reactive(响应式对象) 方法来管理状态，而在 React 中则使用 useState 方法。 Vue： ```tsx import { ref } from 'vue'; const count = ref(0);

```

React：

```tsx import { useState } from 'react';

const [count, setCount] = useState(0);

{count}

```