react实现商城建站
技术选型与初始化
使用 create-react-app 快速初始化项目，搭配 TypeScript 提升代码健壮性。核心依赖包括：
- React Router：管理路由（如商品详情、购物车页）。
- Redux Toolkit：集中管理全局状态（如用户登录、购物车数据）。
- Ant Design 或 Material-UI：快速搭建UI组件（如商品卡片、导航栏）。
安装命令示例：
npx create-react-app mall --template typescript
npm install @reduxjs/toolkit react-router-dom antd页面结构与路由配置
划分基础页面模块，通过 React Router 实现动态路由：
- 首页：展示商品分类与促销活动。
- 商品详情页：通过
useParams获取商品ID并加载数据。 - 购物车页：显示已选商品，支持增减数量。
路由配置示例：
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<HomePage />} />
<Route path="/product/:id" element={<ProductDetail />} />
<Route path="/cart" element={<CartPage />} />
</Routes>
</BrowserRouter>
);
}状态管理设计
使用 Redux Toolkit 管理购物车和用户状态：
- 购物车切片：存储商品列表、总价计算。
- 用户切片：处理登录状态、用户信息。
购物车切片示例：
import { createSlice } from '@reduxjs/toolkit';
const cartSlice = createSlice({
name: 'cart',
initialState: { items: [] },
reducers: {
addItem: (state, action) => {
state.items.push(action.payload);
},
removeItem: (state, action) => {
state.items = state.items.filter(item => item.id !== action.payload);
}
}
});
export const { addItem, removeItem } = cartSlice.actions;
export default cartSlice.reducer;商品展示与交互
通过 Ant Design 组件快速实现商品列表和详情页：
- 商品卡片：使用
Card组件展示图片、价格和“加入购物车”按钮。 - 分页加载：结合
useEffect和分页API实现数据懒加载。
商品卡片示例：
import { Card, Button } from 'antd';
function ProductCard({ product }) {
const dispatch = useDispatch();
return (
<Card cover={<img src={product.image} />}>
<h3>{product.name}</h3>
<p>¥{product.price}</p>
<Button onClick={() => dispatch(addItem(product))}>加入购物车</Button>
</Card>
);
}数据请求与后端对接
使用 axios 或 fetch 与后端API交互：
- 商品列表接口：
GET /api/products返回分页数据。 - 购物车操作接口：
POST /api/cart提交商品变更。
API请求示例：
async function fetchProducts(page = 1) {
const response = await axios.get(`/api/products?page=${page}`);
return response.data;
}部署与优化
- 静态资源托管：使用
Vercel或Netlify部署React应用。 - 性能优化：通过
React.memo避免不必要的渲染，lazy+Suspense实现代码分割。
代码分割示例：
const CartPage = React.lazy(() => import('./CartPage'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<CartPage />
</Suspense>
);
}
