读读antd源码之通用组件

① ui组件库

如果说ui开发框架是高速的生产线，那么ui组件库就是一成套模具，大大提高了生产效率。

ui组件库无论对设计风格、基础功能、操作交互等都做了高度的统一，为项目开发提供了开箱即用的便捷。在React领域，中后台项目用的较多的ui组件库，非 Ant Design（antd）莫属了。

这里准备对 antd 组件库进行一系列的源码分享，看看我们习以为常的功能背后是做了怎样的逻辑处理。

阅读的过程，会遵循前面分享的《阅读前端源码的思路》，文章忽略具体细节，直接分享重点。

② 组件的逼格

一个没有设计理念的ui组件库，都不好意思说是ui组件库

看下官方文档，可以看到第一个栏目是“设计”，可想而之ui组件库的灵魂就是设计，它包含自身的价值观和模式，也遵循一系列的规范。

再展开一下“组件”栏目，可以看到左侧菜单是对组件进行了分类的，包括有：

1. 通用组件
2. 布局组件
3. 导航组件
4. 数据录入组件
5. 数据展示组件
6. 反馈组件
7. 其他组件

这篇文章，先分享阅读的第1个，通用组件的源码。

③ 一个一个来

关注你想关注的

通用组件包含三个：Button，Icon，Typography。

这里先看下文档关于这几个组件，看下有什么值得思考的功能。

可以看到，一些类型，状态等展示的基本根据props来切换，没必要深究。

关于Button，这里感觉有些看点的是点击动作的反馈，外围波浪散开的动效。

关于Icon，可以关注下它内部是如何封装图标的引用。

关于Typography，可以关注下它内容一些文本处理或功能的封装。

④ 说干就干

说实话，antd的组件源码比较乱

拉源码打开components文件夹，可以找到button组件，只有三百行代码，可以完整看一下，先看看前面的引用

omit方法就是剔除对象中某个键值对；

Group就是为了挂载在Button的button-group，可以看完button再看&#x