Button包括了兩個(gè)組件，Button與ButtonGroup。

看一個(gè)組件首先看的是他的傳參也就是props，所以我們這里先看Button組件的ButtonProps

  export type ButtonType = "primary" | "ghost" | "dashed" | "danger";
  export type ButtonShape = "circle" | "circle-outline";
  export type ButtonSize = "small" | "large";

  // typescript語(yǔ)法，這里表示的是一些參數(shù)，參數(shù)后面跟上 ? 是可選參數(shù)的意思，不跟就是必須參數(shù)
  // 參數(shù)后面所跟的就是參數(shù)的類型，類型可以是自定義的類型，就如‘ButtonType’，‘ButtonShape’，‘ButtonSize’
  // 也可以是函數(shù)或者類，如React.FormEventHandler 
  // 詳情請(qǐng)看這里 https://www.tslang.cn/docs/handbook/interfaces.html
  export interface ButtonProps {
    type?: ButtonType;
    htmlType?: string;
    icon?: string;
    shape?: ButtonShape;
    size?: ButtonSize;
    onClick?: React.FormEventHandler;
    onMouseUp?: React.FormEventHandler;
    onMouseDown?: React.FormEventHandler;
    loading?: boolean | { delay?: number };
    disabled?: boolean;
    style?: React.CSSProperties;
    prefixCls?: string;
    className?: string;
    ghost?: boolean;
  }

看完其參數(shù)有哪些之后我們就直接跳過(guò)組件內(nèi)部的其他的東西，直接看他的渲染函數(shù)，畢竟這里是執(zhí)行的入口
這里順帶提一下這句代碼

// 這里的意思是將傳入兩個(gè)參數(shù)，React.Component的參數(shù)第一個(gè)是Props，第二個(gè)是state，
// 然后利用typescript的類型檢查，Props類型需要時(shí)上面定義的ButtonProps中的可選參數(shù)中的變量名
// state這里傳入任意都行
export default class Button extends React.Component

// 接下來(lái)是render()
  render() {
    // 將參數(shù)從props解構(gòu)出來(lái)
    const {
      type, shape, size = "", className, htmlType, children, icon, prefixCls, ghost, ...others,
    } = this.props;
    // 將loading和clicked兩個(gè)狀態(tài)從state解構(gòu)
    const { loading, clicked } = this.state;

    // large => lg
    // small => sm
    let sizeCls = "";
    switch (size) {
      case "large":
        sizeCls = "lg";
        break;
      case "small":
        sizeCls = "sm";
      default:
        break;
    }
    // 組建樣式
    const classes = classNames(prefixCls, className, {
      [`${prefixCls}-${type}`]: type,
      [`${prefixCls}-${shape}`]: shape,
      [`${prefixCls}-${sizeCls}`]: sizeCls,
      [`${prefixCls}-icon-only`]: !children && icon,
      [`${prefixCls}-loading`]: loading,
      [`${prefixCls}-clicked`]: clicked,
      [`${prefixCls}-background-ghost`]: ghost,
    });

    // 是否需要加載
    const iconType = loading ? "loading" : icon;
    // 是否需要添加Icon，不過(guò)官方給的是如果需要用到icon的話最好自己寫在里面

    const iconNode = iconType ?  : null; 

    const needInserted = React.Children.count(children) === 1 && (!iconType || iconType === "loading");

    // 重點(diǎn)在這里，敲黑板了
    // 這里引用了React.Children.map這個(gè)函數(shù)來(lái)對(duì)這個(gè)包裹在這個(gè)Button組件中的內(nèi)容渲染出來(lái)
    // 其中insertSpace()這個(gè)函數(shù)也有意思，這個(gè)函數(shù)主要是為了在當(dāng)組建中間寫的是中文漢字的時(shí)
    // 候給其漢字之間添加一個(gè)空格作為分隔,這里有的同學(xué)會(huì)問(wèn)為什么不用css里面的letter-space
    // 屬性，這個(gè)我也不是很清楚。。。不過(guò)他不用的話可能是是不想在英文字母中間添加空格吧

    const kids = React.Children.map(children, child => insertSpace(child, needInserted));

    return (
      
        {iconNode}{kids}
      
    );
  }

上面講到了這個(gè)函數(shù)，這里就來(lái)仔細(xì)看看是干嘛的吧

  const rxTwoCNChar = /^[u4e00-u9fa5]{2}$/;
  // 這里的bind有必要好好的理解一下
  const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
  function isString(str: any) {
    return typeof str === "string";
  }

  // Insert one space between two chinese characters automatically.
  function insertSpace(child: React.ReactChild, needInserted: boolean) {
    // Check the child if is undefined or null.
    if (child == null) {
      return;
    }
    const SPACE = needInserted ? " " : "";
    // strictNullChecks oops.
    // 這個(gè)判斷的意思是當(dāng)這個(gè)child不是字符串也不是數(shù)字并且child.type為字符串并且child的children是漢字的情況下
    // 給其加上空格，上面說(shuō)的是代碼直譯，那么代碼意譯下來(lái)就是這樣的一個(gè)情況
    // 這種情況（所以這里他才會(huì)有一個(gè)英文注釋，說(shuō)的是不是嚴(yán)格意義的檢查，啊哈哈，尷尬的實(shí)現(xiàn)方法）
    // 
    //   
你好啊
    // 
    // 這里說(shuō)明一下，child.type以及child.props.children是react在渲染的時(shí)候會(huì)給虛擬dom添加的一些屬性，如圖
    if (typeof child !== "string" && typeof child !== "number" &&
      isString(child.type) && isTwoCNChar(child.props.children)) {
      return React.cloneElement(child, {},
        child.props.children.split("").join(SPACE));
    }
    // 這種情況就很明了了 就是Button組件中寫的漢字
    if (typeof child === "string") {
      if (isTwoCNChar(child)) {
        child = child.split("").join(SPACE);
      }
      return {child};
    }
    return child;
  }

剩下的都是一些簡(jiǎn)單的東西，也沒有什么可以講的了

  import React from "react";
  import PropTypes from "prop-types";
  import classNames from "classnames";
  import omit from "omit.js";
  import Icon from "../icon";
  import Group from "./button-group";

  const rxTwoCNChar = /^[u4e00-u9fa5]{2}$/;
  const isTwoCNChar = rxTwoCNChar.test.bind(rxTwoCNChar);
  function isString(str: any) {
    return typeof str === "string";
  }

  // Insert one space between two chinese characters automatically.
  function insertSpace(child: React.ReactChild, needInserted: boolean) {
    // Check the child if is undefined or null.
    if (child == null) {
      return;
    }
    const SPACE = needInserted ? " " : "";
    // strictNullChecks oops.
    if (typeof child !== "string" && typeof child !== "number" &&
      isString(child.type) && isTwoCNChar(child.props.children)) {
      return React.cloneElement(child, {},
        child.props.children.split("").join(SPACE));
    }
    if (typeof child === "string") {
      if (isTwoCNChar(child)) {
        child = child.split("").join(SPACE);
      }
      return {child};
    }
    return child;
  }

  export type ButtonType = "primary" | "ghost" | "dashed" | "danger";
  export type ButtonShape = "circle" | "circle-outline";
  export type ButtonSize = "small" | "large";

  export interface ButtonProps {
    type?: ButtonType;
    htmlType?: string;
    icon?: string;
    shape?: ButtonShape;
    size?: ButtonSize;
    onClick?: React.FormEventHandler;
    onMouseUp?: React.FormEventHandler;
    onMouseDown?: React.FormEventHandler;
    loading?: boolean | { delay?: number };
    disabled?: boolean;
    style?: React.CSSProperties;
    prefixCls?: string;
    className?: string;
    ghost?: boolean;
  }

  export default class Button extends React.Component {
    // 這里這樣子寫只是為了方便這樣子寫B(tài)utton.Group來(lái)引用ButtonGroup這個(gè)組件，下一節(jié)將會(huì)講解這個(gè)組件
    static Group: typeof Group;
    static __ANT_BUTTON = true;

    static defaultProps = {
      prefixCls: "ant-btn",
      loading: false,
      clicked: false,
      ghost: false,
    };

    static propTypes = {
      type: PropTypes.string,
      shape: PropTypes.oneOf(["circle", "circle-outline"]),
      size: PropTypes.oneOf(["large", "default", "small"]),
      htmlType: PropTypes.oneOf(["submit", "button", "reset"]),
      onClick: PropTypes.func,
      loading: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
      className: PropTypes.string,
      icon: PropTypes.string,
    };

    timeout: number;
    delayTimeout: number;

    constructor(props: ButtonProps) {
      super(props);
      this.state = {
        loading: props.loading,
      };
    }

    componentWillReceiveProps(nextProps: ButtonProps) {
      const currentLoading = this.props.loading;
      const loading = nextProps.loading;

      if (currentLoading) {
        clearTimeout(this.delayTimeout);
      }

      if (typeof loading !== "boolean" && loading && loading.delay) {
        this.delayTimeout = setTimeout(() => this.setState({ loading }), loading.delay);
      } else {
        this.setState({ loading });
      }
    }

    // 在組件銷毀的時(shí)候一定要記得將定時(shí)器也一同銷毀
    componentWillUnmount() {
      if (this.timeout) {
        clearTimeout(this.timeout);
      }
      if (this.delayTimeout) {
        clearTimeout(this.delayTimeout);
      }
    }

    handleClick = (e: React.MouseEvent) => {
      // Add click effect
      this.setState({ clicked: true });
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => this.setState({ clicked: false }), 500);

      const onClick = this.props.onClick;
      if (onClick) {
        onClick(e);
      }
    }

    render() {
      const {
        type, shape, size = "", className, htmlType, children, icon, prefixCls, ghost, ...others,
      } = this.props;

      const { loading, clicked } = this.state;

      // large => lg
      // small => sm
      let sizeCls = "";
      switch (size) {
        case "large":
          sizeCls = "lg";
          break;
        case "small":
          sizeCls = "sm";
        default:
          break;
      }

      const classes = classNames(prefixCls, className, {
        [`${prefixCls}-${type}`]: type,
        [`${prefixCls}-${shape}`]: shape,
        [`${prefixCls}-${sizeCls}`]: sizeCls,
        [`${prefixCls}-icon-only`]: !children && icon,
        [`${prefixCls}-loading`]: loading,
        [`${prefixCls}-clicked`]: clicked,
        [`${prefixCls}-background-ghost`]: ghost,
      });

      const iconType = loading ? "loading" : icon;
      const iconNode = iconType ?  : null;
      const needInserted = React.Children.count(children) === 1 && (!iconType || iconType === "loading");
      const kids = React.Children.map(children, child => insertSpace(child, needInserted));

      return (
        
          {iconNode}{kids}
        
      );
    }
  }