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的交互與動畫。此組件比較簡單，有興趣的童鞋能夠繼續查看該系列接下來的文章