React 大型项目目录骨架前置React 数据请求TanStack Query目标建立可扩展的目录直觉features/pages/shared知道新代码该往哪放。引言入门 demo 往往是src/ App.tsx components/ Header.tsx TodoList.tsx UserCard.tsx ...项目变大以后问题不是「React 不会写」而是改一个业务要在components/里翻半天才找到相关文件首页、登录、任务模块的组件混在一起互相乱引用新人不知道「这个按钮 / 这个 hook 该放哪」本篇不追完美架构只给一套够用、可长的起步骨架按业务feature内聚页面保持薄跨业务的东西进shared。本篇demo/已按此拆了一版可点的迷你应用首页 任务模块 共享按钮。目录示意推荐起步结构src/ app/ # 可选全局 provider、路由表 pages/ # 路由级页面薄 features/ # 按业务内聚tasks、auth… shared/ # 跨业务 UI / utils动手完整代码react2/08-large-project/democdreact2/08-large-project/demonpminstallnpmrun dev/→pages/HomePage/tasks→features/tasks/TasksPage用shared/Button点顶栏「首页 / 任务」感受「路由页」和「业务模块」是怎么分开的。1. 为什么不要一股脑塞进components/做法短期项目长大以后全部丢components/好找文件名业务边界糊掉互相 import 成蜘蛛网按 UI 类型分buttons/、forms/看起来整齐改「任务」仍要跨很多目录按feature分features/tasks/多建一层目录相关代码挨在一起改一块少翻别处直觉经常一起改的放一起。「任务列表 加任务逻辑 任务相关 hook」属于features/tasks「全站都能用的按钮」才进shared。2. 四层分别干什么pages/路由级页面尽量薄对应 URL 入口少写业务细节多做组装// pages/HomePage.tsx import { Link } from react-router-dom export function HomePage() { return ( section classNamepanel h1首页/h1 p 大型项目按 codefeatures / pages / shared/code 拆目录功能内聚、页面薄。 /p Link to/tasks进入任务模块 →/Link /section ) }约定一个路由 ≈ 一个 page或 page 再调 featurepage 里少堆useState/ 复杂请求重逻辑下沉到features/features/按业务内聚一个业务一块地页面、组件、hooks、API 都可以放在同一 feature 下。// features/tasks/TasksPage.tsx import { useState } from react import { Button } from ../../shared/Button export function TasksPage() { const [items, setItems] useState([搭建目录, 拆分 feature, 接入路由]) return ( section classNamepanel h1任务 Feature/h1 ul {items.map((item) ( li key{item}{item}/li ))} /ul Button onClick{() setItems((list) [...list, 新任务 ${list.length 1}]) } 添加任务 /Button /section ) }长大以后可以继续往下拆例如features/tasks/ TasksPage.tsx components/TaskItem.tsx hooks/useTasks.ts api.ts先别过度拆文件变多、找起来费劲时再拆。shared/跨业务复用只放「两个及以上 feature 都会用」的东西通用 Button、布局、日期格式化、fetch封装等。// shared/Button.tsx import type { ButtonHTMLAttributes, ReactNode } from react type Props ButtonHTMLAttributesHTMLButtonElement { children: ReactNode } export function Button({ children, ...rest }: Props) { return ( button typebutton classNamebtn {...rest} {children} /button ) }判断口诀只有任务模块用→ 留在features/tasks首页、任务、设置都会用→sharedapp/可选全局装配ProviderQueryClient、主题、路由表、鉴权壳子等「应用级胶水」可以放这里。本 demo 体量小路由直接写在App.tsx没有单独建app/这是刻意简化。3. 路由怎么把它们串起来// App.tsx import { BrowserRouter, Link, Route, Routes } from react-router-dom import { TasksPage } from ./features/tasks/TasksPage import { HomePage } from ./pages/HomePage export default function App() { return ( BrowserRouter div classNameshell header classNametop strongLargeApp 骨架/strong nav Link to/首页/Link Link to/tasks任务/Link /nav /header main Routes Route path/ element{HomePage /} / Route path/tasks element{TasksPage /} / /Routes /main /div /BrowserRouter ) }依赖方向可以记成App路由 / 壳 → pages / features页面与业务 → shared通用 UI / utils尽量避免shared去 import 某个features/xxx通用层不应依赖具体业务。4. 对照表目录回答的问题demo 里有什么pages/这个 URL 入口是谁HomePagefeatures/tasks/任务业务的代码在哪TasksPage 本地 stateshared/全站通用控件ButtonApp.tsx壳子 路由表顶栏 /、/tasks新增需求优先落点新路由「关于页」pages/AboutPage 挂一条Route任务详情、任务筛选features/tasks/里加文件全站统一的Inputshared/Input.tsx登录 / 权限一整块features/auth/不要散到各处5. 常见坑做法问题一切仍丢components/目录「看起来有结构」业务边界没有page 里写满请求与业务规则页面变胖难复用、难测feature 之间互相乱引用tasks↔auth缠死拆不动过早建entities/widgets七层小项目被架构压垮先features shared够用把只属于任务的按钮放进sharedshared膨胀成杂物间demo 在练什么用pages/features/shared看清三层职责路由只负责挂载业务状态留在 feature 内feature 通过shared/Button复用通用 UI而不是复制一份样式按钮自己改一改再加一个features/notes/挂/notes或把任务列表拆成TaskItem.tsx仍放在features/tasks/下。运行截图