本文深入探讨了Ant Design（antd）组件库中的通用组件，包括Button、Icon和Typography。从设计思想到具体实现，文章详细分析了Button的点击反馈动效、Icon的图标封装以及Typography的文本处理。通过对源码的阅读，揭示了antd组件背后的逻辑处理和技术实现。
① ui组件库
如果说ui开发框架是高速的生产线，那么ui组件库就是一成套模具，大大提高了生产效率。
ui组件库无论对设计风格、基础功能、操作交互等都做了高度的统一，为项目开发提供了开箱即用的便捷。在React领域，中后台项目用的较多的ui组件库，非 Ant Design（antd）莫属了。
这里准备对 antd 组件库进行一系列的源码分享，看看我们习以为常的功能背后是做了怎样的逻辑处理。
阅读的过程，会遵循前面分享的《阅读前端源码的思路》，文章忽略具体细节，直接分享重点。
② 组件的逼格
一个没有设计理念的ui组件库，都不好意思说是ui组件库
看下官方文档，可以看到第一个栏目是“设计”，可想而之ui组件库的灵魂就是设计，它包含自身的价值观和模式，也遵循一系列的规范。
再展开一下“组件”栏目，可以看到左侧菜单是对组件进行了分类的，包括有：
- 通用组件
- 布局组件
- 导航组件
- 数据录入组件
- 数据展示组件
- 反馈组件
- 其他组件
这篇文章，先分享阅读的第1个，通用组件的源码。
③ 一个一个来
关注你想关注的
通用组件包含三个：Button，Icon，Typography。
这里先看下文档关于这几个组件，看下有什么值得思考的功能。
可以看到，一些类型，状态等展示的基本根据props来切换，没必要深究。
关于Button，这里感觉有些看点的是点击动作的反馈，外围波浪散开的动效。
关于Icon，可以关注下它内部是如何封装图标的引用。
关于Typography，可以关注下它内容一些文本处理或功能的封装。
④ 说干就干
说实话，antd的组件源码比较乱
拉源码打开components文件夹，可以找到button组件，只有三百行代码，可以完整看一下，先看看前面的引用
omit方法就是剔除对象中某个键值对；
Group就是为了挂载在Button的button-group，可以看完button再看&#x
最低0.47元/天 解锁文章
4801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
