React 项目结构的职责划分

相关概念：react

React 项目结构真正要解决的，不是目录漂不漂亮，而是组件、页面、状态和服务边界能不能分清。

核心目录

src/
├── components/
├── pages/
├── hooks/
├── services/
├── utils/
├── App.tsx
└── main.tsx

目录名可以调整，但职责最好稳定。

职责划分

main.tsx

应用入口，负责挂载根组件和初始化全局能力。

App.tsx

根组件，负责应用骨架、路由容器或全局布局。

components/

可复用 UI 组件。重点是复用和组合，而不是页面语义。

pages/

页面级组件。重点是路由入口和页面编排。

hooks/

可复用状态逻辑和副作用逻辑。重点是抽离行为，而不是渲染结构。

services/

API 请求、数据访问和外部服务调用。

utils/

纯工具函数。重点是无业务状态、无框架依赖。

一个判断

如果一个目录里的内容既负责渲染、又负责请求、还顺手做状态编排，边界通常已经开始变糊。

结论

React 项目结构的关键不是目录名字，而是职责是否单一、边界是否稳定。