react如何组织代码

React 代码组织方式

React 项目的代码组织方式可以基于功能、模块或文件类型进行划分。以下是几种常见的代码组织方法：

按功能组织（Feature-based）
将相关功能的所有代码（组件、样式、逻辑、测试）放在同一目录下。例如：

src/  
  features/  
    auth/  
      AuthForm.js  
      authSlice.js  
      authAPI.js  
      styles.css  
    dashboard/  
      Dashboard.js  
      Widgets/  
    ...

按文件类型组织（File-type-based）
传统方式，将组件、样式、工具函数等按类型分组：

src/  
  components/  
    Button.js  
    Header.js  
  styles/  
    main.css  
  utils/  
    api.js  
    helpers.js  

模块化/领域驱动设计（Domain-driven）
按业务领域划分，适合复杂应用：

src/  
  modules/  
    user/  
      components/  
      services/  
      models/  
    product/  
      components/  
      api/  

组件设计原则

单一职责原则
每个组件只负责一个特定功能。例如将大型组件拆分为 Header、Sidebar、MainContent 等独立组件。

容器与展示分离

• 容器组件（Container）：处理数据逻辑
• 展示组件（Presentational）：只负责 UI 渲染
  示例：

  
  // 容器组件
  const UserContainer = () => {
  const [users, setUsers] = useState([]);
  useEffect(() => { fetchUsers().then(setUsers) }, []);
  return <UserList users={users} />;
  };

// 展示组件 const UserList = ({ users }) => (

{users.map(user =>
• {user.name}
)}

); ```

状态管理策略

局部状态（useState）
组件内部状态使用 React 的 useState：

const [count, setCount] = useState(0);

全局状态（Context/Redux）
跨组件共享状态使用 Context API 或 Redux：

// Context 示例
const ThemeContext = createContext();
const App = () => (
  <ThemeContext.Provider value="dark">
    <ChildComponent />
  </ThemeContext.Provider>
);

代码复用模式

自定义 Hooks
提取可复用的逻辑到自定义 Hook：

const useFetch = (url) => {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch(url).then(res => res.json()).then(setData);
  }, [url]);
  return data;
};

高阶组件（HOC）
通过函数包装组件实现逻辑复用：

const withLogger = (WrappedComponent) => {
  return (props) => {
    console.log('Rendered:', WrappedComponent.name);
    return <WrappedComponent {...props} />;
  };
};

项目结构最佳实践

1. 清晰的入口文件
   index.js 或 main.jsx 应保持简洁，仅包含应用初始化代码。

2. 静态资源管理
   图片、字体等静态资源建议放在 assets/ 目录。

3. 环境配置分离
   将环境变量和配置放在 config/ 目录，区分开发/生产环境。

4. 测试文件就近原则
   测试文件与源码放在同一目录，例如 Component.test.js 与 Component.js 并列。

5. 类型定义（TypeScript）
   使用 TypeScript 时，类型定义可以放在 types/ 目录或直接与组件同目录。

工具推荐

• Linter：ESLint + Prettier 保持代码风格一致
• 目录别名：通过 jsconfig.json 或 webpack 配置路径别名（如 @/components）
• Monorepo：大型项目可使用 Lerna 或 Turborepo 管理多包

通过以上组织方式，可以保持 React 项目代码的可维护性和可扩展性。具体选择应根据项目规模和团队习惯决定。