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

思考题

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

毕设常用搭配

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