Ant Design源码分析（一）：Icon组件

• 提笔前言

  工作中结合Ant Design开发React项目已经有一段时间了，最近开始阅读Ant Design的源码，略有收获。现在整理一下阅读源码过程中的一些记录与心得。文中如有解释不准确的地方，欢迎指出，欢迎拍砖，文明用语，谢~

• Ant简介

  Ant Design（以下简称为Antd）是基于React的UI库，不仅提供了各种常用组件，还提供了大量的设计规范指导。而本系列文章是从Antd的各个组件来揣摩下作者大大们的思路，先从最最基本的UI组件：Icon开始

• Icon分析

  Antd的源码采用了TypeScript（JavaScript的超集，以下简称TS），阅读源码是需要一些的TS的基础知识的，链接在此TS手册指南

• 源码分析

import React from 'react'; 不清楚它为什么能直接这么引用react的？  我们引用是import React as * 
from 'react; 有人清楚的话望不吝指教，
import classNames from 'classnames';  
import omit from 'omit.js';
//React就不用说了，classNames与omit这两个文件的作用：
//前者是条件判断输出className的值，后者是移出对象的指定属性，而实现浅拷贝
//这两个依赖API很简单，就不多说了，有兴趣的可以自己去github上看一下：
//omit https://github.com/benjycui/omit.js， 需要注意的是retruns the new Object 与lodash中的
//omit类似
//classnames  https://github.com/JedWatson/classnames

//定义IconProps接口
export interface IconProps {
  type: string;  //配合className，决定了显示的类型
  className?: string;
  title?: string;
  onClick?: React.MouseEventHandler<any>; //接口里定义了的事件，虽然没有定义其它事件，但是也是可以
//加的，只不过编译阶段可能报错， 另外，这个MouseEventHandler难道是自己随意起的名字，再定义为any？应该
//不是吧？要不然为什么会前面是React
  spin?: boolean;  //  结合对应的className，控制icon旋转
  style?: React.CSSProperties;
}

const Icon = (props: IconProps) => {//TypeScript的无状态组件的写法
  const { type, className = '', spin } = props;
  const classString = classNames({
    anticon: true,
    'anticon-spin': !!spin || type === 'loading',
    [`anticon-${type}`]: true,
  }, className);

  // 这里说一下为什么要用omit()：html的<i>标签，其标准标签属性只有六种：id、class、title、style、
dir、lang。
  // IconProps接口中的6种属性（方法），type、spin不属于上述六种。onClick为事件属性，可以；
  return <i {...omit(props, ['type', 'spin'])} className={classString} />;
};

export default Icon;

Icon是Antd中最小的组件，作者大大们通过css来定义了Icon的交互与动画。此组件比较简单，有兴趣的童鞋可以继续查看该系列接下来的文章