react如何组织代码

代码组织的基本原则

React项目代码组织应遵循模块化、可维护性和可扩展性。将相关功能集中管理，避免过度嵌套，保持目录结构清晰。

按功能或模块划分

常见做法是按功能或业务模块划分目录结构。每个模块包含自身的组件、样式、逻辑和测试文件。例如：

src/
  components/
    Button/
      Button.js
      Button.css
      Button.test.js
    Header/
      Header.js
      Header.css
  features/
    auth/
      LoginForm.js
      RegisterForm.js
    dashboard/
      Dashboard.js
      Widgets/

组件与容器分离

将展示组件（UI部分）与容器组件（逻辑部分）分开。展示组件专注于渲染UI，容器组件处理数据获取和状态管理。这种模式有助于复用和测试。

状态管理集中化

对于复杂状态逻辑，使用Redux、Context API或Zustand等状态管理工具。将状态相关的代码集中存放在store或state目录中：

src/
  store/
    actions/
    reducers/
    selectors/

工具与实用函数

将通用工具函数、常量或配置单独存放。例如创建utils或lib目录：

src/
  utils/
    api.js
    helpers.js
  constants/
    routes.js
    appConfig.js

样式管理方案

根据项目规模选择CSS模块、Styled-components或Sass等方案。样式文件通常与组件放在同一目录，或集中存放在styles目录：

src/
  styles/
    base/
    components/
    themes/

测试文件组织

测试文件应与被测代码保持相同结构。单元测试放在__tests__目录或与源码并列，E2E测试单独存放：

src/
  components/
    Button/
      Button.test.js
test/
  e2e/

路由配置

使用React Router时，将路由配置集中管理或按模块拆分。大型项目可采用动态路由加载：

// src/routes.js
const routes = [
  { path: '/', component: Home },
  { path: '/dashboard', component: Dashboard }
]

环境配置

区分不同环境配置，将环境变量和全局配置集中管理：

config/
  dev.env.js
  prod.env.js
  test.env.js

类型定义（TypeScript）

使用TypeScript时，类型定义可以内联或集中存放。复杂类型建议放在types目录：

src/
  types/
    app.d.ts
    api.d.ts

文档与示例

为重要组件添加README或示例文件，说明用法和API。这有助于团队协作：

components/
  DatePicker/
    README.md
    examples/
      BasicUsage.js

构建工具配置

现代React项目通常使用Webpack或Vite。配置文件应放在项目根目录，复杂配置可拆分：

config/
  webpack.common.js
  webpack.dev.js
  webpack.prod.js