Antd 组件源码解析：Button 与 Card 组件实现

前言

这一讲，我们来探讨一下antd组件的内部一些源代码的实现，来帮助大家阅读组件库源代码，更多的启发大家看源代码的方式！

先介绍大家一款看github源代码的工具，它就是这个 github1s ，名字有点奇怪哈，但是确实实用性很强。   

具体的方法就是在源码仓库后缀上加上一个1s就能够以vscode类似的方式查看这个这个仓库的源码。其提供的可折叠式公斤，对我们阅读还是有帮助的，如果你需要对源码进行调试，那么还是离不开clone源码哈、

在正式的开始阅读antd的源代码前，我们先看一下项目结构

实际上也没有多少，我们这里讲一下主要的配置哈

Button组件的封装

关于button的封装，我们直接入主题，先看一些我们这里的源码,我们呢，主要分析三个组件，虽然说是三个实际上也就一个就是button就没了

,

先来看一些别人写的文档,看一下文档很重要，这可以让你理解作者的意图

index.tsx

这个组件使用了组件设计模式中的 组件代理模式

button

我们先理清楚，组件内部的一些方法分别是做什么事的

其中的一些不涉及核心的地方我们就略过，我们直接看最核心的部分    

我们进入的组件中，进行分析

button-group

Card组件的封装

与button同理

来看一个套壳的山寨阿里antd哈

国内一个it外包企业。汉得 详见github哈https://github.com/open-hand