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的交互与动画。此组件比较简单，有兴趣的童鞋能够继续查看该系列接下来的文章