React移动端UI组件库MUI实战指南：从入门到精通解决移动端开发难题

引言：为什么选择MUI作为移动端开发利器

在当今移动优先的互联网时代，选择一个优秀的React移动端UI组件库对于开发效率和用户体验至关重要。MUI（前身为Material-UI）作为React生态中最受欢迎的UI组件库之一，凭借其丰富的组件、灵活的定制能力和优秀的移动端适配，成为了众多开发者的首选。

MUI在移动端开发中的核心优势

MUI不仅提供了完整的Material Design组件体系，还针对移动端做了深度优化。它支持触摸手势、响应式布局、触摸友好的交互模式，并且拥有庞大的社区支持。相比其他移动端UI库，MUI在组件丰富度、文档完善度和生态成熟度上都具有明显优势。

第一部分：MUI基础入门

1.1 环境搭建与安装

首先，我们需要创建一个React项目并安装MUI相关依赖。推荐使用Vite作为构建工具，因为它比Create React App更快。

# 创建React项目 npm create vite@latest my-mobile-app -- --template react # 进入项目目录 cd my-mobile-app # 安装MUI核心库 npm install @mui/material @emotion/react @emotion/styled # 安装MUI图标库（可选但推荐） npm install @mui/icons-material # 安装MUI X日期选择器（高级功能） npm install @mui/x-date-pickers

1.2 基础主题配置

MUI的强大之处在于其主题系统，我们可以通过主题配置来统一移动端的视觉风格。

// src/theme.js import { createTheme } from '@mui/material/styles'; const theme = createTheme({ palette: { mode: 'light', primary: { main: '#1976d2', contrastText: '#fff', }, secondary: { main: '#dc004e', }, background: { default: '#f5f5f5', paper: '#ffffff', }, }, typography: { fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', h1: { fontSize: '2rem', fontWeight: 500, }, body1: { fontSize: '1rem', lineHeight: 1.5, }, }, components: { MuiButton: { styleOverrides: { root: { textTransform: 'none', borderRadius: 8, padding: '12px 24px', fontSize: '1rem', }, contained: { boxShadow: 'none', '&:hover': { boxShadow: '0px 2px 4px rgba(0,0,0,0.2)', }, }, }, }, MuiTextField: { styleOverrides: { root: { '& .MuiOutlinedInput-root': { borderRadius: 8, }, }, }, }, }, }); export default theme;

1.3 移动端基础布局组件

移动端布局需要考虑屏幕尺寸、触摸交互和性能优化。MUI提供了Grid、Box等布局组件，结合CSS Grid可以实现复杂的移动端布局。

// src/components/MobileLayout.js import React from 'react'; import { Box, Container, Grid, Paper } from '@mui/material'; const MobileLayout = ({ children }) => { return ( <Box sx={{ minHeight: '100vh', backgroundColor: '#f5f5f5', display: 'flex', flexDirection: 'column', }} > {/* 顶部导航栏 */} <Box sx={{ position: 'sticky', top: 0, zIndex: 100, backgroundColor: 'white', borderBottom: '1px solid #e0e0e0', padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', }} > <Box sx={{ fontWeight: 500, fontSize: '1.1rem' }}>My App</Box> </Box> {/* 主内容区域 */} <Container maxWidth="sm" sx={{ flex: 1, padding: '16px', overflowY: 'auto', WebkitOverflowScrolling: 'touch', // iOS平滑滚动 }} > {children} </Container> {/* 底部导航栏 */} <Box sx={{ position: 'sticky', bottom: 0, backgroundColor: 'white', borderTop: '1px solid #e0e0e0', padding: '8px 0', display: 'flex', justifyContent: 'space-around', }} > {['首页', '分类', '购物车', '我的'].map((item, index) => ( <Box key={index} sx={{ flex: 1, textAlign: 'center', padding: '8px', fontSize: '0.875rem', color: '#666', '&:active': { backgroundColor: '#f0f0f0', }, }} > {item} </Box> ))} </Box> </Box> ); }; export default MobileLayout;

第二部分：核心组件实战应用

2.1 移动端表单组件深度优化

移动端表单是用户体验的关键，我们需要特别关注输入框的触摸友好性和键盘行为。

// src/components/MobileForm.js import React, { useState } from 'react'; import { Box, TextField, Button, FormControl, InputLabel, Select, MenuItem, Checkbox, FormControlLabel, Snackbar, Alert, } from '@mui/material'; const MobileForm = () => { const [formData, setFormData] = useState({ username: '', email: '', gender: '', agreeTerms: false, }); const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: 'success' }); const handleChange = (e) => { const { name, value, type, checked } = e.target; setFormData(prev => ({ ...prev, [name]: type === 'checkbox' ? checked : value, })); }; const handleSubmit = (e) => { e.preventDefault(); // 表单验证 if (!formData.username || !formData.email || !formData.gender) { setSnackbar({ open: true, message: '请填写所有必填字段', severity: 'error', }); return; } if (!formData.agreeTerms) { setSnackbar({ open: true, message: '请同意服务条款', severity: 'warning', }); return; } // 模拟提交 console.log('表单数据:', formData); setSnackbar({ open: true, message: '提交成功！', severity: 'success', }); }; return ( <Box component="form" onSubmit={handleSubmit} sx={{ display: 'flex', flexDirection: 'column', gap: '16px', padding: '16px', backgroundColor: 'white', borderRadius: '12px', boxShadow: '0 2px 8px rgba(0,0,0,0.1)', }} > {/* 文本输入框 */} <TextField name="username" label="用户名" variant="outlined" value={formData.username} onChange={handleChange} fullWidth required inputProps={{ maxLength: 20 }} sx={{ '& .MuiInputBase-root': { fontSize: '16px', // 防止iOS缩放 }, }} /> {/* 邮箱输入框 */} <TextField name="email" label="邮箱" type="email" variant="outlined" value={formData.email} onChange={handleChange} fullWidth required inputProps={{ inputMode: 'email' }} /> {/* 下拉选择框 */} <FormControl fullWidth required> <InputLabel>性别</InputLabel> <Select name="gender" value={formData.gender} onChange={handleChange} label="性别" MenuProps={{ PaperProps: { sx: { maxHeight: '200px', // 限制下拉菜单高度 }, }, }} > <MenuItem value="male">男</MenuItem> <MenuItem value="female">女</MenuItem> <MenuItem value="other">其他</MenuItem> </Select> </FormControl> {/* 复选框 */} <FormControlLabel control={ <Checkbox name="agreeTerms" checked={formData.agreeTerms} onChange={handleChange} color="primary" /> } label="我同意服务条款和隐私政策" sx={{ alignItems: 'flex-start' }} /> {/* 提交按钮 */} <Button type="submit" variant="contained" color="primary" size="large" fullWidth sx={{ marginTop: '8px', padding: '14px 24px', fontSize: '1rem', fontWeight: 500, }} > 提交 </Button> {/* Snackbar提示 */} <Snackbar open={snackbar.open} autoHideDuration={3000} onClose={() => setSnackbar(prev => ({ ...prev, open: false }))} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} > <Alert onClose={() => setSnackbar(prev => ({ ...prev, open: false }))} severity={snackbar.severity} sx={{ width: '100%' }} > {snackbar.message} </Alert> </Snackbar> </Box> ); }; export default MobileForm;

2.2 移动端列表与滚动加载

移动端列表经常需要处理大量数据，滚动加载是提升用户体验的关键技术。

// src/components/InfiniteList.js import React, { useState, useEffect, useCallback } from 'react'; import { Box, List, ListItem, ListItemText, ListItemAvatar, Avatar, Divider, CircularProgress, Typography, } from '@mui/material'; import { Favorite, Comment, Share } from '@mui/icons-material'; const InfiniteList = () => { const [items, setItems] = useState([]); const [page, setPage] = useState(1); const [loading, setLoading] = useState(false); const [hasMore, setHasMore] = useState(true); // 模拟API调用 const fetchItems = useCallback(async (pageNum) => { setLoading(true); // 模拟网络延迟 await new Promise(resolve => setTimeout(resolve, 800)); // 生成模拟数据 const newItems = Array.from({ length: 10 }, (_, i) => ({ id: (pageNum - 1) * 10 + i, title: `文章 ${(pageNum - 1) * 10 + i + 1}`, description: `这是第 ${(pageNum - 1) * 10 + i + 1} 条内容的详细描述，展示在移动端列表中的效果。`, likes: Math.floor(Math.random() * 1000), comments: Math.floor(Math.random() * 100), avatar: `https://api.dicebear.com/7.x/avataaars/svg?seed=${(pageNum - 1) * 10 + i}`, })); if (pageNum >= 5) { setHasMore(false); // 模拟数据加载完毕 } setItems(prev => [...prev, ...newItems]); setLoading(false); }, []); // 初始加载 useEffect(() => { fetchItems(1); }, [fetchItems]); // 滚动监听 useEffect(() => { const handleScroll = () => { if (!hasMore || loading) return; const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const windowHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight; // 距离底部200px时加载更多 if (documentHeight - (scrollTop + windowHeight) < 200) { const nextPage = page + 1; setPage(nextPage); fetchItems(nextPage); } }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [page, loading, hasMore, fetchItems]); return ( <Box sx={{ backgroundColor: '#f5f5f5', minHeight: '100vh' }}> <List sx={{ padding: 0 }}> {items.map((item, index) => ( <React.Fragment key={item.id}> <ListItem alignItems="flex-start" sx={{ backgroundColor: 'white', marginBottom: '8px', padding: '16px', '&:active': { backgroundColor: '#f9f9f9', }, }} > <ListItemAvatar> <Avatar src={item.avatar} alt={item.title} /> </ListItemAvatar> <ListItemText primary={ <Typography variant="subtitle1" fontWeight={500}> {item.title} </Typography> } secondary={ <Box sx={{ marginTop: '4px' }}> <Typography variant="body2" color="text.secondary" sx={{ display: '-webkit-box', WebkitLineClamp: 2, WebkitBoxOrient: 'vertical', overflow: 'hidden', }} > {item.description} </Typography> <Box sx={{ display: 'flex', gap: '16px', marginTop: '8px', fontSize: '0.875rem', color: '#666', }} > <Box sx={{ display: 'flex', alignItems: 'center', gap: '4px' }}> <Favorite fontSize="small" color="action" /> {item.likes} </Box> <Box sx={{ display: 'flex', alignItems: 'center', gap: '4px' }}> <Comment fontSize="small" color="action" /> {item.comments} </Box> <Box sx={{ display: 'flex', alignItems: 'center', gap: '4px' }}> <Share fontSize="small" color="action" /> 分享 </Box> </Box> </Box> } /> </ListItem> </React.Fragment> ))} </List> {/* 加载更多指示器 */} {loading && ( <Box sx={{ display: 'flex', justifyContent: 'center', padding: '20px' }}> <CircularProgress size={24} /> <Typography variant="body2" color="text.secondary" sx={{ marginLeft: '12px' }}> 加载中... </Typography> </Box> )} {/* 数据加载完毕提示 */} {!hasMore && items.length > 0 && ( <Box sx={{ textAlign: 'center', padding: '20px', color: '#999' }}> <Typography variant="body2">没有更多数据了</Typography> </Box> )} {/* 空状态 */} {items.length === 0 && !loading && ( <Box sx={{ textAlign: 'center', padding: '40px', color: '#999' }}> <Typography variant="body1">暂无数据</Typography> </Box> )} </Box> ); }; export default InfiniteList;

2.3 移动端对话框与交互反馈

移动端对话框需要特别注意触摸区域大小和动画性能。

// src/components/InteractiveDialog.js import React, { useState } from 'react'; import { Box, Button, Dialog, DialogTitle, DialogContent, DialogActions, TextField, Slide, useMediaQuery, useTheme, } from '@mui/material'; // 对话框动画 const Transition = React.forwardRef(function Transition(props, ref) { return <Slide direction="up" ref={ref} {...props} />; }); const InteractiveDialog = () => { const [open, setOpen] = useState(false); const [dialogType, setDialogType] = useState(''); const theme = useTheme(); const isMobile = useMediaQuery(theme.breakpoints.down('sm')); const handleClickOpen = (type) => { setDialogType(type); setOpen(true); }; const handleClose = () => { setOpen(false); }; const handleConfirm = () => { // 执行确认操作 console.log(`确认操作: ${dialogType}`); handleClose(); }; return ( <Box sx={{ padding: '16px', display: 'flex', flexDirection: 'column', gap: '12px' }}> <Button variant="contained" onClick={() => handleClickOpen('confirm')} fullWidth sx={{ padding: '12px' }} > 确认对话框 </Button> <Button variant="outlined" onClick={() => handleClickOpen('input')} fullWidth sx={{ padding: '12px' }} > 输入对话框 </Button> <Button variant="text" onClick={() => handleClickOpen('menu')} fullWidth sx={{ padding: '12px' }} > 菜单对话框 </Button> {/* 确认对话框 */} <Dialog open={open && dialogType === 'confirm'} TransitionComponent={Transition} keepMounted onClose={handleClose} fullScreen={isMobile} PaperProps={{ sx: { borderRadius: isMobile ? 0 : '12px', margin: isMobile ? 0 : '24px', }, }} > <DialogTitle>确认操作</DialogTitle> <DialogContent> 您确定要执行此操作吗？此操作将无法撤销。 </DialogContent> <DialogActions> <Button onClick={handleClose} color="secondary"> 取消 </Button> <Button onClick={handleConfirm} color="primary" variant="contained" autoFocus> 确认 </Button> </DialogActions> </Dialog> {/* 输入对话框 */} <Dialog open={open && dialogType === 'input'} TransitionComponent={Transition} onClose={handleClose} fullScreen={isMobile} PaperProps={{ sx: { borderRadius: isMobile ? 0 : '12px', }, }} > <DialogTitle>输入信息</DialogTitle> <DialogContent> <TextField autoFocus margin="dense" label="姓名" type="text" fullWidth variant="outlined" sx={{ marginTop: '8px' }} /> <TextField margin="dense" label="邮箱" type="email" fullWidth variant="outlined" /> </DialogContent> <DialogActions> <Button onClick={handleClose}>取消</Button> <Button onClick={handleConfirm} variant="contained">提交</Button> </DialogActions> </Dialog> {/* 菜单对话框 */} <Dialog open={open && dialogType === 'menu'} onClose={handleClose} fullScreen={isMobile} PaperProps={{ sx: { borderRadius: isMobile ? 0 : '12px', }, }} > <DialogTitle>选择操作</DialogTitle> <DialogContent> <Box sx={{ display: 'flex', flexDirection: 'column', gap: '8px' }}> {['编辑', '删除', '分享', '收藏'].map((item, index) => ( <Button key={index} variant="outlined" onClick={() => { console.log(`选择: ${item}`); handleClose(); }} sx={{ padding: '12px' }} > {item} </Button> ))} </Box> </DialogContent> <DialogActions> <Button onClick={handleClose} fullWidth> 关闭 </Button> </DialogActions> </Dialog> </Box> ); }; export default InteractiveDialog;

第三部分：高级主题与性能优化

3.1 移动端性能优化策略

移动端性能优化是开发中的重中之重，我们需要从多个维度进行优化。

// src/utils/performance.js // 性能监控工具 export const performanceMonitor = { // 测量组件渲染时间 measureRender: (componentName, startTime) => { const endTime = performance.now(); const duration = endTime - startTime; if (duration > 16.67) { // 超过一帧时间 console.warn(`${componentName} 渲染耗时: ${duration.toFixed(2)}ms`); } return duration; }, // 内存使用监控 monitorMemory: () => { if (performance.memory) { const memory = performance.memory; const usedMB = memory.usedJSHeapSize / 1048576; const totalMB = memory.totalJSHeapSize / 1048576; console.log(`内存使用: ${usedMB.toFixed(2)}MB / ${totalMB.toFixed(2)}MB`); } }, // 防抖函数 debounce: (func, wait) => { let timeout; return function executedFunction(...args) { const later = () => { clearTimeout(timeout); func(...args); }; clearTimeout(timeout); timeout = setTimeout(later, wait); }; }, // 节流函数 throttle: (func, limit) => { let inThrottle; return function(...args) { if (!inThrottle) { func.apply(this, args); inThrottle = true; setTimeout(() => inThrottle = false, limit); } }; }, }; // 优化后的列表组件 import React, { memo, useMemo, useCallback } from 'react'; import { Box, Typography } from '@mui/material'; // 使用memo避免不必要的重渲染 const OptimizedListItem = memo(({ item, onClick }) => { const handleClick = useCallback(() => { onClick(item.id); }, [item.id, onClick]); return ( <Box onClick={handleClick} sx={{ padding: '16px', backgroundColor: 'white', marginBottom: '8px', borderRadius: '8px', transition: 'background-color 0.2s', '&:active': { backgroundColor: '#f0f0f0', }, }} > <Typography variant="subtitle1" fontWeight={500}> {item.title} </Typography> <Typography variant="body2" color="text.secondary" sx={{ marginTop: '4px' }}> {item.description} </Typography> </Box> ); }); // 虚拟滚动组件（适用于超长列表） import { FixedSizeList as List } from 'react-window'; export const VirtualList = ({ items, height = 400 }) => { const Row = ({ index, style }) => { const item = items[index]; return ( <div style={style}> <OptimizedListItem item={item} onClick={(id) => console.log('Clicked:', id)} /> </div> ); }; return ( <List height={height} itemCount={items.length} itemSize={80} // 每个列表项的高度 width="100%" > {Row} </List> ); };

3.2 响应式主题与暗黑模式

移动端用户经常在不同光线环境下使用，暗黑模式是提升用户体验的重要功能。

// src/theme/responsiveTheme.js import { createTheme, responsiveFontSizes } from '@mui/material/styles'; // 基础主题配置 const baseTheme = createTheme({ palette: { mode: 'light', primary: { main: '#1976d2', light: '#42a5f5', dark: '#1565c0', contrastText: '#fff', }, secondary: { main: '#dc004e', light: '#ff5983', dark: '#9a0036', contrastText: '#fff', }, background: { default: '#f5f5f5', paper: '#ffffff', }, text: { primary: '#1c1e21', secondary: '#606770', }, }, typography: { fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', h1: { fontSize: '2rem', fontWeight: 500, lineHeight: 1.2 }, h2: { fontSize: '1.75rem', fontWeight: 500, lineHeight: 1.3 }, h3: { fontSize: '1.5rem', fontWeight: 500, lineHeight: 1.4 }, body1: { fontSize: '1rem', lineHeight: 1.5 }, body2: { fontSize: '0.875rem', lineHeight: 1.5 }, button: { textTransform: 'none', fontWeight: 500 }, }, shape: { borderRadius: 8, }, components: { MuiButton: { styleOverrides: { root: { borderRadius: 8, padding: '10px 20px', fontSize: '1rem', minHeight: '44px', // 触摸区域最小高度 transition: 'all 0.2s ease', }, contained: { boxShadow: 'none', '&:hover': { boxShadow: '0px 2px 4px rgba(0,0,0,0.2)', transform: 'translateY(-1px)', }, '&:active': { transform: 'translateY(0)', }, }, }, }, MuiTextField: { styleOverrides: { root: { '& .MuiOutlinedInput-root': { borderRadius: 8, fontSize: '16px', // 防止iOS缩放 minHeight: '44px', }, '& .MuiInputLabel-root': { fontSize: '0.875rem', }, }, }, }, MuiDialog: { styleOverrides: { paper: { borderRadius: '12px', margin: '16px', maxHeight: '90vh', }, }, }, MuiBottomNavigation: { styleOverrides: { root: { minHeight: '56px', boxShadow: '0 -2px 4px rgba(0,0,0,0.1)', }, }, }, }, }); // 暗黑模式主题 const darkTheme = createTheme({ ...baseTheme, palette: { ...baseTheme.palette, mode: 'dark', background: { default: '#121212', paper: '#1e1e1e', }, text: { primary: '#e4e6eb', secondary: '#b0b3b8', }, }, }); // 响应式字体大小 export const theme = responsiveFontSizes(baseTheme); export const darkThemeResponsive = responsiveFontSizes(darkTheme); // 主题切换组件 import React, { useState, useEffect, createContext, useContext } from 'react'; import { ThemeProvider, CssBaseline } from '@mui/material'; const ThemeContext = createContext(); export const useThemeToggle = () => { const context = useContext(ThemeContext); if (!context) { throw new Error('useThemeToggle must be used within ThemeProvider'); } return context; }; export const MobileThemeProvider = ({ children }) => { const [mode, setMode] = useState(() => { // 从localStorage读取主题设置 const saved = localStorage.getItem('themeMode'); return saved || 'light'; }); useEffect(() => { localStorage.setItem('themeMode', mode); // 更新meta标签以匹配主题 const metaThemeColor = document.querySelector('meta[name="theme-color"]'); if (metaThemeColor) { metaThemeColor.content = mode === 'dark' ? '#121212' : '#f5f5f5'; } }, [mode]); const toggleTheme = () => { setMode(prev => prev === 'light' ? 'dark' : 'light'); }; const theme = mode === 'dark' ? darkThemeResponsive : theme; return ( <ThemeContext.Provider value={{ mode, toggleTheme }}> <ThemeProvider theme={theme}> <CssBaseline /> {children} </ThemeProvider> </ThemeContext.Provider> ); };

3.3 移动端手势与触摸事件处理

移动端开发中，触摸事件的处理直接影响用户体验。

// src/hooks/useTouchEvents.js import { useState, useRef, useEffect, useCallback } from 'react'; // 自定义手势识别钩子 export const useSwipe = (onSwipeLeft, onSwipeRight, threshold = 50) => { const [touchStart, setTouchStart] = useState(null); const [touchEnd, setTouchEnd] = useState(null); const onTouchStart = useCallback((e) => { setTouchStart(e.targetTouches[0].clientX); }, []); const onTouchMove = useCallback((e) => { setTouchEnd(e.targetTouches[0].clientX); }, []); const onTouchEnd = useCallback(() => { if (!touchStart || !touchEnd) return; const distance = touchStart - touchEnd; const isLeftSwipe = distance > threshold; const isRightSwipe = distance < -threshold; if (isLeftSwipe && onSwipeLeft) { onSwipeLeft(); } else if (isRightSwipe && onSwipeRight) { onSwipeRight(); } setTouchStart(null); setTouchEnd(null); }, [touchStart, touchEnd, threshold, onSwipeLeft, onSwipeRight]); return { onTouchStart, onTouchMove, onTouchEnd, }; }; // 长按事件钩子 export const useLongPress = (callback, duration = 500) => { const timerRef = useRef(null); const isPressedRef = useRef(false); const startTimer = useCallback(() => { timerRef.current = setTimeout(() => { if (isPressedRef.current) { callback(); } }, duration); }, [callback, duration]); const clearTimer = useCallback(() => { if (timerRef.current) { clearTimeout(timerRef.current); timerRef.current = null; } }, []); const onMouseDown = useCallback(() => { isPressedRef.current = true; startTimer(); }, [startTimer]); const onMouseUp = useCallback(() => { isPressedRef.current = false; clearTimer(); }, [clearTimer]); const onMouseLeave = useCallback(() => { isPressedRef.current = false; clearTimer(); }, [clearTimer]); const onTouchStart = useCallback((e) => { e.preventDefault(); // 防止默认行为 isPressedRef.current = true; startTimer(); }, [startTimer]); const onTouchEnd = useCallback(() => { isPressedRef.current = false; clearTimer(); }, [clearTimer]); const onTouchCancel = useCallback(() => { isPressedRef.current = false; clearTimer(); }, [clearTimer]); useEffect(() => { return () => { clearTimer(); }; }, [clearTimer]); return { onMouseDown, onMouseUp, onMouseLeave, onTouchStart, onTouchEnd, onTouchCancel, }; }; // 使用示例：可滑动卡片组件 import { Box, Typography, IconButton } from '@mui/material'; import { Delete, Edit, Info } from '@mui/icons-material'; export const SwipeableCard = ({ item, onEdit, onDelete, onInfo }) => { const [isRevealed, setIsRevealed] = useState(false); const handleSwipeLeft = useCallback(() => { setIsRevealed(true); }, []); const handleSwipeRight = useCallback(() => { setIsRevealed(false); }, []); const touchHandlers = useSwipe(handleSwipeLeft, handleSwipeRight, 80); const longPressHandlers = useLongPress(() => { console.log('长按触发:', item.id); onInfo?.(item); }, 600); return ( <Box sx={{ position: 'relative', overflow: 'hidden', borderRadius: '12px', marginBottom: '12px', backgroundColor: 'white', }} > {/* 隐藏的操作按钮 */} <Box sx={{ position: 'absolute', right: 0, top: 0, bottom: 0, width: '160px', display: 'flex', alignItems: 'center', justifyContent: 'space-around', backgroundColor: '#f44336', transform: isRevealed ? 'translateX(0)' : 'translateX(100%)', transition: 'transform 0.3s ease', zIndex: 1, }} > <IconButton onClick={() => onDelete(item.id)} sx={{ color: 'white' }}> <Delete /> </IconButton> <IconButton onClick={() => onEdit(item.id)} sx={{ color: 'white' }}> <Edit /> </IconButton> </Box> {/* 主内容 */} <Box sx={{ padding: '16px', backgroundColor: 'white', transform: isRevealed ? 'translateX(-160px)' : 'translateX(0)', transition: 'transform 0.3s ease', position: 'relative', zIndex: 2, cursor: 'grab', '&:active': { cursor: 'grabbing', }, }} {...touchHandlers} {...longPressHandlers} > <Typography variant="subtitle1" fontWeight={500}> {item.title} </Typography> <Typography variant="body2" color="text.secondary" sx={{ marginTop: '4px' }}> {item.description} </Typography> <Typography variant="caption" color="text.disabled" sx={{ marginTop: '8px', display: 'block' }}> 长按查看详情，左滑显示操作 </Typography> </Box> </Box> ); };

第四部分：实战项目：构建完整的移动端应用

4.1 项目结构与路由配置

让我们构建一个完整的移动端应用，包含商品列表、购物车和个人中心。

# 安装路由依赖 npm install react-router-dom

// src/App.js import React from 'react'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; import { MobileThemeProvider } from './theme/responsiveTheme'; import MobileLayout from './components/MobileLayout'; import ProductList from './pages/ProductList'; import ShoppingCart from './pages/ShoppingCart'; import Profile from './pages/Profile'; import ProductDetail from './pages/ProductDetail'; function App() { return ( <MobileThemeProvider> <Router> <Routes> <Route path="/" element={<MobileLayout><ProductList /></MobileLayout>} /> <Route path="/product/:id" element={<MobileLayout><ProductDetail /></MobileLayout>} /> <Route path="/cart" element={<MobileLayout><ShoppingCart /></MobileLayout>} /> <Route path="/profile" element={<MobileLayout><Profile /></MobileLayout>} /> </Routes> </Router> </MobileThemeProvider> ); } export default App;

4.2 商品列表页面

// src/pages/ProductList.js import React, { useState, useEffect, useCallback } from 'react'; import { Box, Grid, Card, CardMedia, CardContent, Typography, Button, Badge, IconButton, Snackbar, Alert, } from '@mui/material'; import { AddShoppingCart, Favorite, FavoriteBorder } from '@mui/icons-material'; import { useNavigate } from 'react-router-dom'; // 模拟商品数据 const generateProducts = (page, size = 10) => { return Array.from({ length: size }, (_, i) => { const id = (page - 1) * size + i + 1; return { id, name: `高端商品 ${id}`, description: `这是第 ${id} 号商品的详细描述，采用优质材料制作，品质保证。`, price: (99 + Math.random() * 900).toFixed(2), image: `https://picsum.photos/300/200?random=${id}`, liked: Math.random() > 0.7, }; }); }; const ProductList = () => { const [products, setProducts] = useState([]); const [page, setPage] = useState(1); const [loading, setLoading] = useState(false); const [cart, setCart] = useState([]); const [snackbar, setSnackbar] = useState({ open: false, message: '' }); const navigate = useNavigate(); // 加载商品 const loadProducts = useCallback(async (pageNum) => { setLoading(true); await new Promise(resolve => setTimeout(resolve, 600)); const newProducts = generateProducts(pageNum); setProducts(prev => [...prev, ...newProducts]); setLoading(false); }, []); useEffect(() => { loadProducts(1); }, [loadProducts]); // 滚动加载更多 useEffect(() => { const handleScroll = () => { if (loading) return; const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const windowHeight = window.innerHeight; const documentHeight = document.documentElement.scrollHeight; if (documentHeight - (scrollTop + windowHeight) < 200) { const nextPage = page + 1; setPage(nextPage); loadProducts(nextPage); } }; window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, [page, loading, loadProducts]); // 添加到购物车 const addToCart = useCallback((product) => { setCart(prev => { const existing = prev.find(item => item.id === product.id); if (existing) { return prev.map(item => item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item ); } return [...prev, { ...product, quantity: 1 }]; }); setSnackbar({ open: true, message: `${product.name} 已添加到购物车` }); }, []); // 切换收藏 const toggleFavorite = useCallback((productId) => { setProducts(prev => prev.map(product => product.id === productId ? { ...product, liked: !product.liked } : product ) ); }, []); return ( <Box sx={{ padding: '8px' }}> {/* 商品网格 */} <Grid container spacing={1.5}> {products.map((product) => ( <Grid item xs={6} key={product.id}> <Card sx={{ borderRadius: '12px', overflow: 'hidden', boxShadow: '0 2px 4px rgba(0,0,0,0.1)', '&:active': { transform: 'scale(0.98)', }, }} > <Box sx={{ position: 'relative' }}> <CardMedia component="img" height="120" image={product.image} alt={product.name} sx={{ cursor: 'pointer' }} onClick={() => navigate(`/product/${product.id}`)} /> <IconButton sx={{ position: 'absolute', top: 4, right: 4, backgroundColor: 'rgba(255,255,255,0.9)', padding: '6px', }} onClick={() => toggleFavorite(product.id)} > {product.liked ? ( <Favorite fontSize="small" color="error" /> ) : ( <FavoriteBorder fontSize="small" color="action" /> )} </IconButton> </Box> <CardContent sx={{ padding: '8px' }}> <Typography variant="subtitle2" sx={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', marginBottom: '4px', }} > {product.name} </Typography> <Typography variant="body2" color="text.secondary" sx={{ marginBottom: '8px' }}> ¥{product.price} </Typography> <Button variant="contained" size="small" fullWidth startIcon={<AddShoppingCart fontSize="small" />} onClick={() => addToCart(product)} sx={{ minHeight: '32px', fontSize: '0.75rem' }} > 加入购物车 </Button> </CardContent> </Card> </Grid> ))} </Grid> {/* 加载指示器 */} {loading && ( <Box sx={{ textAlign: 'center', padding: '16px', color: '#999' }}> <Typography variant="body2">加载更多商品...</Typography> </Box> )} {/* Snackbar提示 */} <Snackbar open={snackbar.open} autoHideDuration={2000} onClose={() => setSnackbar(prev => ({ ...prev, open: false }))} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} > <Alert onClose={() => setSnackbar(prev => ({ ...prev, open: false }))} severity="success"> {snackbar.message} </Alert> </Snackbar> </Box> ); }; export default ProductList;

4.3 购物车页面

// src/pages/ShoppingCart.js import React, { useState, useMemo } from 'react'; import { Box, Typography, Card, CardContent, IconButton, Button, Divider, Checkbox, FormControlLabel, Snackbar, Alert, } from '@mui/material'; import { Add, Remove, Delete } from '@mui/icons-material'; // 模拟购物车数据 const initialCart = [ { id: 1, name: '高端商品 1', price: 199.00, quantity: 2, image: 'https://picsum.photos/80/80?random=1' }, { id: 2, name: '高端商品 2', price: 299.00, quantity: 1, image: 'https://picsum.photos/80/80?random=2' }, { id: 3, name: '高端商品 3', price: 399.00, quantity: 3, image: 'https://picsum.photos/80/80?random=3' }, ]; const ShoppingCart = () => { const [cart, setCart] = useState(initialCart); const [selectedItems, setSelectedItems] = useState(new Set()); const [snackbar, setSnackbar] = useState({ open: false, message: '', severity: 'success' }); // 计算总价 const totalPrice = useMemo(() => { return cart .filter(item => selectedItems.has(item.id)) .reduce((sum, item) => sum + item.price * item.quantity, 0) .toFixed(2); }, [cart, selectedItems]); // 计算总数量 const totalQuantity = useMemo(() => { return cart .filter(item => selectedItems.has(item.id)) .reduce((sum, item) => sum + item.quantity, 0); }, [cart, selectedItems]); // 修改数量 const updateQuantity = (id, delta) => { setCart(prev => prev.map(item => { if (item.id === id) { const newQuantity = Math.max(1, item.quantity + delta); return { ...item, quantity: newQuantity }; } return item; }) ); }; // 删除商品 const removeItem = (id) => { setCart(prev => prev.filter(item => item.id !== id)); setSelectedItems(prev => { const newSet = new Set(prev); newSet.delete(id); return newSet; }); setSnackbar({ open: true, message: '商品已删除', severity: 'info' }); }; // 选择/取消选择 const toggleSelect = (id) => { setSelectedItems(prev => { const newSet = new Set(prev); if (newSet.has(id)) { newSet.delete(id); } else { newSet.add(id); } return newSet; }); }; // 全选/取消全选 const toggleSelectAll = () => { if (selectedItems.size === cart.length) { setSelectedItems(new Set()); } else { setSelectedItems(new Set(cart.map(item => item.id))); } }; // 结算 const handleCheckout = () => { if (selectedItems.size === 0) { setSnackbar({ open: true, message: '请先选择商品', severity: 'warning' }); return; } setSnackbar({ open: true, message: `结算成功！总价: ¥${totalPrice}`, severity: 'success' }); }; return ( <Box sx={{ padding: '8px', paddingBottom: '80px' }}> {/* 购物车列表 */} {cart.map((item) => ( <Card key={item.id} sx={{ marginBottom: '8px', borderRadius: '12px' }}> <CardContent sx={{ padding: '12px', display: 'flex', gap: '12px', alignItems: 'center' }}> <FormControlLabel control={ <Checkbox checked={selectedItems.has(item.id)} onChange={() => toggleSelect(item.id)} color="primary" /> } label="" sx={{ margin: 0 }} /> <img src={item.image} alt={item.name} style={{ width: 60, height: 60, borderRadius: 8 }} /> <Box sx={{ flex: 1, minWidth: 0 }}> <Typography variant="subtitle2" noWrap> {item.name} </Typography> <Typography variant="body2" color="primary" fontWeight={500}> ¥{item.price.toFixed(2)} </Typography> </Box> <Box sx={{ display: 'flex', alignItems: 'center', gap: '4px' }}> <IconButton size="small" onClick={() => updateQuantity(item.id, -1)} sx={{ padding: '4px' }} > <Remove fontSize="small" /> </IconButton> <Typography variant="body2" sx={{ minWidth: '20px', textAlign: 'center' }}> {item.quantity} </Typography> <IconButton size="small" onClick={() => updateQuantity(item.id, 1)} sx={{ padding: '4px' }} > <Add fontSize="small" /> </IconButton> </Box> <IconButton size="small" onClick={() => removeItem(item.id)} color="error"> <Delete fontSize="small" /> </IconButton> </CardContent> </Card> ))} {/* 底部结算栏 */} <Box sx={{ position: 'fixed', bottom: 56, // 底部导航栏高度 left: 0, right: 0, backgroundColor: 'white', borderTop: '1px solid #e0e0e0', padding: '12px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', zIndex: 100, }} > <FormControlLabel control={ <Checkbox checked={selectedItems.size === cart.length && cart.length > 0} indeterminate={selectedItems.size > 0 && selectedItems.size < cart.length} onChange={toggleSelectAll} color="primary" /> } label={ <Typography variant="body2"> 全选 ({totalQuantity}) </Typography> } sx={{ margin: 0 }} /> <Box sx={{ display: 'flex', alignItems: 'center', gap: '12px' }}> <Typography variant="subtitle1" fontWeight={500} color="primary"> ¥{totalPrice} </Typography> <Button variant="contained" color="primary" onClick={handleCheckout} sx={{ padding: '8px 24px', minHeight: '40px' }} > 结算 </Button> </Box> </Box> {/* Snackbar提示 */} <Snackbar open={snackbar.open} autoHideDuration={2000} onClose={() => setSnackbar(prev => ({ ...prev, open: false }))} anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} > <Alert onClose={() => setSnackbar(prev => ({ ...prev, open: false }))} severity={snackbar.severity} sx={{ width: '100%' }} > {snackbar.message} </Alert> </Snackbar> </Box> ); }; export default ShoppingCart;

4.4 个人中心页面

// src/pages/Profile.js import React, { useState } from 'react'; import { Box, Avatar, Typography, List, ListItem, ListItemIcon, ListItemText, ListItemButton, Divider, Switch, Button, Dialog, DialogTitle, DialogContent, DialogActions, TextField, } from '@mui/material'; import { Settings, History, Favorite, Help, Logout, ArrowForwardIos, Edit, } from '@mui/icons-material'; import { useThemeToggle } from '../theme/responsiveTheme'; const Profile = () => { const { mode, toggleTheme } = useThemeToggle(); const [openDialog, setOpenDialog] = useState(false); const [userData, setUserData] = useState({ name: '张三', email: 'zhangsan@example.com', phone: '13800138000', }); const menuItems = [ { text: '订单历史', icon: <History />, action: () => console.log('订单历史') }, { text: '我的收藏', icon: <Favorite />, action: () => console.log('我的收藏') }, { text: '帮助中心', icon: <Help />, action: () => console.log('帮助中心') }, { text: '设置', icon: <Settings />, action: () => console.log('设置') }, ]; const handleEditProfile = () => { setOpenDialog(true); }; const handleSaveProfile = () => { console.log('保存用户信息:', userData); setOpenDialog(false); }; const handleLogout = () => { console.log('用户退出登录'); }; return ( <Box sx={{ padding: '8px' }}> {/* 用户信息卡片 */} <Card> <Box sx={{ padding: '20px', display: 'flex', alignItems: 'center', gap: '16px', backgroundColor: 'primary.main', color: 'white', borderRadius: '12px 12px 0 0', }} > <Avatar sx={{ width: 60, height: 60, bgcolor: 'white', color: 'primary.main', fontSize: '1.5rem', fontWeight: 500 }} > {userData.name.charAt(0)} </Avatar> <Box sx={{ flex: 1 }}> <Typography variant="h6" fontWeight={500}> {userData.name} </Typography> <Typography variant="body2" sx={{ opacity: 0.9 }}> {userData.email} </Typography> </Box> <Button variant="outlined" size="small" onClick={handleEditProfile} sx={{ borderColor: 'white', color: 'white', '&:hover': { borderColor: 'white', backgroundColor: 'rgba(255,255,255,0.1)' }, }} startIcon={<Edit fontSize="small" />} > 编辑 </Button> </Box> </Card> {/* 功能菜单 */} <List sx={{ marginTop: '8px', borderRadius: '12px', overflow: 'hidden', backgroundColor: 'white' }}> {menuItems.map((item, index) => ( <React.Fragment key={item.text}> <ListItem disablePadding> <ListItemButton onClick={item.action} sx={{ padding: '12px 16px' }}> <ListItemIcon sx={{ minWidth: 40, color: 'primary.main' }}> {item.icon} </ListItemIcon> <ListItemText primary={item.text} primaryTypographyProps={{ fontWeight: 500 }} /> <ArrowForwardIos fontSize="small" sx={{ color: 'text.disabled' }} /> </ListItemButton> </ListItem> {index < menuItems.length - 1 && <Divider component="li" />} </React.Fragment> ))} </List> {/* 设置选项 */} <Box sx={{ marginTop: '8px', borderRadius: '12px', overflow: 'hidden', backgroundColor: 'white' }}> <ListItem sx={{ padding: '12px 16px' }}> <ListItemIcon sx={{ minWidth: 40, color: 'primary.main' }}> <Settings /> </ListItemIcon> <ListItemText primary="暗黑模式" /> <Switch checked={mode === 'dark'} onChange={toggleTheme} /> </ListItem> </Box> {/* 退出登录 */} <Box sx={{ marginTop: '8px' }}> <Button variant="outlined" color="error" fullWidth startIcon={<Logout />} onClick={handleLogout} sx={{ padding: '12px', borderRadius: '12px', fontWeight: 500 }} > 退出登录 </Button> </Box> {/* 编辑资料对话框 */} <Dialog open={openDialog} onClose={() => setOpenDialog(false)} fullWidth maxWidth="sm"> <DialogTitle>编辑个人资料</DialogTitle> <DialogContent> <Box sx={{ display: 'flex', flexDirection: 'column', gap: '16px', paddingTop: '8px' }}> <TextField label="姓名" value={userData.name} onChange={(e) => setUserData(prev => ({ ...prev, name: e.target.value }))} fullWidth /> <TextField label="邮箱" type="email" value={userData.email} onChange={(e) => setUserData(prev => ({ ...prev, email: e.target.value }))} fullWidth /> <TextField label="手机号" value={userData.phone} onChange={(e) => setUserData(prev => ({ ...prev, phone: e.target.value }))} fullWidth /> </Box> </DialogContent> <DialogActions> <Button onClick={() => setOpenDialog(false)}>取消</Button> <Button onClick={handleSaveProfile} variant="contained">保存</Button> </DialogActions> </Dialog> </Box> ); }; export default Profile;

第五部分：移动端开发最佳实践与常见问题解决方案

5.1 移动端性能优化清单

// src/utils/performanceChecklist.js /** * 移动端性能优化检查清单 */ // 1. 图片懒加载实现 export const LazyImage = ({ src, alt, placeholder = '/placeholder.png', ...props }) => { const [imageSrc, setImageSrc] = useState(placeholder); const [isLoaded, setIsLoaded] = useState(false); const imageRef = useRef(); useEffect(() => { const observer = new IntersectionObserver( (entries) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = new Image(); img.onload = () => { setImageSrc(src); setIsLoaded(true); }; img.src = src; observer.unobserve(entry.target); } }); }, { rootMargin: '50px' } ); if (imageRef.current) { observer.observe(imageRef.current); } return () => { if (imageRef.current) { observer.unobserve(imageRef.current); } }; }, [src]); return ( <img ref={imageRef} src={imageSrc} alt={alt} style={{ opacity: isLoaded ? 1 : 0.5, transition: 'opacity 0.3s', ...props.style, }} {...props} /> ); }; // 2. 组件懒加载 export const withLazyLoading = (WrappedComponent, Fallback = () => <div>Loading...</div>) => { return React.lazy(() => { return new Promise(resolve => { setTimeout(() => resolve({ default: WrappedComponent }), 100); }); }); }; // 3. 虚拟列表优化 export const optimizeListRendering = (items, visibleCount = 10) => { const [visibleItems, setVisibleItems] = useState([]); const [offset, setOffset] = useState(0); useEffect(() => { const end = Math.min(offset + visibleCount, items.length); setVisibleItems(items.slice(offset, end)); }, [items, offset, visibleCount]); const loadMore = () => { setOffset(prev => Math.min(prev + visibleCount, items.length)); }; return { visibleItems, loadMore, hasMore: offset + visibleCount < items.length }; }; // 4. 内存泄漏防护 export const useCleanup = () => { const cleanupRef = useRef([]); const register = (cleanup) => { cleanupRef.current.push(cleanup); }; useEffect(() => { return () => { cleanupRef.current.forEach(cleanup => { if (typeof cleanup === 'function') { cleanup(); } }); }; }, []); }; // 5. 性能监控 export const usePerformanceMonitor = (componentName) => { const startTime = useRef(performance.now()); useEffect(() => { const endTime = performance.now(); const duration = endTime - startTime.current; if (duration > 16.67) { console.warn(`${componentName} 渲染耗时: ${duration.toFixed(2)}ms`); } return () => { // 组件卸载时的清理 }; }, [componentName]); };

5.2 常见移动端问题解决方案

// src/utils/mobileSolutions.js /** * 移动端常见问题解决方案 */ // 问题1: iOS Safari 100vh问题 export const getSafeAreaHeight = () => { const vh = window.innerHeight * 0.01; document.documentElement.style.setProperty('--vh', `${vh}px`); }; // 在CSS中使用: height: calc(var(--vh, 1vh) * 100); // 问题2: 输入框聚焦时页面缩放 export const preventZoomOnInput = () => { // 确保输入框字体大小不小于16px const inputs = document.querySelectorAll('input, textarea, select'); inputs.forEach(input => { input.style.fontSize = '16px'; }); }; // 问题3: 滚动穿透（对话框打开时背景滚动） export const disableBodyScroll = (disable) => { if (disable) { document.body.style.overflow = 'hidden'; document.body.style.position = 'fixed'; document.body.style.width = '100%'; } else { document.body.style.overflow = ''; document.body.style.position = ''; document.body.style.width = ''; } }; // 问题4: 触摸反馈延迟（300ms） export const removeTapDelay = () => { // 使用CSS touch-action: manipulation // 或者在FastClick库中处理 }; // 问题5: 安全区域适配（刘海屏） export const getSafeAreaInsets = () => { const safeAreaTop = getComputedStyle(document.documentElement).getPropertyValue('--safe-area-top') || '0px'; const safeAreaBottom = getComputedStyle(document.documentElement).getPropertyValue('--safe-area-bottom') || '0px'; return { top: parseInt(safeAreaTop), bottom: parseInt(safeAreaBottom), }; }; // 问题6: 网络状态检测 export const useNetworkStatus = () => { const [isOnline, setIsOnline] = useState(navigator.onLine); useEffect(() => { const handleOnline = () => setIsOnline(true); const handleOffline = () => setIsOnline(false); window.addEventListener('online', handleOnline); window.addEventListener('offline', handleOffline); return () => { window.removeEventListener('online', handleOnline); window.removeEventListener('offline', handleOffline); }; }, []); return isOnline; }; // 问题7: 电池状态检测 export const useBatteryStatus = () => { const [battery, setBattery] = useState({ level: 1, charging: false }); useEffect(() => { if ('getBattery' in navigator) { navigator.getBattery().then(batteryManager => { const updateBattery = () => { setBattery({ level: batteryManager.level, charging: batteryManager.charging, }); }; updateBattery(); batteryManager.addEventListener('levelchange', updateBattery); batteryManager.addEventListener('chargingchange', updateBattery); return () => { batteryManager.removeEventListener('levelchange', updateBattery); batteryManager.removeEventListener('chargingchange', updateBattery); }; }); } }, []); return battery; }; // 问题8: 设备方向检测 export const useDeviceOrientation = () => { const [orientation, setOrientation] = useState({ alpha: null, beta: null, gamma: null, }); useEffect(() => { const handleOrientation = (event) => { setOrientation({ alpha: event.alpha, beta: event.beta, gamma: event.gamma, }); }; if (window.DeviceOrientationEvent) { window.addEventListener('deviceorientation', handleOrientation); } return () => { if (window.DeviceOrientationEvent) { window.removeEventListener('deviceorientation', handleOrientation); } }; }, []); return orientation; };

5.3 移动端测试与调试

// src/utils/testing.js /** * 移动端测试工具 */ // 模拟触摸事件 export const simulateTouch = (element, options = {}) => { const { startX = 0, startY = 0, endX = 0, endY = 0, duration = 100 } = options; // 触摸开始 const touchStart = new TouchEvent('touchstart', { touches: [{ clientX: startX, clientY: startY }], }); element.dispatchEvent(touchStart); // 触摸移动 setTimeout(() => { const touchMove = new TouchEvent('touchmove', { touches: [{ clientX: endX, clientY: endY }], }); element.dispatchEvent(touchMove); }, duration / 2); // 触摸结束 setTimeout(() => { const touchEnd = new TouchEvent('touchend', { changedTouches: [{ clientX: endX, clientY: endY }], }); element.dispatchEvent(touchEnd); }, duration); }; // 性能测试 export const runPerformanceTest = async (testName, testFunction) => { const start = performance.now(); await testFunction(); const end = performance.now(); console.log(`${testName} 耗时: ${(end - start).toFixed(2)}ms`); return end - start; }; // 内存泄漏检测 export const detectMemoryLeaks = () => { if (performance.memory) { const memory = performance.memory; const usedMB = memory.usedJSHeapSize / 1048576; const totalMB = memory.totalJSHeapSize / 1048576; if (usedMB > 100) { // 如果内存使用超过100MB，可能有泄漏 console.warn(`内存使用过高: ${usedMB.toFixed(2)}MB`); } return { usedMB, totalMB }; } return null; }; // 响应式测试 export const testResponsiveLayout = () => { const breakpoints = [320, 375, 768, 1024]; const results = {}; breakpoints.forEach(width => { window.innerWidth = width; window.dispatchEvent(new Event('resize')); // 这里可以添加具体的布局测试逻辑 results[width] = { isMobile: width < 768, isTablet: width >= 768 && width < 1024, isDesktop: width >= 1024, }; }); return results; }; // 自动化测试示例 export const runMobileTests = async () => { console.log('开始移动端测试套件...'); // 测试1: 渲染性能 await runPerformanceTest('组件渲染', async () => { // 模拟组件渲染 await new Promise(resolve => setTimeout(resolve, 50)); }); // 测试2: 内存使用 const memory = detectMemoryLeaks(); if (memory) { console.log(`内存使用: ${memory.usedMB.toFixed(2)}MB`); } // 测试3: 响应式布局 const responsive = testResponsiveLayout(); console.log('响应式测试结果:', responsive); console.log('测试完成！'); };

第六部分：部署与生产环境优化

6.1 生产环境构建配置

// vite.config.js import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [react()], build: { target: 'es2015', cssCodeSplit: true, rollupOptions: { output: { manualChunks: { vendor: ['react', 'react-dom'], mui: ['@mui/material', '@emotion/react', '@emotion/styled'], router: ['react-router-dom'], }, }, }, minify: 'terser', terserOptions: { compress: { drop_console: true, drop_debugger: true, }, }, }, server: { port: 3000, host: true, }, define: { 'process.env': {}, }, });

6.2 性能监控与错误追踪

// src/utils/monitoring.js /** * 生产环境监控 */ // 性能数据上报 export const reportPerformance = (data) => { if (navigator.sendBeacon) { navigator.sendBeacon('/api/performance', JSON.stringify(data)); } else { fetch('/api/performance', { method: 'POST', body: JSON.stringify(data), keepalive: true, }); } }; // 错误上报 export const reportError = (error, context = {}) => { const errorData = { message: error.message, stack: error.stack, context, timestamp: new Date().toISOString(), userAgent: navigator.userAgent, url: window.location.href, }; console.error('Error reported:', errorData); if (navigator.sendBeacon) { navigator.sendBeacon('/api/error', JSON.stringify(errorData)); } else { fetch('/api/error', { method: 'POST', body: JSON.stringify(errorData), }); } }; // 性能指标收集 export const collectMetrics = () => { const metrics = {}; // 页面加载时间 if (window.performance && performance.timing) { const timing = performance.timing; metrics.pageLoadTime = timing.loadEventEnd - timing.navigationStart; metrics.domContentLoaded = timing.domContentLoadedEventEnd - timing.navigationStart; } // 资源加载时间 if (performance.getEntriesByType) { const resources = performance.getEntriesByType('resource'); metrics.resourceCount = resources.length; metrics.totalResourceTime = resources.reduce((sum, r) => sum + r.duration, 0); } // 内存使用 if (performance.memory) { metrics.memoryUsed = performance.memory.usedJSHeapSize / 1048576; } return metrics; }; // 错误边界组件 export class ErrorBoundary extends React.Component { constructor(props) { super(props); this.state = { hasError: false, error: null }; } static getDerivedStateFromError(error) { return { hasError: true, error }; } componentDidCatch(error, errorInfo) { reportError(error, { componentStack: errorInfo.componentStack, component: this.props.componentName || 'Unknown', }); } render() { if (this.state.hasError) { return ( <Box sx={{ padding: '20px', textAlign: 'center' }}> <Typography variant="h6" color="error" gutterBottom> 出错了！ </Typography> <Typography variant="body2" color="text.secondary"> {this.state.error?.message || '未知错误'} </Typography> <Button variant="contained" color="primary" onClick={() => window.location.reload()} sx={{ marginTop: '16px' }} > 刷新页面 </Button> </Box> ); } return this.props.children; } }