WYZ

欢迎来到 WYZ の拾忆录

这里是我的私人记忆博物馆。我会在这里整理技术学习的点滴、记录生活中的灵光一闪，也会写下那些不想被时间冲走的随笔与感悟。愿这些文字，能成为你我共鸣的频率。

了解本站

标签

WYZ

欢迎来到 WYZ の拾忆录

这里是我的私人记忆博物馆。我会在这里整理技术学习的点滴、记录生活中的灵光一闪，也会写下那些不想被时间冲走的随笔与感悟。愿这些文字，能成为你我共鸣的频率。

了解本站

标签

WYZ

欢迎来到 WYZ の拾忆录

这里是我的私人记忆博物馆。我会在这里整理技术学习的点滴、记录生活中的灵光一闪，也会写下那些不想被时间冲走的随笔与感悟。愿这些文字，能成为你我共鸣的频率。

了解本站

标签

站点统计

文章

12

分类

7

标签

28

总字数

32,114

总阅读量

—

运行天数

0 天

最后活动

0 天前

1605 字

4 分钟

React + TypeScript 基础

2026-07-02

前端

React

/

TypeScript

React + TypeScript 基础#

1. React 简介与环境搭建#

1.1 什么是 React#

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开源维护。

React 的核心特点：

组件化：将 UI 拆分为独立、可复用的组件
响应式：数据变化后，视图会自动更新
单向数据流：数据通常从父组件流向子组件
生态系统完善：拥有大量第三方库和工具

1.2 创建 React + TypeScript 项目#

推荐使用 Vite 创建项目：

1
# 使用 Vite 创建 React + TS 项目
2
npm create vite@latest my-react-app -- --template react-ts
3

4
# 进入项目目录
5
cd my-react-app
6

7
# 安装依赖
8
npm install
9

10
# 启动开发服务器
11
npm run dev

1.3 常见项目结构#

1
my-react-app/
2
├── public/                 # 静态资源
3
├── src/                    # 源代码
4
│   ├── App.tsx             # 主组件（.tsx 扩展名）
5
│   ├── App.css             # 样式
6
│   ├── main.tsx            # 入口文件
7
│   ├── components/         # 组件目录
8
│   ├── types/              # 类型定义
9
│   │   └── index.ts        # 统一导出类型
10
│   └── api/                # API 调用
11
│       └── student.ts      # 学生相关接口
12
├── tsconfig.json           # TS 配置
13
├── vite.config.ts          # Vite 配置
14
├── package.json            # 项目配置
15
└── index.html              # HTML 入口

1.4 `tsconfig.json` 常见配置#

图片中给出的配置重点包括：

target: "ES2020"：指定编译目标
lib: ["ES2020", "DOM", "DOM.Iterable"]：引入浏览器与 ES 能力
module: "ESNext"：使用现代模块系统
moduleResolution: "bundler"：适配 Vite 一类构建工具
jsx: "react-jsx"：启用 React JSX 转换
strict: true：开启严格类型检查
noUnusedLocals: true、noUnusedParameters: true：帮助清理无用代码

2. `import` 与 `export` 模块化#

2.1 为什么要模块化#

在 React 项目中，代码通常会拆成多个文件，例如组件、工具函数、类型定义等。通过 import 和 export，我们可以在不同文件之间共享代码，提高可维护性和复用性。

2.2 `export` 的三种常见方式#

命名导出#

1
// 导出一个组件
2
export function Button() {
3
  return <button>点击</button>
4
}
5

6
// 导出多个内容
7
export const maxSize = 100
8
export const minSize = 10
9

10
// 导出类型
11
export interface User {
12
  id: number
13
  name: string
14
}

默认导出#

一个文件只能有一个默认导出：

1
function App() {
2
  return <div>应用</div>
3
}
4

5
export default App

统一导出#

常用于 index.ts：

1
export { Button } from './Button'
2
export { Input } from './Input'
3
export { Card } from './Card'

2.3 `import` 的常见写法#

1
// 导入命名导出
2
import { Button } from './Button'
3

4
// 导入多个内容
5
import { Button, Input, Card } from './components'
6

7
// 重命名导入
8
import { Button as PrimaryButton } from './Button'
9

10
// 导入默认导出
11
import App from './App'
12
import MainApp from './App'

2.4 React 项目中的常见导入场景#

1
// 导入 React 和 Hooks
2
import React from 'react'
3
import { useState, useEffect } from 'react'
4

5
// 导入组件
6
import Header from './components/Header'
7
import Footer from './components/Footer'
8

9
// 导入类型
10
import type { User } from './types'
11

12
// 导入样式
13
import './App.css'

2.5 模块化示例#

1
import React from 'react'
2

3
export interface UserCardProps {
4
  name: string
5
  age: number
6
}
7

8
export function UserCard({ name, age }: UserCardProps) {
9
  return (
10
    <div className="card">
11
      <h3>{name}</h3>
12
      <p>年龄：{age}</p>
13
    </div>
14
  )
15
}

3. JSX 与组件基础#

3.1 什么是组件#

React 应用由组件组成。组件可以理解为 UI 的一个部分，它拥有自己的结构、逻辑和外观。组件既可以很小，比如按钮、输入框，也可以很大，比如一个完整页面。

组件的核心特点：

独立性：每个组件有自己的逻辑和外观
可复用：一个组件可以在多个地方使用
组合性：多个组件可以组合成更复杂的 UI

常见组件规模示例：

小组件：按钮、输入框、图标
中等组件：搜索框、导航栏、卡片
大组件：整个页面、页面布局

3.2 什么是 JSX#

JSX 是 JavaScript 的语法扩展，允许我们在 JavaScript 或 TypeScript 文件中编写类似 HTML 的代码。

1
const element = <h1>Hello, world!</h1>

3.3 为什么使用 JSX#

JSX 的价值在于：用熟悉的 HTML 结构描述 UI，再由 React 将它转换为可渲染的元素。

优点：

直观：更容易描述页面结构
强大：可以嵌入 JavaScript 表达式
安全：React 默认会进行必要的转义，降低 XSS 风险
高效：最终会被编译成优化后的 JavaScript

3.4 JSX 基础语法#

在 JSX 中嵌入变量#

1
const name: string = '张三'
2
const element = <h1>你好，{name}!</h1>

在 JSX 中使用表达式#

1
const age: number = 18
2
const info = <p>明年年龄：{age + 1}</p>

在 JSX 中调用函数#

1
function formatDate(date: Date): string {
2
  return date.toISOString()
3
}
4

5
const timestamp = <p>{formatDate(new Date())}</p>

注意：对象不能直接渲染#

1
const user: { name: string } = { name: '李四' }
2
const correct = <p>{user.name}</p>
3

4
// 错误示例：
5
// const wrong = <p>{user}</p>

3.5 JSX 与 HTML 的常见差异#

图片中的重点对比如下：

class 要写成 className
tabindex 要写成 tabIndex
事件名用驼峰，例如 onClick
style 要使用对象写法
自闭合标签必须闭合，如 <img />
for 要写成 htmlFor

示例：

1
function Example() {
2
  return (
3
    <div className="container" tabIndex={0}>
4
      <label htmlFor="username">用户名:</label>
5
      <input id="username" type="text" />
6
      <img src="/logo.png" alt="Logo" />
7
      <button onClick={() => alert('点击')}>点我</button>
8
      <span style={{ color: 'red', fontSize: 16 }}>红色文字</span>
9
    </div>
10
  )
11
}

3.6 JSX 书写规则#

规则 1：返回内容需要有一个根节点#

1
// 正确：使用 div 包裹
2
function Correct1() {
3
  return (
4
    <div>
5
      <h1>标题</h1>
6
      <p>内容</p>
7
    </div>
8
  )
9
}
10

11
// 正确：使用 Fragment，避免多余 DOM
12
function Correct2() {
13
  return (
14
    <>
15
      <h1>标题</h1>
16
      <p>内容</p>
17
    </>
18
  )
19
}

规则 2：不渲染内容时可以返回 `null`#

1
function UserGreeting({ isLoggedIn }: { isLoggedIn: boolean }) {
2
  if (!isLoggedIn) {
3
    return null
4
  }
5
  return <h1>欢迎回来！</h1>
6
}

规则 3：JavaScript 表达式写在 `{}` 中#

1
const user: { name: string } = { name: '张三' }
2
const isLoggedIn: boolean = true
3

4
function Greeting() {
5
  return (
6
    <div>
7
      <p>{user.name}</p>
8
      <p>{isLoggedIn ? '已登录' : '未登录'}</p>
9
      <p>{user.name.toUpperCase()}</p>
10

11
      <ul>
12
        {[1, 2, 3].map((num) => (
13
          <li key={num}>{num}</li>
14
        ))}
15
      </ul>
16
    </div>
17
  )
18
}

3.7 组件嵌套示例#

1
interface StudentCardProps {
2
  name: string
3
  age: number
4
  gender: string
5
}
6

7
// 子组件：学生卡片
8
function StudentCard({ name, age, gender }: StudentCardProps) {
9
  return (
10
    <div className="card">
11
      <h3>{name}</h3>
12
      <p>年龄：{age}</p>
13
      <p>性别：{gender}</p>
14
    </div>
15
  )
16
}

父组件可以在列表中多次使用 StudentCard，这正是 React 组件复用的典型场景。

4. Props、事件与列表渲染#

原文后半段给出的实操代码，核心在于演示：

通过 interface 约束组件 props
父组件通过属性给子组件传值
子组件通过解构获取参数
可选属性用 ?
列表渲染要加 key
事件处理函数可以通过箭头函数传参

4.1 父组件示例#

1
import './App.css'
2
import Button from './components/Button'
3
import Student from './components/Student'
4

5
function App() {
6
  const name: string = 'John Doe'
7
  const age: number = 18
8

9
  function formatData(date: Date): string {
10
    return date.toISOString()
11
  }
12

13
  const list = [
14
    { id: 1, name: '张三', age: 20, gender: '男' },
15
    { id: 2, name: '李四', age: 19, gender: '女' },
16
    { id: 3, name: '哪吒', age: 18, gender: '男' }
17
  ]
18

19
  return (
20
    <div>
21
      <p>姓名：{name}</p>
22
      <p>明年年龄：{age + 1}</p>
23
      <p>{formatData(new Date())}</p>
24

25
      {[1, 2, 3, 4, 5].map((num) => (
26
        <Button key={num} />
27
      ))}
28

29
      <h2>学生列表</h2>
30
      {list.map((item) => (
31
        <Student
32
          key={item.id}
33
          name={item.name}
34
          age={item.age}
35
          gender={item.gender}
36
        />
37
      ))}
38
    </div>
39
  )
40
}
41

42
export default App

4.2 子组件示例#

1
interface IProps {
2
  name: string
3
  age: number
4
  gender?: string
5
}
6

7
const Student = (props: IProps) => {
8
  const { name, age, gender } = props
9

10
  const handleClick = (params: string) => {
11
    console.log(`${name}被点击了，${params}`)
12
  }
13

14
  return (
15
    <div className="student" onClick={() => handleClick('你好')}>
16
      <h3>{name}</h3>
17
      <p>年龄：{age}</p>
18
      <p>性别：{gender}</p>
19
    </div>
20
  )
21
}
22

23
export default Student

4.3 这一段代码的重点#

gender?: string 表示该属性可传可不传
name、age、gender 从 props 中解构后就能直接在 JSX 中使用
onClick={() => handleClick('你好')} 是为了传参
列表渲染时，key 应该使用稳定且唯一的值，例如 id
Date、string、number 这些类型声明，可以帮助我们尽早发现错误

5. 状态管理 `useState`#

5.1 什么是 `useState`#

useState 是 React 提供的 Hook，用于在函数组件中添加状态能力。

状态是组件内部的数据。当状态变化时，React 会重新渲染组件并更新 UI。

5.2 为什么需要 `useState`#

直接修改普通变量，不会触发界面刷新：

1
function Counter() {
2
  let count = 0
3

4
  function handleClick() {
5
    count = count + 1
6
  }
7

8
  return <button onClick={handleClick}>计数：{count}</button>
9
}

使用 useState 后，状态变化会自动触发 UI 更新：

1
import { useState } from 'react'
2

3
function Counter() {
4
  const [count, setCount] = useState(0)
5

6
  function handleClick() {
7
    setCount(count + 1)
8
  }
9

10
  return <button onClick={handleClick}>计数：{count}</button>
11
}

5.3 `useState` 核心特点#

响应式：状态变化会触发重新渲染
持久化：组件重新渲染后状态仍会保留
只能在函数组件中使用
必须在组件顶层按顺序调用，不能放进条件或循环中

5.4 基础用法#

TypeScript 通常可以自动推断状态类型：

1
import { useState } from 'react'
2

3
function Counter() {
4
  const [count, setCount] = useState(0)      // number
5
  const [name, setName] = useState('')       // string
6
  const [loading, setLoading] = useState(false) // boolean
7

8
  return (
9
    <div>
10
      <p>计数：{count}</p>
11
      <button onClick={() => setCount(count + 1)}>+1</button>
12
    </div>
13
  )
14
}

5.5 状态更新注意事项#

当新状态依赖旧状态时，推荐使用函数式更新：

1
function SafeUpdate() {
2
  const [count, setCount] = useState(0)
3

4
  function handleClick() {
5
    setCount((prev) => prev + 1)
6
  }
7

8
  return <button onClick={handleClick}>点击</button>
9
}

这样写更安全，尤其是在多次连续更新状态时，更不容易拿到旧值。

6. 重点速记#

React 的核心思想是组件化和数据驱动视图
推荐用 Vite 初始化 React + TypeScript 项目
tsx 文件通常用来写组件，ts 文件更适合写工具函数或类型
export 负责导出，import 负责导入，index.ts 常用于统一导出
JSX 本质上是 JavaScript 里的类 HTML 语法
JSX 中写变量、表达式、函数调用时要使用 {}
JSX 返回内容必须有一个根节点，或者使用 Fragment
组件通信的基础是 props
列表渲染要加 key
普通变量变化不会刷新界面，状态变化才会触发重新渲染
useState 是函数组件管理状态的基础 Hook
基于旧值更新状态时，优先使用函数式写法

7. 学习建议#

如果你刚开始学 React + TypeScript，建议按这个顺序练习：

先会创建项目并看懂目录结构
再练习 import / export
熟悉 JSX 的语法和常见坑
学会拆分组件、定义 props
最后用 useState 做交互，例如计数器、表单、列表切换

这样会比一开始直接上复杂项目更容易建立整体理解。

如果这篇文章对你有帮助，欢迎分享给更多人！

React + TypeScript 基础

https://wyz.sakura-v.cn/posts/bitstream-summer/react/

作者

WYZ

发布于

2026-07-02

许可协议

CC BY-NC-SA 4.0

部分信息可能已经过时

MySQL 与 JDBC

Java基础与进阶

WYZの拾忆录

React + TypeScript 基础#

1. React 简介与环境搭建#

1.1 什么是 React#

1.2 创建 React + TypeScript 项目#

1.3 常见项目结构#

1.4 tsconfig.json 常见配置#

2. import 与 export 模块化#

2.1 为什么要模块化#

2.2 export 的三种常见方式#

命名导出#

默认导出#

统一导出#

2.3 import 的常见写法#

2.4 React 项目中的常见导入场景#

2.5 模块化示例#

3. JSX 与组件基础#

3.1 什么是组件#

3.2 什么是 JSX#

3.3 为什么使用 JSX#

3.4 JSX 基础语法#

在 JSX 中嵌入变量#

在 JSX 中使用表达式#

在 JSX 中调用函数#

注意：对象不能直接渲染#

3.5 JSX 与 HTML 的常见差异#

3.6 JSX 书写规则#

规则 1：返回内容需要有一个根节点#

规则 2：不渲染内容时可以返回 null#

规则 3：JavaScript 表达式写在 {} 中#

3.7 组件嵌套示例#

4. Props、事件与列表渲染#

4.1 父组件示例#

4.2 子组件示例#

4.3 这一段代码的重点#

5. 状态管理 useState#

5.1 什么是 useState#

5.2 为什么需要 useState#

5.3 useState 核心特点#

5.4 基础用法#

5.5 状态更新注意事项#

6. 重点速记#

7. 学习建议#

目录

1.4 `tsconfig.json` 常见配置#

2. `import` 与 `export` 模块化#

2.2 `export` 的三种常见方式#

2.3 `import` 的常见写法#

规则 2：不渲染内容时可以返回 `null`#

规则 3：JavaScript 表达式写在 `{}` 中#

5. 状态管理 `useState`#

5.1 什么是 `useState`#

5.2 为什么需要 `useState`#

5.3 `useState` 核心特点#