• Babel 插件通关秘籍
  • Git 原理详解及实用指南
  • Nest 通关秘籍
  • React 通关秘籍
  • TypeScript 全面进阶指南
  • TypeScript 类型体操通关秘籍
  • 现代CSS
  • Babel 插件通关秘籍
  • Git 原理详解及实用指南
  • Nest 通关秘籍
  • React 通关秘籍
  • TypeScript 全面进阶指南
  • TypeScript 类型体操通关秘籍
  • 现代CSS
  • React 通关秘籍

    • 1.关于本小册
    • 2.一网打尽组件常用Hook
    • 3.Hook的闭包陷阱的成因和解决方案
    • 4.React组件如何写TypeScript类型
    • 5.React组件如何调试
    • 6.受控模式VS非受控模式
    • 7.组件实战:迷你Calendar
    • 8.组件实战:Calendar日历组件(上)
    • 9.组件实战:Calendar日历组件(下)
    • 10.快速掌握Storybook
    • 11.React组件如何写单测
    • 12.深入理解Suspense和ErrorBoundary
    • 13.组件实战:Icon图标组件
    • 14.组件实战:Space间距组件
    • 15.React.Children和它的两种替代方案
    • 16.三个简单组件的封装
    • 17.浏览器的5种Observer
    • 18.组件实战:Watermark防删除水印组件
    • 19.手写react-lazyload
    • 20.图解网页的各种距离
    • 21.自定义hook练习
    • 22.自定义hook练习(二)
    • 23.用react-spring做弹簧动画
    • 24.react-spring结合use-gesture手势库实现交互动画
    • 25.用react-transition-group和react-spring做过渡动画
    • 26.快速掌握Tailwind:最流行的原子化CSS框架
    • 27.用CSSModules避免样式冲突
    • 28.CSSInJS:快速掌握styled-components
    • 29.react-spring实现滑入滑出的转场动画
    • 30.组件实战:Message全局提示组件
    • 31.组件实战:Popover气泡卡片组件
    • 32.项目里如何快速定位组件源码
    • 33.一次超爽的React调试体验
    • 34.组件实战:ColorPicker颜色选择器(一)
    • 35.组件实战:ColorPicker颜色选择器(二)
    • 36.组件实战:onBoarding漫游式引导组件
    • 37.组件实战:Upload拖拽上传
    • 38.组件实战:Form表单组件
    • 39.React组件库都是怎么构建的
    • 40.组件库实战:构建esm和cjs产物,发布到npm
    • 41.组件库实战:构建umd产物,通过unpkg访问
    • 42.数据不可变:immutable和immer
    • 43.基于ReactRouter实现keepalive
    • 44.Historyapi和ReactRouter实现原理
    • 45.ReactContext的实现原理和在antd里的应用
    • 46.ReactContext的性能缺点和解决方案
    • 47.手写一个Zustand
    • 48.原子化状态管理库Jotai
    • 49.用react-intl实现国际化
    • 50.国际化资源包如何通过Excel和GoogleSheet分享给产品经理
    • 51.基于react-dnd实现拖拽排序
    • 52.react-dnd实战:拖拽版TodoList
    • 53.ReactPlayground项目实战:需求分析、实现原理
    • 54.ReactPlayground项目实战:布局、代码编辑器
    • 55.ReactPlayground项目实战:多文件切换
    • 56.ReactPlayground项目实战:babel编译、iframe预览
    • 57.ReactPlayground项目实战:文件增删改
    • 58.ReactPlayground项目实战:错误显示、主题切换
    • 59.ReactPlayground项目实战:链接分享、代码下载
    • 60.ReactPlayground项目实战:WebWorker性能优化
    • 61.ReactPlayground项目实战:总结
    • 62.手写MiniReact:思路分析
    • 63.手写MiniReact:代码实现
    • 64.手写MiniReact:和真实React源码的对比
    • 65.React18的并发机制是怎么实现的
    • 66.Ref的实现原理
    • 67.低代码编辑器:核心数据结构、全局store
    • 68.低代码编辑器:拖拽组件到画布、拖拽编辑json
    • 69.低代码编辑器:画布区hover展示高亮框
    • 70.低代码编辑器:画布区click展示编辑框
    • 71.低代码编辑器:组件属性、样式编辑
    • 72.低代码编辑器:预览、大纲
    • 73.低代码编辑器:事件绑定
    • 74.低代码编辑器:动作弹窗
    • 75.低代码编辑器:自定义JS
    • 76.低代码编辑器:组件联动
    • 77.低代码编辑器:拖拽优化、Table组件
    • 78.低代码编辑器:Form组件、store持久化
    • 79.低代码编辑器:项目总结
    • 80.快速掌握ReactFlow画流程图
    • 81.ReactFlow振荡器调音:项目介绍
    • 82.ReactFlow振荡器调音:流程图绘制
    • 83.ReactFlow振荡器调音:合成声音
    • 84.AudioContext实现在线钢琴
    • 85.React服务端渲染:从SSR到hydrate
    • 86.小册总结

React 是主流前端框架,国内外很多大厂都在用 React。

市面上 React 的资料并不少,但它们或者是讲基础、或者是讲原理,讲如何写组件、组件库的比较少。

诚然,原理很重要,知道 React 源码是怎么运行的能够帮我们更好的掌握 React。但我们绝大多数时间还是在写一个个具体的组件,或者用一些三方的组件库。

你知道 Calendar 组件、Table 和 Form 组件、虚拟列表组件等这些常用的组件是怎么写的呢?或者如果让你写一个组件库,要考虑哪些问题呢?

这些才是我们日常工作用到的,可以写在简历上、面试的时候谈的东西。

市面上讲写组件和组件库的资料比较少,而这些组件实战就是这本小册主打的。

我们会写 Calender、Table、Form、Space、ColorPicker 等各种类型的组件,然后自己实现构建脚本、把它封装成一个类似 ant design、arco design 的组件库。

Calendar 组件:

Message 组件:

Watermark 组件:

Upload 组件:

React 的流行不只是因为 React 本身,很大一部分也是因为它的生态,React 的生态包罗万象,各种解决方案都有。

我们还会学习 CSS Modules、CSS in JS、Tailwind 等样式管理方案,学习 react-spring、react-transition-group、framer-motion、react-motion 等动画库、学习 react-dnd 来做拖拽,还有 redux、jotai、zustand 等状态管理库。

写过各种组件、学完 React 生态的库之后,我们也会深入下源码,了解 React 的渲染流程,各种 api 的实现原理,并且实现一个简易版 React。

此外,我们还会做很多实战项目:

比如 playground:

低代码编辑器:

React Flow 项目:

2024-08-30 08.24.31.gif

如何掌握好 React 呢?

我觉得就是这两方面:一方面是 React 之上,学会写各种组件,并且能把这些组件封装成一个组件库、学习各种 React 相关的库。一方面是 React 之下,能够自己调试源码,知道 React 是怎么运行的,能够实现一个简易版 React。

这两方面都掌握到一定程度,React 技术栈就算是通关了。

上次更新: 6/21/25, 9:42 AM
贡献者: YNight
Next
2.一网打尽组件常用Hook