这套课程的核心价值在于解决前端开发中从“能写出页面”到“能维护大型项目”的断层。许多开发者在使用 React 时，往往停留在调用组件的阶段，面对复杂业务逻辑时容易陷入状态管理混乱、组件耦合度过高、性能瓶颈难以定位的困境。本课程并非简单的 API 教程，而是通过构建一套自研组件库和一款复杂的阅读应用，强制你面对真实业务中的架构设计问题。它适合那些已经掌握 HTML/CSS/JS 基础，对 React 基本用法（如 useState、useEffect）有初步了解，但缺乏 TypeScript 深度应用经验或大型项目实战经历的开发者。如果你是刚入行的小白，建议先补齐 React 基础语法再学此课，否则后期涉及 Hooks 自定义封装时理解成本较高。

学习路径上，建议不要急于开始写代码，先重点研读课程前半部分关于 React 18 新特性与 TypeScript 高级类型系统的讲解。这部分是后续所有封装工作的基石，特别是泛型组件和工具类型的运用，直接决定了组件库的易用性和类型安全程度。接着进入 Vite 配置与项目脚手架搭建环节，理解现代构建工具的工作机制。核心攻坚点在于中间部分的组件封装实战，你需要跟随课程逻辑，逐一拆解表单、布局、数据展示等通用组件。这里的关键不是背诵代码，而是理解每个组件 props 的设计思路、内部状态的管理策略以及副作用的处理方式。建议在学习过程中，尝试脱离课程视频，自己手写几个简单组件，再对照课程源码找差异，这种“先试错后对比”的方法比单纯跟练有效得多。

资料包中的代码示例与实战项目应当配合练习使用，而非直接运行。你可以将课程提供的组件库代码导入自己的练习项目中，修改其中的样式或逻辑，观察对依赖该组件的上层业务代码产生何种影响，以此理解解耦与耦合的边界。学完此课程，你应当具备独立搭建企业级前端工程的能力，能够根据业务需求定制开发 UI 组件库，并具备识别复杂业务中可复用模块、进行性能调优的实战经验。最终产出的组件库与阅读应用，不仅是学习成果，更是你技术深度的直观证明，能显著提升你在技术面试或转岗场景中的竞争力。

课程目录

1. 学会抽象与封装组件库.mp4
 4. 学会高质量自定义Hooks.mp4
 2. 综合进阶React18+TS+Vite.mp4
 5. 驾驭复杂大型项目全流程.mp4
 3. 掌握如何规避内存过度使用.mp4
 6. 高性能APP开发思路与技巧.mp4
 ├── 第1章 课程导读/ │ └── [ 53M] 1-1 课程概览.mp4
 ├── 第2章 使用vite从0开始搭建react+ts开发环境/ │ ├── [ 16M] 2-1 前端构建工具集分析.mp4
 │ ├── [ 24M] 2-2 vite初始化项目.mp4
 │ ├── [ 36M] 2-3 代码规范化配置.mp4
 │ ├── [ 31M] 2-4 git规范化配置.mp4
 │ └── [2.2M] 2-5 本章小节.mp4
 ├── 第3章 一个项目开发前的准备/ │ ├── [7.9M] 3-1 -前言.mp4
 │ ├── [ 41M] 3-2 图标，公共资源的准备.mp4
 │ ├── [ 30M] 3-3 基本目录结构.mp4
 │ └── [ 24M] 3-4 入口+路由配置.mp4
 ├── 第4章 基础组件抽象 — 开发书城首页/ │ ├── @更多it资源 www. │ ├── [4.8M] 4-1 前言.mp4
 │ ├── [143M] 4-

10 基础组件：轮播图组件封装 — 实现最新无限轮播功能.mp4
 │ ├── [ 46M] 4-

12 业务组件：书城导航组件 — 实现路由间跳转.mp4
 │ ├── [116M] 4-13 基础组件：space组件封装.mp4
 │ ├── [148M] 4-14 业务组件：热门精选区块内容开发.mp4
 │ ├── [ 59M] 4-15 基础组件：Card组件封装.mp4
 │ ├── [ 87M] 4-16 基础组件：Grid组件封装.mp4
 │ ├── [ 82M] 4-17 业务组件：今日推荐区块内容开发.mp4
 │ ├── [ 81M] 4-18 业务组件：限时免费内容区块开发.mp4
 │ ├── [239M] 4-19 基础组件：Countdown组件封装.mp4
 │ ├── [ 56M] 4-2 业务组件：书城header开发.mp4
 │ ├── [108M] 4-20 业务组件：排行榜区块内容开发.mp4
 │ ├── [179M] 4-21 基础组件：Tabs组件封装-1.mp4
 │ ├── [202M] 4-22 基础组件：Tabs组件封装-2.mp4
 │ ├── [ 72M] 4-23 基础组件：Image组件封装—通用接口设计.mp4
 │ ├── [118M] 4-24 基础组件：Image组件封装—自定义useObserverHooks实现Image组件lazyload功能.mp4
 │ ├── [7.5M] 4-25 本章小结.mp4
 │ ├── [152M] 4-4 集成swr数据请求：封装useRequest hooks.mp4
 │ ├── [118M] 4-5 基础组件：loading组件封装.mp4
 │ ├── [ 74M] 4-6 基础组件：error-block组件封装.mp4
 │ ├── [ 42M] 4-7 基础组件：轮播图组件的使用方式.mp4
 │ ├── [247M] 4-8 基础组件：轮播图组件封装 — 实现手势滑动切换功能1.mp4
 │ └── [153M] 4-9 基础组件：轮播图组件封装 — 实现手势滑动切换功能2.mp4
 ├── 第5章 动态redux设计l来减少内存使用 — 深入redux状态管理/ │ ├── [ 17M] 5-1 前言.mp4
 │ ├── [132M] 5-2 搜索组件开发：基本交互功能.mp4
 │ ├── [ 94M] 5-3 搜索交互：封装localstorage存储关键词.mp4
 │ ├── [151M] 5-4 搜索交互：引入redux-toolkit状态管理.mp4
 │ ├── [152M] 5-5 业务组件：SearchList组件封装.mp4
 │ ├── [111M] 5-6 业务组件：热门搜索组件开发—实现热门搜索数据获取和渲染.mp4
 │ ├── [126M] 5-7 业务组件：搜索历史组件—useReadLocalStorage hooks封装.mp4
 │ ├── [101M] 5-8 业务组件：搜索历史组件—交互功能.mp4
 │ └── [2.5M] 5-9 章节小结.mp4
 ├── 第6章 基础+业务组件 — 开发搜索页/ │ ├── [ 18M] 6-1 前言【更多it资源 www.】.mp4
 │ ├── [ 76M] 6-2 封装ReducerManager方法—实现动态的添加，获取，删除Reducer和State.mp4
 │ ├── [ 51M] 6-3 封装configStore—重新配置store.mp4
 │ ├── [ 27M] 6-4 封装createTempSlice方法—通过name和initialState来创建slice.mp4
 │ ├── [ 22M] 6-5 封装useReducer hooks—实现reducer跟随组件生命周期来进行加载和卸载.mp4
 │ ├── [117M] 6-6 修改store的使用方式—解耦不同代码中对store的依赖.mp4
 │ └── [2.3M] 6-7 章节小结.mp4
 └── 第7章 完善组件库 — 排行榜页开发/ ├── [ 12M] 7-1 前言.mp4
 ├── [116M] 7-2 业务组件：RankingHeader组件封装.mp4
 ├── [ 58M] 7-3 基础组件：NavBar组件封装.mp4
 ├── [111M] 7-4 基础组件：Sidebar组件封装.mp4
 ├── [ 98M] 7-5 业务组件：Content组件封装—实现排行榜菜单切换.mp4
 └── [ 88M] 7-6 业务组件：封装BookList组件.mp4
 ├── 8-应用组件库完成快速开发 —— 实现分类页，完本页，专题页/ │ ├── [5.0M] 8-1 前言 │ ├── [ 45M] 8-2 分类页开发 │ ├── [ 70M] 8-3 swr请求下啦加载数据：封装useInfiniteRequest │ ├── [ 61M] 8-4 使用infiniteScroll组件完成无限下拉加载功能 │ ├── [ 49M] 8-5 基础组件：封装InfiniteScroll组件 │ └── [1.3M] 8-6 章节小结 ├── 9-数据存储的封装和使用 — 书籍详情页开发/ │ ├── [7.3M] 9-1 前言 │ ├── [9.3M] 9-2 书籍详情页数据获取 │ ├── [8.8M] 9-3 书籍详情页组件划分 │ ├── [ 41M] 9-4 业务组件：书籍详情页Navbar组件封装 │ ├── [ 40M] 9-5 业务组件：书籍详情页BookInfo组件封装 │ ├── [ 99M] 9-6 基础组件：Ellipsis组件封装 │ ├── [ 26M] 9-7 封装useResizeObserver hooks │ ├── [ 20M] 9-8 基础组件：Divider组件封装 │ ├── [ 36M] 9-9 业务组件：Catalog组件封装—实现基本UI布局 │ ├── [ 31M] 9-

10 业务组件：CatelogList组件封装 │ ├── [ 57M] 9-

11 基础组件：Popup组件封装 │ ├── [ 34M] 9-

12 基础组件：Mask组件封装 │ ├── [ 14M] 9-

13 hooks封装：封装useScrollLock hooks │ ├── [ 68M] 9-14 业务组件：DetailContent和DetailFooter封装 │ ├── [ 67M] 9-

15 基础组件：Toast组件封装 │ ├── [ 18M] 9-

16 基础组件：Button组件逻辑讲解 │ └── [2.5M] 9-

17 章节小结 ├── 10-书架页开发/ │ ├── [6.9M] 10-1 前言 │ ├── [ 43M] 10-2 业务组件：书架navbar组件开发 │ ├── [ 47M] 10-3 业务组件：bookList组件封装1 │ ├── [ 91M] 10-4 业务组件：bookList组件封装2 │ ├── [ 92M] 10-5 业务组件：GroupList组件开发 │ ├── [ 62M] 10-6 业务组件：EditBar组件—分组功能1 │ ├── [108M] 10-7 基础组件—Dialog组件封装 │ ├── [ 79M] 10-8 实现创建新的分组功能 │ ├── [ 40M] 10-9 实现移动到分组功能 │ └── [1.2M] 10-

10 本章小结 ├── 11-核心难点 — 开发阅读器/ │ ├── [9.7M] 11-1 前言 │ ├── [ 26M] 11-2 业务组件：阅读页header组件封装 │ ├── [107M] 11-3 业务组件：阅读页Content封装 │ ├── [ 50M] 11-4 业务组件：阅读页footerNavbar封装 │ ├── [ 56M] 11-5 业务组件：封装footerCatalogList组件 │ ├── [ 69M] 11-6 业务组件：ProgressBar封装 │ ├── [168M] 11-7 基础组件：slider组件封装 │ ├── [ 70M] 11-8 业务组件：SettingBar组件封装 │ └── [2.1M] 11-9 章节小结 ├── 12-组件库环境搭建和发布/ │ ├── [2.7M] 12-1 前言 │ ├── [ 13M] 12-2 创建组件库模版和仓库 │ ├── [ 10M] 12-3 迁移基础组件 │ ├── [ 45M] 12-4 组件库打包和发布到NPM │ ├── [ 67M] 12-5 组件库文档编写 │ └── [ 13M] 12-6 部署组件库文档 ├── 13-性能与项目部署/ │ ├── [1.3M] 13-1 前言 │ ├── [ 18M] 13-2 代码分割 – 按需加载 │ ├── [9.8M] 13-3 打包构建 │ └── [ 11M] 13-4 nginx配置讲解 └── 14-课程总结/ └── [2.2M] 14-1 课程总结