以下这种结构设计适合以下场景：
- 10人以上开发团队协作
- 长期维护的中大型项目
- 需要高度模块化和可扩展性的项目
- 需要严格类型检查的TypeScript项目
根据实际需求，可以适当调整模块划分和目录结构，但保持核心的模块化思想和分层架构是关键。
React核心目录结构
src/
├── api/ # API 接口层
│ ├── axios/ # Axios 配置
│ │ ├── config.ts # 基础配置
│ │ ├── interceptors.ts # 拦截器
│ │ └── index.ts # 实例导出
│ ├── modules/ # 模块化API
│ │ ├── auth/ # 认证模块
│ │ │ ├── types.ts # 类型定义
│ │ │ ├── index.ts # API方法
│ │ │ └── mock.ts # Mock数据
│ │ ├── user/
│ │ └── ... # 其他模块
│ └── index.ts # 统一导出
│
├── assets/ # 静态资源
│ ├── fonts/ # 字体文件
│ ├── images/ # 图片资源
│ ├── styles/ # 全局样式
│ │ ├── variables.scss # SCSS变量
│ │ ├── mixins.scss # SCSS混入
│ │ ├── global.scss # 全局样式
│ │ └── reset.scss # 重置样式（对使用的UI框架，强制覆盖样式）
│ └── svgs/ # SVG图标
│ └── icons.tsx # SVG组件化
│
├── components/ # 组件库
│ ├── common/ # 全局通用组件
│ │ ├── Button/
│ │ │ ├── index.tsx # 组件主体
│ │ │ ├── types.ts # 类型定义
│ │ │ ├── style.scss # 组件样式
│ │ │ └── __tests__/ # 组件测试
│ │ ├── Table/
│ │ ├── Form/
│ │ └── ... # 其他通用组件
│ ├── layout/ # 布局组件
│ │ ├── Header/
│ │ ├── Sidebar/
│ │ ├── Footer/
│ │ └── PageContainer/ # 页面容器
│ └── ui/ # UI组件库封装
│ ├── AntdCustom/ # Ant Design二次封装
│ └── ... # 其他UI库封装
│
├── config/ # 项目配置
│ ├── env.ts # 环境变量处理
│ ├── routes.ts # 路由配置
│ ├── theme.ts # 主题配置
│ └── constants.ts # 全局常量
│
├── hooks/ # 自定义Hook
│ ├── usePagination.ts # 分页逻辑
│ ├── useForm.ts # 表单处理
│ ├── useTable.ts # 表格逻辑
│ └── modules/ # 模块化Hook
│ ├── useUser.ts # 用户相关Hook
│ └── ... # 其他模块Hook
│
├── pages/ # 页面级组件
│ ├── Auth/ # 认证相关页面
│ │ ├── Login/
│ │ │ ├── index.tsx # 页面组件
│ │ │ ├── components/ # 页面专用组件
│ │ │ │ └── LoginForm.tsx
│ │ │ ├── hooks/ # 页面专用Hook
│ │ │ │ └── useLogin.ts
│ │ │ └── style.scss # 页面样式
│ │ ├── Register/
│ │ └── ... # 其他认证页面
│ ├── Dashboard/ # 仪表盘模块
│ ├── User/ # 用户管理模块
│ └── ... # 其他业务模块
│
├── router/ # 路由配置
│ ├── AuthRoute.tsx # 权限路由组件
│ ├── routes/ # 路由模块化
│ │ ├── auth.ts # 认证路由
│ │ ├── dashboard.ts # 仪表盘路由
│ │ └── ... # 其他模块路由
│ └── index.tsx # 路由主入口
│
├── store/ # 状态管理
│ ├── slices/ # Redux Toolkit切片
│ │ ├── authSlice.ts # 认证状态
│ │ ├── userSlice.ts # 用户状态
│ │ └── ... # 其他状态切片
│ ├── hooks.ts # Redux Hook导出
│ ├── index.ts # Store配置
│ └── types/ # 状态类型定义
│ ├── auth.d.ts
│ └── ... # 其他类型
│
├── types/ # 全局类型定义
│ ├── api.d.ts # API类型
│ ├── components.d.ts # 组件Props类型
│ └── store.d.ts # 状态类型
│
├── utils/ # 工具函数
│ ├── auth/ # 认证相关工具
│ │ ├── token.ts # Token处理
│ │ └── permission.ts # 权限处理
│ ├── common/ # 通用工具
│ │ ├── date.ts # 日期处理
│ │ ├── string.ts # 字符串处理
│ │ └── validate.ts # 验证工具
│ ├── helpers/ # 辅助函数
│ │ ├── errorHandler.ts # 错误处理
│ │ └── logger.ts # 日志工具
│ └── storage/ # 存储相关
│ ├── local.ts # localStorage
│ └── session.ts # sessionStorage
│
├── App.tsx # 根组件
├── main.tsx # 应用入口
└── setupTests.ts # 测试配置
测试目录结构
tests/
├── e2e/ # 端到端测试
│ ├── fixtures/ # 测试固件
│ ├── specs/ # 测试规范
│ └── plugins/ # Cypress插件
├── unit/ # 单元测试
│ ├── components/ # 组件测试
│ │ ├── common/ # 通用组件测试
│ │ └── ... # 其他组件测试
│ ├── hooks/ # Hook测试
│ ├── pages/ # 页面测试
│ └── store/ # 状态管理测试
└── __mocks__/ # Mock数据├── api/ # API Mock└── modules/ # 模块Mock
大型项目最佳实践
1. 代码分割与懒加载
// 路由配置中使用React.lazy
const Dashboard = React.lazy(() => import('@/pages/Dashboard'))
const UserList = React.lazy(() => import('@/pages/User/List'))// 配合Suspense使用，有效降低更新消耗
<Suspense fallback={<Loading />}><Routes>...</Routes>
</Suspense>
2. 环境变量管理
// config/env.ts
const ENV = {API_BASE_URL: import.meta.env.VITE_API_BASE_URL,MODE: import.meta.env.MODE,IS_DEV: import.meta.env.DEV,IS_PROD: import.meta.env.PROD
}export default ENV
3. 性能优化技巧
// 使用memo优化组件
const MemoizedComponent = React.memo(ExpensiveComponent)// 使用useCallback避免不必要的重新渲染
const handleSubmit = useCallback((values) => {// 处理逻辑
}, [dependencies])
4. 错误边界处理
class ErrorBoundary extends React.Component {state = { hasError: false }static getDerivedStateFromError() {return { hasError: true }}componentDidCatch(error: Error, info: React.ErrorInfo) {logErrorToService(error, info.componentStack)}render() {return this.state.hasError ? <FallbackUI /> : this.props.children}
}
 购买 存储)
