useFetch与useLocalStorage实战React自定义Hooks目录组织与复用模式完整教程【免费下载链接】react-folder-structure项目地址: https://gitcode.com/gh_mirrors/re/react-folder-structurereact-folder-structure 是一个面向初学者的 React 项目目录结构学习仓库它通过 beginner、intermediate、advanced 三个渐进式示例项目完整演示了如何组织自定义 Hooks 目录以及 useFetch、useLocalStorage 这类通用 Hooks 的复用模式。这篇 React 自定义 Hooks 教程将带你快速看懂这套目录规范并学会在自己的项目中直接套用。️ 仓库结构三个难度级别一条递进的路线这个仓库最大的特点是同一套功能、三种组织方式你能直观看到项目从小到大的目录演变级别目录组织思路入门beginner/扁平结构文件直接平铺在src/下进阶intermediate/按职责分目录components、context、pages、hooks高级advanced/按业务特性features分模块每个模块内再分子目录三个子项目都是完整的 Create React App 应用可以分别启动查看# 查看某个级别的完整目录 tree advanced/src hooks 目录组织三个级别的布局对比beginner扁平起步先跑起来入门示例里自定义 Hooks 已经独立成目录但工具函数如beginner/src/formatCurrency.js仍然散落在src/根目录beginner/src/ ├── hooks/ │ ├── useFetch.js │ └── useLocalStorage.js ├── components/ ├── formatCurrency.js ← 还没有归类到 utils └── formatDate.js ← 还没有归类到 utils这个级别的重点是即使项目很小Hooks 也应该有自己的家而不是混在组件堆里。intermediate独立 hooks 目录 就近测试进阶示例引入了两个关键习惯独立的hooks/目录以及把测试文件放在__tests__子文件夹里与源码同目录intermediate/src/ ├── hooks/ │ ├── useFetch.js │ ├── useLocalStorage.js │ └── __tests__/ │ ├── useFetch.test.js │ └── useLocalStorage.test.js ├── components/ ├── context/ └── pages/intermediate/src/hooks/__tests__/useLocalStorage.test.js这类路径告诉你一个原则测试跟被测文件放一起找起来最方便。advanced全局 Hooks 与特性 Hooks 并行高级示例把模块化的思想推到了极致形成了两级 Hooks的组织模式advanced/src/ ├── hooks/ ← 全局通用 Hooks任何页面都能用 │ ├── useFetch.js │ ├── useLocalStorage.js │ └── __tests__/ └── features/ ├── authentication/hooks/ ← 登录、注册相关的业务 Hooks ├── projects/ ← 项目模块的组件与服务 ├── settings/ └── todos/这就是核心复用模式通用逻辑数据请求、本地存储放进全局src/hooks/全站共享业务逻辑如登录流程放进对应特性模块的features/xxx/hooks/就近复用。比如advanced/src/features/authentication/hooks/目录下的useLogin.js、useSignup.js只服务于认证模块与LoginForm.js、SignupForm.js等组件互相配合边界非常清晰。 useFetch 与 useLocalStorage最经典的两个复用场景这两个 Hooks 被放在每个级别的hooks/目录中是自定义 Hooks 复用的最佳示范useFetch—— 封装发起请求 → 加载中 → 成功/失败的完整数据获取流程。把它写成 Hook 后任何页面拿到data、loading、error三个状态只需一行调用Todo 列表、项目列表、设置页都能复用同一套逻辑。useLocalStorage—— 让组件状态与浏览器本地存储保持同步。记住搜索关键词、记住主题偏好这类需求不用每个组件手写localStorage.getItem/setItem统一交给这个 Hook。判断该不该复用很简单第二个组件需要相同逻辑时就把它抽进hooks/目录。这也是从 beginner 到 advanced 示例一直在演示的事情——组件越写越多时共享逻辑的集中管理让项目不会失控。 就近测试tests的组织习惯三个级别中只要 Hooks 开始有了实现测试都会跟着落在同目录的__tests__下例如advanced/src/hooks/__tests__/useFetch.test.jsadvanced/src/hooks/__tests__/useLocalStorage.test.jsintermediate/src/utils/__tests__/formatCurrency.test.js好处很直接打开useFetch.js的所在目录就能看到它的测试不会出现测试文件满天飞、找不到对应源码的情况。advanced/src/utils/下的formatDate.js同样遵循这个约定说明这套规范适用于 Hooks、工具函数等一切可复用代码。 快速上手克隆仓库逐个查看三个示例git clone https://gitcode.com/gh_mirrors/re/react-folder-structure cd react-folder-structure/advanced npm install npm start分别把路径换成beginner和intermediate就能在浏览器里对比三个级别的运行效果再回到代码里对照目录结构理解会深很多。✅ 自定义 Hooks 目录组织清单可直接套用通用 Hooks 统一放在src/hooks/命名遵循use 驼峰如useFetch.js业务 Hooks 放进features/模块名/hooks/与模块组件就近放置测试文件放同目录__tests__/文件名与源码一一对应一个文件只放一个 Hook便于查找与复用工具函数归类到src/utils/不要散落在src/根目录。从扁平到模块化react-folder-structure 用三个可运行的示例把 React 自定义 Hooks 的目录组织讲得清清楚楚。建议从 beginner 开始一路看到 advanced把这份清单存进你的项目规范里。【免费下载链接】react-folder-structure项目地址: https://gitcode.com/gh_mirrors/re/react-folder-structure创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考