课程介绍
在前端开发工作中，我们每天都在写组件。业务组件一般不会很复杂，不需要很多封装。
除此之外，我们也会用一些第三方组件库的组件，比如 Ant Design。这些组件的 props、ts 类型、内部实现等都做了很多设计。
那么，像 Calendar、Table 和 Form、虚拟列表这些常用的组件，你知道是怎么写的吗？或者说，如果让你来写一个组件库，你觉得都需要考虑哪些问题呢？
这些内容，不仅我们日常工作中会用到，还可以写在简历上加分！
资源目录
-
关于本小册
学习时长: 6分48秒 -
一网打尽组件常用 Hook
学习时长: 1小时55分 -
Hook 的闭包陷阱的成因和解决方案
学习时长: 25分39秒 -
React 组件如何写 TypeScript 类型
学习时长: 46分50秒 -
React 组件如何调试
学习时长: 14分26秒 -
受控模式 VS 非受控模式
学习时长: 1小时4分 -
组件实战：迷你 Calendar
学习时长: 1小时51分 -
组件实战：Calendar 日历组件（上）
学习时长: 47分27秒 -
组件实战：Calendar 日历组件（下）
学习时长: 1小时32分 -
快速掌握 Storybook
学习时长: 40分18秒 -
React 组件如何写单测？
学习时长: 25分8秒 -
深入理解 Suspense 和 ErrorBoundary
学习时长: 47分47秒 -
组件实战：Icon 图标组件
学习时长: 44分40秒 -
组件实战：Space 间距组件
学习时长: 1小时2分 -
React.Children 和它的两种替代方案
学习时长: 52分24秒 -
三个简单组件的封装
学习时长: 47分13秒 -
浏览器的 5 种 Observer
学习时长: 24分28秒 -
组件实战：Watermark 防删除水印组件
学习时长: 1小时56分 -
手写 react-lazyload
学习时长: 25分54秒 -
图解网页的各种距离
学习时长: 55分5秒 -
自定义 hook 练习
学习时长: 39分57秒 -
自定义 hook 练习（二）
学习时长: 48分54秒 -
用 react-spring 做弹簧动画
学习时长: 51分19秒 -
react-spring 结合 use-gesture 手势库实现交互动画
学习时长: 23分 -
用 react-transition-group 和 react-spring 做过渡动画
学习时长: 56分10秒 -
快速掌握 Tailwind：最流行的原子化 CSS 框架
学习时长: 23分5秒 -
用 CSS Modules 避免样式冲突
学习时长: 37分9秒 -
CSS In JS：快速掌握 styled-components
学习时长: 55分52秒 -
react-spring 实现滑入滑出的转场动画
学习时长: 33分41秒 -
组件实战：Message 全局提示组件
学习时长: 1小时48分 -
组件实战：Popover 气泡卡片组件
学习时长: 42分59秒 -
项目里如何快速定位组件源码？
学习时长: 31分56秒 -
一次超爽的 React 调试体验
学习时长: 5分6秒 -
组件实战：ColorPicker 颜色选择器（一）
学习时长: 10分15秒 -
组件实战：ColorPicker 颜色选择器（二）
学习时长: 1小时 -
组件实战：onBoarding 漫游式引导组件
学习时长: 1小时17分 -
组件实战：Upload 拖拽上传
学习时长: 1小时36分 -
组件实战：Form 表单组件
学习时长: 1小时43分 -
React 组件库都是怎么构建的
学习时长: 15分57秒 -
组件库实战：构建 esm 和 cjs 产物，发布到 npm
学习时长: 41分52秒 -
组件库实战：构建 umd 产物，通过 unpkg 访问
学习时长: 37分54秒 -
为什么要用 Rollup 打包组件库？
学习时长: 40分7秒 -
组件库实战：Rollup 打包 esm、cjs、umd、css 产物
学习时长: 42分1秒 -
数据不可变：immutable 和 immer
学习时长: 26分37秒 -
基于 React Router 实现 keepalive
学习时长: 29分6秒 -
History api 和 React Router 实现原理
学习时长: 30分28秒 -
React Context 的实现原理和在 antd 里的应用
学习时长: 29分46秒 -
React Context 的性能缺点和解决方案
学习时长: 37分1秒 -
手写一个 Zustand
学习时长: 42分34秒 -
原子化状态管理库 Jotai
学习时长: 1小时8分 -
用 react-intl 实现国际化
学习时长: 46分23秒 -
国际化资源包如何通过 Excel 和 Google Sheet 分享给产品经理？
学习时长: 55分43秒 -
基于 react-dnd 实现拖拽排序
学习时长: 1小时47分 -
react-dnd 实战：拖拽版 TodoList
学习时长: 1小时32分 -
React Playground 项目实战：需求分析、实现原理
学习时长: 38分53秒 -
React Playground 项目实战：布局、代码编辑器
学习时长: 1小时36分 -
React Playground 项目实战：多文件切换
学习时长: 53分3秒 -
React Playground 项目实战：babel 编译、iframe 预览
学习时长: 45分7秒 -
React Playground 项目实战：文件增删改
学习时长: 1小时27分 -
React Playground 项目实战：错误显示、主题切换
学习时长: 36分6秒 -
React Playground 项目实战：链接分享、代码下载
学习时长: 19分57秒 -
React Playground 项目实战：Web Worker 性能优化
学习时长: 25分34秒 -
React Playground 项目实战：总结
学习时长: 16分4秒 -
手写 Mini React：思路分析
学习时长: 12分43秒 -
手写 Mini React：代码实现
学习时长: 1小时8分 -
手写 Mini React：和真实 React 源码的对比
学习时长: 20分49秒 -
React 18 的并发机制是怎么实现的？
学习时长: 20分50秒 -
Ref 的实现原理
学习时长: 29分31秒 -
低代码编辑器：核心数据结构、全局 store
学习时长: 46分49秒 -
低代码编辑器：拖拽组件到画布、拖拽编辑 json
学习时长: 1小时15分 -
低代码编辑器：画布区 hover 展示高亮框
学习时长: 56分 -
低代码编辑器：画布区 click 展示编辑框
学习时长: 1小时14分 -
低代码编辑器：组件属性、样式编辑
学习时长: 1小时29分 -
低代码编辑器：预览、大纲
学习时长: 50分13秒 -
低代码编辑器：事件绑定
学习时长: 50分13秒 -
低代码编辑器：动作弹窗
学习时长: 1小时32分 -
低代码编辑器：自定义 JS
学习时长: 1小时48分 -
低代码编辑器：组件联动
学习时长: 58分18秒 -
低代码编辑器：拖拽优化、Table 组件
学习时长: 43分47秒 -
低代码编辑器：Form 组件、store 持久化
学习时长: 35分9秒 -
低代码编辑器：项目总结
学习时长: 11分57秒 -
快速掌握 React Flow 画流程图
学习时长: 53分39秒 -
React Flow 振荡器调音：项目介绍
学习时长: 9分36秒 -
React Flow 振荡器调音：流程图绘制
学习时长: 43分54秒 -
React Flow 振荡器调音：合成声音
学习时长: 1小时24分 -
AudioContext 实现在线钢琴
学习时长: 39分21秒 -
React 服务端渲染：从 SSR 到 hydrate
学习时长: 15分14秒 -
小册总结
学习时长: 10分3秒
