React

技术栈

前端框架

reactjsxhooksspavirtual-dom前端

概览

React 技术栈概览

React 是由 Meta（Facebook）开源的声明式 UI 库，通过虚拟 DOM 和组件化思想彻底改变了前端开发范式，是目前全球使用最广泛的前端技术。

解决什么问题

声明式编程：只需描述 UI 应该长什么样，React 负责高效更新 DOM
组件化：一切皆组件，可复用、可测试、可组合
单向数据流：数据从父到子，状态可预测，调试友好
虚拟 DOM：内存 diff 算法，最小化真实 DOM 操作，性能优异

关键特性

Hooks（React 18+）：useState / useEffect / useContext 等，函数组件替代 Class
Concurrent Mode：并发渲染，useTransition / Suspense 提升用户体验
React Server Components (RSC)：服务端组件，零 JS 体积
Next.js：React 全栈元框架，App Router + 文件路由 + SSR/ISR/SSG
生态丰富：Zustand/Redux 状态管理、React Router 路由、Ant Design/MUI/Shadcn UI 组件库
React Native：复用 React 知识开发移动端

毕设场景

后台管理系统（React + Ant Design Pro + Zustand）
社交媒体 SPA（Next.js + Tailwind + Prisma）
电商前端（React + Redux Toolkit + MUI）
配合 NestJS/Go 后端做全栈毕设，业界认可度极高

安装

React 安装指南

1. 环境准备

Node.js：>= 18.x（推荐 20 LTS）
包管理器：npm / yarn / pnpm / bun 均可
IDE：VS Code + ES7+ React snippets + Prettier
浏览器扩展：React Developer Tools

2. 安装命令

方式一：Vite（推荐，最快）

# npm
npm create vite@latest my-react-app -- --template react-ts

# 或交互式
npm create vite@latest
# → 选择 React → TypeScript

cd my-react-app
npm install
npm run dev
# → http://localhost:5173

方式二：Next.js（全栈）

npx create-next-app@latest my-next-app --typescript --tailwind --app
cd my-next-app
npm run dev
# → http://localhost:3000

方式三：CDN（快速原型）

<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
  function App() { return <h1>Hello React!</h1> }
  ReactDOM.createRoot(document.getElementById('root')).render(<App />)
</script>

3. 常见安装问题

Q: npm create vite 卡住？
A: 换 pnpm：pnpm create vite；或设置镜像 npm config set registry https://registry.npmmirror.com

Q: JSX 类型报错？
A: TypeScript 项目确保 tsconfig.json 中 "jsx": "react-jsx"

Q: create-react-app 还能用吗？
A: CRA 已进入维护模式，React 官方推荐 Next.js 或 Vite 替代。毕设应优先使用 Vite + React

示例

React 计数器 + 随机用户 API

目标

用 React Hooks（useState、useEffect）实现计数器，并调用免费 API 获取随机用户信息。

完整代码

`src/App.tsx`

import { useState, useEffect } from 'react'

interface User {
  name: { first: string; last: string }
  email: string
  picture: { large: string }
}

export default function App() {
  const [count, setCount] = useState(0)
  const [user, setUser] = useState<User | null>(null)
  const [loading, setLoading] = useState(false)

  async function fetchUser() {
    setLoading(true)
    try {
      const res = await fetch('https://randomuser.me/api/')
      const data = await res.json()
      setUser(data.results[0])
    } finally {
      setLoading(false)
    }
  }

  useEffect(() => { fetchUser() }, [])

  return (
    <div style={styles.container}>
      <h1>⚛️ React 入门示例</h1>

      {/* 计数器 */}
      <div style={styles.card}>
        <h2>计数器: {count}</h2>
        <div style={styles.buttons}>
          <button onClick={() => setCount(c => c - 1)} style={styles.btn}>-1</button>
          <button onClick={() => setCount(0)} style={styles.btn}>重置</button>
          <button onClick={() => setCount(c => c + 1)} style={styles.btn}>+1</button>
        </div>
      </div>

      {/* 随机用户 */}
      <div style={styles.card}>
        <h2>随机用户</h2>
        {loading && <p>加载中...</p>}
        {user && (
          <div style={{ textAlign: 'center' }}>
            <img src={user.picture.large} alt="avatar" style={styles.avatar} />
            <p><strong>{user.name.first} {user.name.last}</strong></p>
            <p style={{ color: '#666' }}>{user.email}</p>
          </div>
        )}
        <button onClick={fetchUser} style={styles.btn}>换一个</button>
      </div>
    </div>
  )
}

const styles: Record<string, React.CSSProperties> = {
  container: { maxWidth: 420, margin: '2rem auto', fontFamily: 'system-ui' },
  card: { border: '1px solid #e5e7eb', borderRadius: 12, padding: 20, marginBottom: 16 },
  buttons: { display: 'flex', gap: 8, marginTop: 8 },
  btn: { padding: '8px 16px', background: '#3b82f6', color: '#fff', border: 'none', borderRadius: 6, cursor: 'pointer' },
  avatar: { width: 80, height: 80, borderRadius: '50%', marginBottom: 8 },
}

运行

npm install &;& npm run dev

预期输出

页面显示：

计数器卡片，可加减和重置
随机用户卡片，显示头像/姓名/邮箱，可点击换一个

教程

React 18 毕设基础

背景

React 是全球使用最广泛的前端库，掌握 React 对求职极其有利。React 18 引入了 Concurrent Mode、Suspense 和改进的批处理。

核心概念

1. 函数组件 + Hooks

React 已经完全拥抱函数组件，Class 组件仅存于老项目：

import { useState, useEffect, useCallback, useMemo, useRef } from 'react'

function Counter() {
  // useState — 状态
  const [count, setCount] = useState(0)

  // useEffect — 副作用（数据请求、订阅、DOM操作）
  useEffect(() => {
    document.title = `点击了 ${count} 次`
    return () => { /* 清理函数 */ }
  }, [count]) // 依赖数组

  // useCallback — 缓存函数
  const handleClick = useCallback(() => {
    setCount(c => c + 1)
  }, [])

  // useMemo — 缓存计算结果
  const doubled = useMemo(() => count * 2, [count])

  // useRef — DOM引用 / 可变值
  const inputRef = useRef<HTMLInputElement>(null)

  return (
    <div>
      <p>计数: {count} (二倍: {doubled})</p>
      <button onClick={handleClick}>+1</button>
    </div>
  )
}

2. 状态管理：Zustand（轻量推荐）

// store.ts
import { create } from 'zustand'

interface BearStore {
  bears: number
  increase: () => void
}

const useBearStore = create<BearStore>((set) => ({
  bears: 0,
  increase: () => set((state) => ({ bears: state.bears + 1 })),
}))

3. React 18 新特性

特性	说明
Concurrent Mode	可中断渲染，用户交互更流畅
`useTransition`	标记非紧急更新
`Suspense`	声明式加载等待
自动批处理	多个 setState 合并为一次渲染

分步操作：搭建毕设项目

Step 1: Vite + React + TypeScript

npm create vite@latest grad-project -- --template react-ts
cd grad-project
npm install
npm run dev

Step 2: 安装必备库

npm install react-router-dom zustand axios antd @ant-design/icons

Step 3: 路由配置

// src/router.tsx
import { createBrowserRouter, RouterProvider } from 'react-router-dom'
import Login from './pages/Login'
import Dashboard from './pages/Dashboard'

const router = createBrowserRouter([
  { path: '/', element: <Login /> },
  { path: '/dashboard', element: <Dashboard /> },
])

export default function App() {
  return <RouterProvider router={router} />
}

Step 4: 请求封装

// utils/request.ts
import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000/api',
  timeout: 10000,
})

instance.interceptors.request.use((config) => {
  const token = localStorage.getItem('token')
  if (token) config.headers.Authorization = `Bearer ${token}`
  return config
})

instance.interceptors.response.use(
  (res) => res.data,
  (err) => {
    if (err.response?.status === 401) {
      window.location.href = '/'
    }
    return Promise.reject(err)
  }
)

export default instance

思考题

useEffect 的清理函数何时执行？
什么情况会导致 React 无限重渲染？
React.memo 和 useMemo 的区别是什么？

毕设常用搭配

场景	技术栈
管理后台	React + Ant Design Pro + Zustand
全栈 SSR	Next.js + Prisma + PostgreSQL
UI 优先	React + Shadcn UI + Tailwind
移动端	React Native

参考资料

[1] Meta. React 官方文档. 2024. https://react.dev
[2] Dan Abramov. React 18 并发模式详解. 2022. https://react.dev/blog/2022/03/29/react-v18
[3] pmndrs. Zustand 轻量状态管理. 2024. https://docs.pmnd.rs/zustand