React——React基础语法（2）

摘要

本文档介绍了React生态系统的核心组件与工具，包括React-Router路由管理、PubSub消息订阅、Redux全局状态管理（含Store/State/Action/Reducer/Dispatch核心概念及Redux Toolkit使用），以及Ant-Design组件库的安装配置与实战应用。同时涵盖React项目创建（Vite方式）、目录结构、开发环境启动、生产环境打包部署及常见问题处理。

1. React-Router组件

在 React Router 中：

复制代码

React Router = 用来做"页面跳转"的库

|---------------|------|
| API | 作用 |
| BrowserRouter | 路由容器 |
| Routes | 路由集合 |
| Route | 路由规则 |
| Link | 跳转 |
| useNavigate | 代码跳转 |

1.1. 📌 解决什么问题？

React 是单页面应用（SPA）：

复制代码

不会真的跳网页，只是切换组件

所以需要：

复制代码

URL变化 → 显示不同组件

在 React Router 中：

复制代码

React Router = 用来做"页面跳转"的库

1.2. 📌 解决什么问题？

React 是单页面应用（SPA）：

复制代码

不会真的跳网页，只是切换组件

所以需要：

复制代码

URL变化 → 显示不同组件

1.3. 最简单完整示例

复制代码

import { BrowserRouter, Routes, Route, Link } from "react-router-dom";

function Home() {
  return <h1>首页</h1>;
}

function About() {
  return <h1>关于页</h1>;
}

export default function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">首页</Link>
        <Link to="/about">关于</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

1.4. 核心语法（必须掌握🔥）

1.4.1. 1️⃣ 路由定义

复制代码

<Route path="/user" element={<User />} />

1.4.2. 2️⃣ 动态路由（非常重要）

复制代码

<Route path="/user/:id" element={<User />} />

获取参数：

复制代码

import { useParams } from "react-router-dom";

const { id } = useParams();

1.4.3. 3️⃣ 编程式跳转（很常用）

复制代码

import { useNavigate } from "react-router-dom";

const navigate = useNavigate();

navigate("/home");

1.4.4. 4️⃣ 嵌套路由（后台系统必备）

复制代码

<Route path="/admin" element={<Layout />}>
  <Route path="user" element={<User />} />
</Route>

Layout 里写：

复制代码

<Outlet />

1.4.5. 5️⃣ 重定向

复制代码

import { Navigate } from "react-router-dom";

<Route path="/" element={<Navigate to="/home" />} />

1.4.6. 6️⃣ 404 页面

复制代码

<Route path="*" element={<NotFound />} />

|---------------|------|
| API | 作用 |
| BrowserRouter | 路由容器 |
| Routes | 路由集合 |
| Route | 路由规则 |
| Link | 跳转 |
| useNavigate | 代码跳转 |

1.5. React Router vs Vue Router

对比一下你更容易理解，在 Vue.js 中：

|-----------------|------------|
| Vue | React |
| router.push() | navigate() |
| <router-link> | <Link> |
| <router-view> | <Outlet> |

本质一样：都是 URL → 组件映射

2. PubSub 组件

复制代码

PubSub = 发布订阅模式（Publish / Subscribe）

核心思想：

复制代码

一个地方"发布消息"，多个地方"订阅接收"

生活类比

复制代码

广播站（发布） → 听众（订阅）

2.1. 为什么需要 PubSub？

在 React 中：

复制代码

组件通信默认是：父 → 子（props）

问题

复制代码

兄弟组件 / 跨层级组件 很难通信

解决：

复制代码

用 PubSub 实现"任意组件通信"

2.2. 基础语法（以 pubsub-js 为例）

常用库：pubsub-js

2.2.1. 1️⃣ 安装

复制代码

npm install pubsub-js

2.2.2. 2️⃣ 发布消息

复制代码

import PubSub from 'pubsub-js';

PubSub.publish('EVENT_NAME', data);

2.2.3. 3️⃣ 订阅消息

复制代码

import PubSub from 'pubsub-js';

const token = PubSub.subscribe('EVENT_NAME', (msg, data) => {
  console.log(data);
});

2.2.4. 4️⃣ 取消订阅

复制代码

PubSub.unsubscribe(token);

2.3. PubSub实战示例（你一看就懂）

2.3.1. 组件A（发布）

复制代码

import PubSub from 'pubsub-js';

function Sender() {
  return (
    <button onClick={() => PubSub.publish('sendMsg', '你好')}>
      发送消息
    </button>
  );
}

2.3.2. 🟢 组件B（订阅）

复制代码

import { useEffect } from 'react';
import PubSub from 'pubsub-js';

function Receiver() {
  useEffect(() => {
    const token = PubSub.subscribe('sendMsg', (_, data) => {
      console.log('收到:', data);
    });

    return () => PubSub.unsubscribe(token);
  }, []);

  return <div>接收消息组件</div>;
}

效果：

复制代码

点击按钮 → Receiver 收到消息

2.4. PubSub核心作用（非常关键）

2.4.1. ✔ 解耦组件

复制代码

组件之间不用互相引用

2.4.2. ✔ 跨层级通信

复制代码

不用 props 一层层传

2.4.3. ✔ 广播机制

复制代码

一个事件 → 多个组件响应

2.5. 实战场景（你项目里会用到）

2.5.1. 🎯 场景1：删除后刷新列表

删除组件：

复制代码

PubSub.publish('refreshList');

列表组件：

复制代码

PubSub.subscribe('refreshList', fetchList);

2.5.2. 🎯 场景2：全局通知（类似事件总线）

复制代码

登录成功 → 通知多个模块刷新

2.5.3. 🎯 场景3：弹窗控制

复制代码

任何地方触发弹窗

2.6. 和其他方案对比（非常重要）

2.6.1. PubSub vs props

|-----|-------|
| | props |
| 方向 | 父 → 子 |
| 层级 | 受限 |
| 灵活性 | 低 |

2.7. PubSub vs useContext

|------|------------|
| | useContext |
| 类型 | 状态共享 |
| 是否实时 | 是 |
| 适合 | 全局数据 |

2.8. PubSub vs PubSub

|------|--------|
| | PubSub |
| 类型 | 事件通信 |
| 是否持久 | ❌ |
| 特点 | 解耦 |

关键区别：

复制代码

Context = 数据
PubSub = 事件

2.9. 企业级建议（很重要⚠️）

现代 React 项目中：不推荐大量使用 PubSub。推荐优优先级。

props（简单场景）
useContext（全局状态）
Zustand / Redux（复杂状态）
PubSub（特殊场景）

3. Redux 组件

在 Redux 中：Redux = 一个"全局状态管理库"，核心作用：让多个组件共享数据，并统一管理状态变化。

在 React 里：组件之间通信困难（尤其是跨层级），Redux 解决：把所有数据放在一个"全局仓库"

3.1. Redux 核心概念（必须掌握🔥）

3.1.1. 1️⃣ Store（仓库）

复制代码

存所有数据的地方

3.1.2. 2️⃣ State（状态）

复制代码

当前数据

3.1.3. 3️⃣ Action（动作）

复制代码

描述"要干什么"

3.1.4. 4️⃣ Reducer（处理器）

复制代码

根据 action 修改 state

3.1.5. 5️⃣ Dispatch（派发）

复制代码

触发更新

3.2. Redux基础语法（完整示例）

用官方推荐：Redux Toolkit（更简单）

3.2.1. 1️⃣ 安装

复制代码

npm install @reduxjs/toolkit react-redux

3.2.2. 2️⃣ 创建 slice（核心）

复制代码

// store/counterSlice.js
import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: {
    count: 0
  },
  reducers: {
    increment: (state) => {
      state.count += 1;
    },
    decrement: (state) => {
      state.count -= 1;
    }
  }
});

export const { increment, decrement } = counterSlice.actions;
export default counterSlice.reducer;

3.3. 3️⃣ 创建 store

复制代码

// store/index.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

3.4. 4️⃣ 注入 React

复制代码

// main.jsx
import { Provider } from 'react-redux';
import { store } from './store';

<Provider store={store}>
  <App />
</Provider>

3.5. 5️⃣ 组件中使用

复制代码

import { useSelector, useDispatch } from 'react-redux';
import { increment } from './store/counterSlice';

function Counter() {
  const count = useSelector(state => state.counter.count);
  const dispatch = useDispatch();

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => dispatch(increment())}>
        +1
      </button>
    </div>
  );
}

3.6. Redux实战场景（你项目里会用到）

3.6.1. 🎯 场景1：用户登录信息

复制代码

所有页面都需要 user 信息

3.6.2. 🎯 场景2：权限控制

复制代码

菜单 / 按钮权限

3.6.3. 🎯 场景3：全局 loading

复制代码

接口请求统一控制

3.7. Redux相关组件对比

3.7.1. 1️⃣ Redux vs useState

|------|----------|
| | useState |
| 作用范围 | 单组件 |
| 共享能力 | ❌ |
| 复杂度 | 简单 |

3.7.2. 2️⃣ Redux vs useContext

|----|------------|
| | useContext |
| 能力 | 共享数据 |
| 缺点 | 不适合复杂逻辑 |

3.7.3. 3️⃣ Redux vs PubSub

|----|--------|
| | PubSub |
| 类型 | 事件 |
| 状态 | ❌ 不保存 |

3.7.4. 4️⃣ Redux vs Vue（你熟悉）

在 Vue.js 中：

复制代码

Redux ≈ Vuex / Pinia

3.8. Redux企业级建议（很重要🔥）

3.8.1. ✔ 什么时候用 Redux？

复制代码

跨页面共享 + 复杂状态

3.8.2. ❌ 不要滥用

复制代码

普通页面数据 → 用 useState 就够了

3.8.3. ✔ 现代推荐

复制代码

小项目：useState + useContext
中大型项目：Redux Toolkit（推荐）、或 Zustand（更轻量）

4. Ant-Design组件库

在 Ant Design 中：Ant Design = 一套现成的 React UI 组件库（企业级），简单说：别人帮你写好了按钮、表格、表单、弹窗...。你直接用就行。

4.1. Ant-Design解决什么问题？

4.1.1. ❌ 不用组件库（原始开发）

复制代码

<button>提交</button>
<table>...</table>

问题：

样式丑
交互复杂（分页、校验）
开发慢

4.1.2. Ant Design 使用

复制代码

<Button type="primary">提交</Button>
<Table columns={columns} dataSource={data} />

优势：

复制代码

开箱即用 + 美观 + 企业级交互

4.2. Ant-Design核心作用（非常重要）

4.2.1. ✔ 1. 提供 UI 组件

Button（按钮）
Table（表格）
Form（表单）
Modal（弹窗）
Input（输入框）

4.2.2. ✔ 2. 提供交互能力

复制代码

分页 / 校验 / loading / 弹窗 / 表格排序

4.2.3. ✔ 3. 统一设计规范

风格统一（阿里系后台标准）

4.3. Ant 实战使用

4.3.1. 1️⃣ 安装

复制代码

npm install antd

4.3.2. 2️⃣ 引入样式（重要）

复制代码

import 'antd/dist/reset.css';

4.3.3. 3️⃣ 使用组件

示例：按钮

复制代码

import { Button } from 'antd';

function App() {
  return <Button type="primary">提交</Button>;
}

4.3.4. 示例：表格（你最常用🔥）

复制代码

import { Table } from 'antd';

const columns = [
  { title: '名称', dataIndex: 'name' },
  { title: '年龄', dataIndex: 'age' }
];

const data = [
  { key: 1, name: '张三', age: 18 }
];

function App() {
  return <Table columns={columns} dataSource={data} />;
}

5. React项目创建与运行

5.1. （推荐）：Vite（更快）

当前主流方案（比 CRA 快很多）

5.1.1. 1️⃣ 创建项目

复制代码

npm create vite@latest my-react-app

选择：

复制代码

React
→ TypeScript（建议选）

5.1.2. 2️⃣ 安装依赖

复制代码

cd my-react-app
npm install

5.1.3. 3️⃣ 启动项目

复制代码

npm run dev

打开浏览器：

复制代码

http://localhost:5173

5.2. 项目结构（你必须看懂）

复制代码

my-react-app/
├── src/
│   ├── main.jsx     # 入口
│   ├── App.jsx      # 根组件
│   ├── components/  # 组件
│   ├── pages/       # 页面
│   ├── utils/       # 工具
│   ├── services/    # 请求
├── index.html
├── package.json

// main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')).render(
  <App />
)

5.3. 开发环境启动

5.3.1. Vite：

复制代码

npm run dev

5.3.2. CRA：

复制代码

npm start

特点：

热更新（修改自动刷新）
本地开发

5.4. React打包生产环境（最关键🔥）

5.4.1. Vite：

复制代码

npm run build

输出：

复制代码

dist/

5.4.2. CRA：

复制代码

npm run build

输出：

复制代码

build/

本质：

复制代码

把 React 代码 → 静态文件（HTML + JS + CSS）

5.5. React部署到生产环境（重点）

5.5.1. 🧱 方式一：Nginx（最常见）

把 dist 或 build 放到服务器

nginx.conf 示例：

复制代码

server {
    listen 80;
    server_name your-domain.com;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

关键：

复制代码

try_files ... /index.html

用于解决：

复制代码

React Router 刷新 404 问题

5.5.2. ☁️ 方式二：静态托管

Vercel（推荐）
Netlify
GitHub Pages

一键部署：

复制代码

npm run build

上传 dist 即可

5.5.3. 🐳 方式三：Docker（企业常用）

复制代码

FROM nginx:alpine
COPY dist/ /usr/share/nginx/html

5.6. React生产环境常见问题（你必须知道）

5.6.1. ❗刷新页面 404

原因：

复制代码

React Router 是前端路由

解决：

复制代码

try_files $uri $uri/ /index.html;

5.6.2. ❗接口跨域

解决：开发环境（Vite）

复制代码

// vite.config.js
server: {
  proxy: {
    '/api': {
      target: 'http://localhost:8080',
      changeOrigin: true
    }
  }
}

5.6.3. ❗打包路径问题

复制代码

// vite.config.js
base: './'

博文参考

https://ant.design/docs/spec/visual-cn