掘金小册：《React通关秘籍》(总87章)

课程介绍

在前端开发工作中，我们每天都在写组件。业务组件一般不会很复杂，不需要很多封装。
除此之外，我们也会用一些第三方组件库的组件，比如 Ant Design。这些组件的 props、ts 类型、内部实现等都做了很多设计。
那么，像 Calendar、Table 和 Form、虚拟列表这些常用的组件，你知道是怎么写的吗？或者说，如果让你来写一个组件库，你觉得都需要考虑哪些问题呢？
这些内容，不仅我们日常工作中会用到，还可以写在简历上加分！

资源目录

1. 关于本小册
   学习时长: 6分48秒

2. 一网打尽组件常用 Hook
   学习时长: 1小时55分

3. Hook 的闭包陷阱的成因和解决方案
   学习时长: 25分39秒

4. React 组件如何写 TypeScript 类型
   学习时长: 46分50秒

5. React 组件如何调试
   学习时长: 14分26秒

6. 受控模式 VS 非受控模式
   学习时长: 1小时4分

7. 组件实战：迷你 Calendar
   学习时长: 1小时51分

8. 组件实战：Calendar 日历组件（上）
   学习时长: 47分27秒

9. 组件实战：Calendar 日历组件（下）
   学习时长: 1小时32分

10. 快速掌握 Storybook
    学习时长: 40分18秒

11. React 组件如何写单测？
    学习时长: 25分8秒

12. 深入理解 Suspense 和 ErrorBoundary
    学习时长: 47分47秒

13. 组件实战：Icon 图标组件
    学习时长: 44分40秒

14. 组件实战：Space 间距组件
    学习时长: 1小时2分

15. React.Children 和它的两种替代方案
    学习时长: 52分24秒

16. 三个简单组件的封装
    学习时长: 47分13秒

17. 浏览器的 5 种 Observer
    学习时长: 24分28秒

18. 组件实战：Watermark 防删除水印组件
    学习时长: 1小时56分

19. 手写 react-lazyload
    学习时长: 25分54秒

20. 图解网页的各种距离
    学习时长: 55分5秒

21. 自定义 hook 练习
    学习时长: 39分57秒

22. 自定义 hook 练习（二）
    学习时长: 48分54秒

23. 用 react-spring 做弹簧动画
    学习时长: 51分19秒

24. react-spring 结合 use-gesture 手势库实现交互动画
    学习时长: 23分

25. 用 react-transition-group 和 react-spring 做过渡动画
    学习时长: 56分10秒

26. 快速掌握 Tailwind：最流行的原子化 CSS 框架
    学习时长: 23分5秒

27. 用 CSS Modules 避免样式冲突
    学习时长: 37分9秒

28. CSS In JS：快速掌握 styled-components
    学习时长: 55分52秒

29. react-spring 实现滑入滑出的转场动画
    学习时长: 33分41秒

30. 组件实战：Message 全局提示组件
    学习时长: 1小时48分

31. 组件实战：Popover 气泡卡片组件
    学习时长: 42分59秒

32. 项目里如何快速定位组件源码？
    学习时长: 31分56秒

33. 一次超爽的 React 调试体验
    学习时长: 5分6秒

34. 组件实战：ColorPicker 颜色选择器（一）
    学习时长: 10分15秒

35. 组件实战：ColorPicker 颜色选择器（二）
    学习时长: 1小时

36. 组件实战：onBoarding 漫游式引导组件
    学习时长: 1小时17分

37. 组件实战：Upload 拖拽上传
    学习时长: 1小时36分

38. 组件实战：Form 表单组件
    学习时长: 1小时43分

39. React 组件库都是怎么构建的
    学习时长: 15分57秒

40. 组件库实战：构建 esm 和 cjs 产物，发布到 npm
    学习时长: 41分52秒

41. 组件库实战：构建 umd 产物，通过 unpkg 访问
    学习时长: 37分54秒

42. 为什么要用 Rollup 打包组件库？
    学习时长: 40分7秒

43. 组件库实战：Rollup 打包 esm、cjs、umd、css 产物
    学习时长: 42分1秒

44. 数据不可变：immutable 和 immer
    学习时长: 26分37秒

45. 基于 React Router 实现 keepalive
    学习时长: 29分6秒

46. History api 和 React Router 实现原理
    学习时长: 30分28秒

47. React Context 的实现原理和在 antd 里的应用
    学习时长: 29分46秒

48. React Context 的性能缺点和解决方案
    学习时长: 37分1秒

49. 手写一个 Zustand
    学习时长: 42分34秒

50. 原子化状态管理库 Jotai
    学习时长: 1小时8分

51. 用 react-intl 实现国际化
    学习时长: 46分23秒

52. 国际化资源包如何通过 Excel 和 Google Sheet 分享给产品经理？
    学习时长: 55分43秒

53. 基于 react-dnd 实现拖拽排序
    学习时长: 1小时47分

54. react-dnd 实战：拖拽版 TodoList
    学习时长: 1小时32分

55. React Playground 项目实战：需求分析、实现原理
    学习时长: 38分53秒

56. React Playground 项目实战：布局、代码编辑器
    学习时长: 1小时36分

57. React Playground 项目实战：多文件切换
    学习时长: 53分3秒

58. React Playground 项目实战：babel 编译、iframe 预览
    学习时长: 45分7秒

59. React Playground 项目实战：文件增删改
    学习时长: 1小时27分

60. React Playground 项目实战：错误显示、主题切换
    学习时长: 36分6秒

61. React Playground 项目实战：链接分享、代码下载
    学习时长: 19分57秒

62. React Playground 项目实战：Web Worker 性能优化
    学习时长: 25分34秒

63. React Playground 项目实战：总结
    学习时长: 16分4秒

64. 手写 Mini React：思路分析
    学习时长: 12分43秒

65. 手写 Mini React：代码实现
    学习时长: 1小时8分

66. 手写 Mini React：和真实 React 源码的对比
    学习时长: 20分49秒

67. React 18 的并发机制是怎么实现的？
    学习时长: 20分50秒

68. Ref 的实现原理
    学习时长: 29分31秒

69. 低代码编辑器：核心数据结构、全局 store
    学习时长: 46分49秒

70. 低代码编辑器：拖拽组件到画布、拖拽编辑 json
    学习时长: 1小时15分

71. 低代码编辑器：画布区 hover 展示高亮框
    学习时长: 56分

72. 低代码编辑器：画布区 click 展示编辑框
    学习时长: 1小时14分

73. 低代码编辑器：组件属性、样式编辑
    学习时长: 1小时29分

74. 低代码编辑器：预览、大纲
    学习时长: 50分13秒

75. 低代码编辑器：事件绑定
    学习时长: 50分13秒

76. 低代码编辑器：动作弹窗
    学习时长: 1小时32分

77. 低代码编辑器：自定义 JS
    学习时长: 1小时48分

78. 低代码编辑器：组件联动
    学习时长: 58分18秒

79. 低代码编辑器：拖拽优化、Table 组件
    学习时长: 43分47秒

80. 低代码编辑器：Form 组件、store 持久化
    学习时长: 35分9秒

81. 低代码编辑器：项目总结
    学习时长: 11分57秒

82. 快速掌握 React Flow 画流程图
    学习时长: 53分39秒

83. React Flow 振荡器调音：项目介绍
    学习时长: 9分36秒

84. React Flow 振荡器调音：流程图绘制
    学习时长: 43分54秒

85. React Flow 振荡器调音：合成声音
    学习时长: 1小时24分

86. AudioContext 实现在线钢琴
    学习时长: 39分21秒

87. React 服务端渲染：从 SSR 到 hydrate
    学习时长: 15分14秒

88. 小册总结
    学习时长: 10分3秒