type
status
date
slug
summary
tags
category
icon
password
1. 前言
本文将以 React 和 Vue3 进行同步对比，带大家快速掌握 React。这个系列分为上下两篇，上篇内容包括：
- 组件
- JSX
- 插值
- 数据通信
- 渲染
- 事件
- 状态
下篇包括：
- 元素引用
- 跨级传值
- Portals
- Suspense
- Error Boundaries
- Hooks
2. 组件
第一次遇见“组件”是比较抽象的，实际上，它相当于电路板上的电阻、电容、变压器、二极管等等元器件，这些元器件共同组成了一块电路板。
同理，网页中的一个个UI块就是一个个元器件，它们被称为“组件”，这些组件共同构成了一张完整的UI界面。
Vue：
React：
3. JSX
组件的本质是 JS 函数，以 MyHeader 组件为例：
Vue：
React：
在 React 中返回了一串 HTML 标记，这种语法被称为 JSX，它等价于：
注意：Vue 中也支持 JSX 语法（搭配插件：
@vitejs/plugin-vue-jsx）：4. 插值
在Vue中插值使用一对双大括号表示，而在React中使用一对大括号。
Vue：
React：
5. 数据通信
数据的通信分为传值和传组件，都是从外部传入。
5.1 传值
通过自定义属性进行传值。
Vue：
React：
5.2 传组件
通过插槽来传组件，这就像游戏机的卡槽、电脑边上的各种接口。
Vue：
React：
6. 渲染
6.1 列表渲染
Vue：
React：
6.2 条件渲染
Vue：
React：
7. 事件
在网页中可以实现很多交互功能，借助于各种事件：点击事件、鼠标移动事件、键盘点击事件……
Vue：
React：
8. 状态
在 Vue 中使用 ref（响应式引用）、reactive（响应式对象） 方法来管理状态，而在 React 中则使用 useState 方法。
Vue：
React：
- 用户点击按钮，触发 setCount
- 更新状态 count
- {count} 读取新状态
- 作者:Eric 见嘉
- 链接:https://tangly1024.com/article/vue-to-react-1
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议，转载请注明出处。
相关文章