摘要本文档介绍了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 pathuser element{User /} / /RouteLayout 里写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 中VueReactrouter.push()navigate()router-linkLinkrouter-viewOutlet本质一样都是 URL → 组件映射2. PubSub 组件PubSub 发布订阅模式Publish / Subscribe核心思想一个地方“发布消息”多个地方“订阅接收”生活类比广播站发布 → 听众订阅2.1. 为什么需要 PubSub在 React 中组件通信默认是父 → 子props问题兄弟组件 / 跨层级组件 很难通信解决用 PubSub 实现“任意组件通信”2.2. 基础语法以 pubsub-js 为例常用库pubsub-js2.2.1. 1️⃣ 安装npm install pubsub-js2.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 propsprops方向父 → 子层级受限灵活性低2.7. PubSub vs useContextuseContext类型状态共享是否实时是适合全局数据2.8. PubSub vs PubSubPubSub类型事件通信是否持久❌特点解耦关键区别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 修改 state3.1.5. 5️⃣ Dispatch派发触发更新3.2. Redux基础语法完整示例用官方推荐Redux Toolkit更简单3.2.1. 1️⃣ 安装npm install reduxjs/toolkit react-redux3.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 / /Provider3.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 useStateuseState作用范围单组件共享能力❌复杂度简单3.7.2. 2️⃣ Redux vs useContextuseContext能力共享数据缺点不适合复杂逻辑3.7.3. 3️⃣ Redux vs PubSubPubSub类型事件状态❌ 不保存3.7.4. 4️⃣ Redux vs Vue你熟悉在 Vue.js 中Redux ≈ Vuex / Pinia3.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 typeprimary提交/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 antd4.3.2. 2️⃣ 引入样式重要import antd/dist/reset.css;4.3.3. 3️⃣ 使用组件示例按钮import { Button } from antd; function App() { return Button typeprimary提交/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 vitelatest my-react-app选择React → TypeScript建议选5.1.2. 2️⃣ 安装依赖cd my-react-app npm install5.1.3. 3️⃣ 启动项目npm run dev打开浏览器http://localhost:51735.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. Vitenpm run dev5.3.2. CRAnpm start特点热更新修改自动刷新本地开发5.4. React打包生产环境最关键5.4.1. Vitenpm run build输出dist/5.4.2. CRAnpm run build输出build/本质把 React 代码 → 静态文件HTML JS CSS5.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推荐NetlifyGitHub Pages一键部署npm run build上传 dist 即可5.5.3. 方式三Docker企业常用FROM nginx:alpine COPY dist/ /usr/share/nginx/html5.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
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 pathuser element{User /} / /RouteLayout 里写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 中VueReactrouter.push()navigate()router-linkLinkrouter-viewOutlet本质一样都是 URL → 组件映射2. PubSub 组件PubSub 发布订阅模式Publish / Subscribe核心思想一个地方“发布消息”多个地方“订阅接收”生活类比广播站发布 → 听众订阅2.1. 为什么需要 PubSub在 React 中组件通信默认是父 → 子props问题兄弟组件 / 跨层级组件 很难通信解决用 PubSub 实现“任意组件通信”2.2. 基础语法以 pubsub-js 为例常用库pubsub-js2.2.1. 1️⃣ 安装npm install pubsub-js2.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 propsprops方向父 → 子层级受限灵活性低2.7. PubSub vs useContextuseContext类型状态共享是否实时是适合全局数据2.8. PubSub vs PubSubPubSub类型事件通信是否持久❌特点解耦关键区别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 修改 state3.1.5. 5️⃣ Dispatch派发触发更新3.2. Redux基础语法完整示例用官方推荐Redux Toolkit更简单3.2.1. 1️⃣ 安装npm install reduxjs/toolkit react-redux3.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 / /Provider3.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 useStateuseState作用范围单组件共享能力❌复杂度简单3.7.2. 2️⃣ Redux vs useContextuseContext能力共享数据缺点不适合复杂逻辑3.7.3. 3️⃣ Redux vs PubSubPubSub类型事件状态❌ 不保存3.7.4. 4️⃣ Redux vs Vue你熟悉在 Vue.js 中Redux ≈ Vuex / Pinia3.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 typeprimary提交/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 antd4.3.2. 2️⃣ 引入样式重要import antd/dist/reset.css;4.3.3. 3️⃣ 使用组件示例按钮import { Button } from antd; function App() { return Button typeprimary提交/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 vitelatest my-react-app选择React → TypeScript建议选5.1.2. 2️⃣ 安装依赖cd my-react-app npm install5.1.3. 3️⃣ 启动项目npm run dev打开浏览器http://localhost:51735.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. Vitenpm run dev5.3.2. CRAnpm start特点热更新修改自动刷新本地开发5.4. React打包生产环境最关键5.4.1. Vitenpm run build输出dist/5.4.2. CRAnpm run build输出build/本质把 React 代码 → 静态文件HTML JS CSS5.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推荐NetlifyGitHub Pages一键部署npm run build上传 dist 即可5.5.3. 方式三Docker企业常用FROM nginx:alpine COPY dist/ /usr/share/nginx/html5.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
![高效使用CDS API的5个核心技巧与实战指南 [特殊字符]](images/news2.jpg)
