外观
第01章—关于本小册
776字约3分钟
2024-09-19
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 项目:
如何掌握好 React 呢?
我觉得就是这两方面:一方面是 React 之上,学会写各种组件,并且能把这些组件封装成一个组件库、学习各种 React 相关的库。一方面是 React 之下,能够自己调试源码,知道 React 是怎么运行的,能够实现一个简易版 React。
这两方面都掌握到一定程度,React 技术栈就算是通关了。