antd 英文_Antd源码浅析之Icon组件

前言

最近在写B端的项目，用到了Ant Design ，清爽而优雅。故想深入源码了解一二，但鉴于技术浅薄，不敢深究，故写浅析，不喜勿喷，对其中的组件做一些分析，主要目的有两个：

• 学习 Ant Design 的工程设计思路
• 思考怎样写出优秀的 React 组件

本文是基于 Ant Design3.4.4 的源码分析，读者需要具备基本的 JavaScript、React 知识，对于Antd（以下用Antd表示Ant Design），蚂蚁官网给出的定位是"一个服务于企业级产品的设计体系"，确实，我们的实际使用场景，大多是写一些后台页面，如 CMS 。当下的 Antd 比之 React ，就像 Bootstrap 比之 jQuery ，同样Vue也不乏有 Element UI 之类的搭档。

Antd源码 是基于 Typescript（系出微软，是 JavaScript 的一个类型超集，包含它自己的编译器，是一种类型化语言），如果有阅读过 Vue 源码的的同学肯定也会发现，Vue 中使用了 Flow来做同样的事，即静态类型检查。JavaScript 是弱类型语言，很多大型库都加入了 Flow 或者 Typescript，严谨为之。

目录结构

打开Antd源码目录，结构还是比较简洁：

平时所用到的组件全部位于 components 文件夹下，首先我们分析一个简单的组件 Icon，打开 components/icon ，目录结构如下：

这里不得不说Antd的文档是很友好的，目录内的以 .md 结尾的文件给出了中英文的使用说明，也就是我们在在其官网看到的说明文档。

代码

Icon的核心代码位于 index.tsx 内，这里说明一下，对于不熟悉Typescript的同学来说这个文件类型可能有些陌生，Typescript主要是丰富了JavaScript的内容和加入了静态类型检查，一般的Typescript文件是以 .ts 结尾，但相对于React的jsx文件，Typescript产生了 .tsx 的文件，其实就是Typescript的jsx写法，实际生产环境中，最终都要编译成 .js 文件。

以下是Icon组件中 index.tsx 的全部源码：

import * as React from 'react';
import classNames from 'classnames