以下這種結構設計適合以下場景：
- 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}
}
 購買 存儲)
