React 学习

前言
背景

React 说明

React 是由 Facebook（现 Meta）开发并开源的 JavaScript 库，主要用于构建用户界面（UI），尤其适合构建 单页应用（SPA） 的交互式前端。
它于 2013 年首次发布，因其高效的渲染性能、组件化的开发模式和庞大的生态系统，已成为当前最流行的前端框架之一（与 Vue、Angular 并列）

React19 说明

React 19 是 React 团队于 2024年12月 正式发布的重大版本，代号 “The One”。
它带来了多项核心改进和新特性，旨在简化状态管理、提升服务端渲染能力、优化编译与性能。是继 React 18 后最重要的跨时代更新。

笔记说明

后续内容是以 vite + React19 + Typescript 进行笔记记录。

安装

可以通过 npm 或者 pnpm 安装，推荐使用 pnpm 安装

流程安装
# 可选安装 nnpm
npm install pnpm - g

# 流程安装 → 安装最新 vite → 安装 react
pnpm create vite@latest
或者使用快捷创建
# 安装 vite 并通过 vite 的模板安装 react
npm create vite 项目名 --template=react-ts
# 或者通过 nnpm 安装
pnpm create vite 项目名 --template=react-ts

完成后运行项目

PowerShell
npm run dev

效果展示

%title插图%num
项目结构

使用 npm create vite@latest 创建的 React + TypeScript 项目，默认生成如下目录结构

PowerShell
basic/
├── index.html           # 入口 HTML 文件
├── package.json         # 项目依赖与脚本
├── tsconfig.json        # TypeScript 编译配置
├── tsconfig.app.json    # 应用 TypeScript 配置（Vite 专用）
├── tsconfig.node.json   # 构建工具 TypeScript 配置（Vite 自身）
├── vite.config.ts       # Vite 配置
├── public/              # 静态资源（不会被构建处理）
│   └── vite.svg         # 示例 SVG 图标
└── src/                 # 源代码目录
    ├── main.tsx         # 入口文件，挂载 React 到 DOM
    ├── App.tsx          # 根组件
    ├── App.css          # 根组件样式
    ├── index.css        # 全局样式
    ├── assets/          # 静态资源（会被构建处理）
    │   └── react.svg    # React logo 图片
    └── vite-env.d.ts    # Vite 类型声明（环境变量等）
%title插图%num

对应文件的详细说明如下：

文件 作用
index.html Vite 的入口 HTML，<script type="module" src="/src/main.tsx"> 加载应用。你可以在其中添加 meta 标签、全局样式链接等。
package.json 定义项目元数据、依赖（react, react-dom, typescript, @vitejs/plugin-react 等）和脚本命令（dev, build, preview, lint）。
tsconfig.json TypeScript 主配置文件，通常通过 references 引入 tsconfig.app.json 和 tsconfig.node.json，实现不同环境的不同配置。
tsconfig.app.json 针对 src/ 目录的 TS 配置（应用代码），包含 JSX、模块解析、路径别名等。
tsconfig.node.json 针对 Vite 配置和构建工具的 TS 配置（如 vite.config.ts），一般开启 CommonJS 模块。
vite.config.ts Vite 配置文件，定义插件（如 @vitejs/plugin-react）、代理、构建选项等。
基本使用
JSX

React 使用 JSX 语法方式开发

React 采用 JSX 语法进行开发，它是一种允许我们在 js 文件中编写类似 HTML 结构代码的语法扩展。
但是 JSX 不是 HTML ,而是 js 的一种特殊语法。

实际上，编写的每一行 JSX 代码，在经过编译后都会转换成普通的 js 函数并调用 React.createElement()，例如：

JSX
<h1 className="title">Hello React</h1>

上方的 JSX 代码在编译期间本质上是下方代码的 语法糖

JavaScript
React.createElement('h1', { classNmae: 'title' }, 'hello React');
函数式&类组件

React 支持两种组件写法：函数式组件（Functional Components）和类组件（Class Components）。
前者从 React 16.8 引入 Hooks 后成为主流推荐，后者是早期版本的主要写法

函数式组件（Functional Components）

JSX
import { useState } from 'react'
import './App.css'

function App() {
  const [count, setCount] = useState(0)

  const increment = () => setCount(prev => prev + 1)
  const decrement = () => setCount(prev => prev - 1)

  return (
    <div>
      <h1>计数器 (函数式组件)</h1>
      <p>当前计数: {count}</p>
      <button onClick={increment}>+1</button>
      <button onClick={decrement}>-1</button>
    </div>
  )
}

export default App

效果展示

%title插图%num

类组件（Class Components）

JSX
import './App.css'
import React from 'react'

interface AppState {
  count: number
}

// 指定泛型：Component<Props, State>，这里 Props 为空对象
class App extends React.Component<{}, AppState> {
  state: AppState = {
    count: 0
  }

  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }))
  }

  decrement = () => {
    this.setState(prevState => ({ count: prevState.count - 1 }))
  }

  render() {
    return (
      <div>
        <h1>计数器 (类组件)</h1>
        <p>当前计数: {this.state.count}</p>
        <button onClick={this.increment}>+1</button>
        <button onClick={this.decrement}>-1</button>
      </div>
    )
  }
}

export default App

效果展示

%title插图%num
组件通信

父传子

父向子通信采用 Props 进行，父组件通过 JSX 属性向子组件传递数据或函数

父组件
function Parent() {
  const name = "Hello world";
  return <Child name={name} />;
}
子组件
function Child({ name }) {
  return <p>Hello, {name}!</p>;
}

效果展示

%title插图%num