读读antd源码之通用组件

最新推荐文章于 2025-06-12 13:31:43 发布
最新推荐文章于 2025-06-12 13:31:43 发布
阅读量2.5k 收藏 30
点赞数 24
CC 4.0 BY-SA版权
文章标签： 前端 javascript ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ershing/article/details/123024815
本文深入探讨了Ant Design（antd）组件库中的通用组件，包括Button、Icon和Typography。从设计思想到具体实现，文章详细分析了Button的点击反馈动效、Icon的图标封装以及Typography的文本处理。通过对源码的阅读，揭示了antd组件背后的逻辑处理和技术实现。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

① 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再看；

Configcontext是一个全局配置的上下文，使用了React.createC

最低0.47元/天 解锁文章

200万优质内容无限畅学
前端络绎
关注
读读antd源码之导航组件
ershing的博客
04-03 3223
① 高内聚低耦合 如何抽离为一个组件，也是一个很重要的问题 无论是基础组件，还是业务组件，很多时候，对于很多的开发者，其实都没有十分清晰的边界。 甚至开发着，开发着，不同组件之间又会形成互相依赖了。 antd的源码本身，很多功能也是单独抽出来了一个仓库：https://github.com/orgs/react-component/repositories，这个库会提供更基础功能的封装，后面阅读的各项组件，会越来越多依赖这个库。 这篇文章将会对antd的导航部分的组件进行源码阅读： ② Affi
antd 源码 学习(进行中...)
qq_37653449的博客
03-10 4994
因为之前自己也封装过通用组件库并上传到npm, 所以惯性驱使下直接打开了node_modules 目录 下antd的 代码翻看 可以看到如下目录结构 ├── dist ├── es ├── lib ├── node_modules ├── CHANGELOG.en-US.md ├── CHANGELOG.zh-CN.md ├── package.json ├── README....
antd组件
hhnail7799的博客
10-09 671
一、可选择和操作表格 类式 -> 函数式组件 import {Component, useState} from "react"; import {Table, Button} from 'antd'; const columns = [ { title: 'Name', dataIndex: 'name', }, { title: 'Age', dataIndex: 'age', }, {
手写Antd的form组件源码
最新发布
m0_51429350的博客
06-12 571
模块功能Form表单容器，管理整体状态FormItem表单项，管理单个字段的状态和验证useForm创建和管理表单实例FormStore表单数据存储useField管理字段的状态和验证提供全局表单配置如果你希望进一步了解某个具体模块（如useField或FormStore的实现细节），可以继续深入查看 Ant Design 的源码仓库或官方文档。
js的通用组件
mengxiangzhou的专栏
09-22 1097
/**  */ var PublicUtil = {     //提示框类型     alertType: {         warnType: 0,         okType: 1     },     //alert提示框     alertWindow: function (alertType, title, msg, okBtnText, okFunctio
下载通用组件
Scorpio_Capricorn的博客
07-09 191
import java.lang.annotation.*; @Retention(RetentionPolicy.RUNTIME) @Inherited @Target({ElementType.FIELD}) public @interface EnumOptions { Class<?> EnumType(); String customEnumEleme...
折叠面板组件的设计与实现
m0_63247283的博客
06-23 1713
NutUI，大家应该不陌生吧 [鬼脸]，前端开发的同学肯定是有些了解的。NutUI 是一个京东风格的移动端组件库，使用 Vue 语言来编写可以在 H5，小程序平台上的应用。目前 NutUI 拥有 70+ 组件，支持按需引用，支持 TypeScript，支持定制主题等功能，当然也支持最新的 Vue3 语法，在开发上能有效帮助研发人员提升效率，改善开发体验。言归正传，今天我们一起了解 NutUI 中折叠面板 Collapse 的实现与设计，以及在开发过程中学习到的新知识点。...
从0到1教你搭建前端团队的组件系统（高级进阶必备）
趣谈前端
02-20 3302
前言随着vue/react这类以数据驱动为主的web框架的不断完善和壮大，越来越多的前端团队开始着手搭建内部的组件库。虽然目前市面上已经有很多功能强大且完善的组件库供我们使用，比如基于r...
151. 精读《@umijs/use-request》源码
前端精读周刊
05-18 1169
1 引言与组件生命周期绑定的 Utils 非常适合基于 React Hooks 来做，比如可以将 “发请求” 这个功能与组件生命周期绑定，实现一些便捷的功能。这次以@umijs/use...
史上最简单的Ant-Design换肤方案
weixin_33861800的博客
06-17 6736
先看成果 线上预览地址：Dynamic-Antd-Theme-Demo 看起来是不是还可以，如果你知道如何使用，相信你会更觉得我不是一个标题党。 // 如何使用 import DynamicAntdTheme from 'dynamic-antd-theme'; render() { ... <DynamicAntdTheme /> ... } 复制代码...
通用选择组件
m0_37939797的博客
06-12 142
通用选择组件（主要用于弹出对话框，选中显示数据表格的某一行，在点击确认按钮后，获取相关的数据进行填充，避免输入错误）
功能强大的通用组件库
03-16
一个通用的组件库。可以：读写注册表、重启系统、设置程序在启动时自动运行、取操作系统类型和版本信息、像 Windows 一样批量的拷贝文件、将文件删除到回收站、播放多媒体文件、取域名、域下的所有组和用户、启动停止服务、RAS 自动拨号、创建 IIS 虚拟目录、获取当前系统中所有运行的程序窗口、移动关闭窗口、执行鼠标操作、在任务栏托盘中增加小图标等等。 如果在下载过程或其他地方中有什么问题，请和我联系：cui[email protected]
通用组件-2021-08-21
MichaelAn的博客
02-13 139
通用组件-2021-08-21 设计原则 单一职责：选择合适的粒度(例如输入框，选择框) 通用性：选择器是否支持筛选，是否支持输入；下拉菜单中是否支持子菜单，是否支持不能点的项目等 低耦合高内聚：避免依赖外部结构 行为明确：组件的形态(DOM结构)永远是千变万化的,但是其行为(逻辑)是固定的,因此通用组件的秘诀之一...
AntD表单自定义组件
宝子的博客
11-16 963
表单可以说是前端最常见的一种组件，特别是在进行搜索的时候使用的最频繁，自定义表单组件，丰富了搜索框的类型，使数据展现的更灵活。
antd组件相关
qq_43614010的博客
05-06 199
antd组件，时间区域的限制。 /* ========时间限制区间======= */ const disabledDate = (current) => { if (!dates || dates.length === 0) { return current > moment().endOf("days"); } const tooLate = (dates[0] && current > moment(dates[0]).ad
antd框架--页面组件
weixin_44320857的博客
11-29 546
坑：多个页面调用同一个页面组件时，不进行重新渲染的问题，需要将路由中注册的name同样声明在vue的调用页面中。路由：router.config.js。
通用组件示例
weixin_33739646的博客
03-30 269
实现一个需求很容易，难的是代码的框架，我们应该让它后期的维护变得简单 titlebar base初始化 private void initBar(TitleBar titleBar) { StatusBarManager.translucentStatusBar(this, titleBar); ...
React中使用Antd组件，直接上干货
m0_57473261的博客
03-30 1950
javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。
React中使用Antd组件，技术详细介绍
m0_60732644的博客
03-17 1427
资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。)][外链图片转存中…(img-5DOhRc0Z-1710690561854)]资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值