从业务组件到通用库：为什么你需要这门课

在 React 开发中，很多学习者停留在会用组件库的阶段，一旦面对复杂的业务逻辑，往往只能堆砌代码，缺乏抽象能力。这门课程的核心价值，在于帮你打通「业务组件」到「通用组件库」的最后一公里。它不只是教你写一个按钮或表单，而是通过实战演练，让你掌握如何从复杂业务中提炼共性，构建一套可复用、高质量的前端基础架构。这种从 0 到 1 自定义组件库的能力，正是区分普通开发者与高阶工程师的关键分水岭。

课程采用 React 18 配合 TypeScript 和 Vite 的现代技术栈，聚焦 Hooks 的深度应用。你将深入理解 React 的核心机制，解决复杂业务场景下的性能瓶颈和代码组织难题。最终目标是交付一套高品质的通用组件库以及一款功能完备的高效阅读应用程序。这不仅是一次技能升级，更是一次思维方式的转变，让你学会如何像架构师一样思考问题、拆解需求并封装解决方案。

适合人群与学习建议

本课程适合已经具备 React 基础，但在实际项目中感到架构混乱、组件复用率低的学习者。如果你经常遇到代码难以维护、性能优化无从下手的问题，或者希望系统性地提升 TypeScript 在大型项目中的应用能力，这里会是你查漏补缺的理想场所。建议在开始学习前，确保自己熟悉 React 的基本语法、Hooks 用法以及 TypeScript 的基础类型体系，这样能更好地跟上课程节奏。

学习过程中，请重点关注组件的设计原则和封装技巧。不要急于求成，而是要耐心体会每一个设计决策背后的原因。建议按照课程的引导顺序，先完成核心组件的实现，再逐步扩展到复杂交互和性能优化部分。通过边学边练的方式，将理论知识转化为实际操作能力，真正掌握复杂业务的拆解与重组技巧。

学完能做什么

完成本课程后，你将能够独立设计和实现一套完整的通用组件库，涵盖常用 UI 组件和复杂业务组件。你将掌握性能优化的多种手段，能够识别并解决 React 应用中的常见性能问题。同时，你也具备了对复杂业务逻辑进行抽象和封装的能力，可以在实际工作中快速搭建可扩展的前端架构。

资料包中包含的项目源码和视频讲解相辅相成，建议在学习每个章节时，动手复现课程中的关键代码片段，并尝试对组件进行二次开发和扩展。通过这种方式，你可以更深入地理解组件的内部机制，提升独立解决复杂问题的能力。最终，你将拥有一个可以写进简历的实战项目，为职场竞争增添有力筹码。

课程介绍

React18+TS+Vite 从0自定义组件库实战复杂项目视频教程，。React18+TS+Vite进阶实战。这门课程将带你系统学习React和Hooks，帮助你解决复杂业务开发中的难题，发现复杂业务架构技术的共性，提取可复用的经验，做到举一反三。通过此过程，您可以掌握复杂业务的拆解、性能优化、设计与封装通用组件等多种高阶技能。这些技能是高手必备的实用技能。我们最终会推出一套高品质的通用组件库和一款在业务上完备的高效阅读应用程序。拉开你与普通开发者的差距！

课程目录

1. 学会抽象与封装组件库
4. 学会高质量自定义Hooks
2. 综合进阶React18+TS+Vite
5. 驾驭复杂大型项目全流程
3. 掌握如何规避内存过度使用
6. 高性能APP开发思路与技巧
├── 第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 课程总结