年底正式总结的好时机，Button 组件的源码。
Button 分析
通过官方 API 文章，大家知道 <Button /> 组件具备以下几个功能点 1、多种样式风格可选: primary、ghost、danger 等，并且每一种风格都对应各自风格的交互 2、接收 click 事件回调函数 3、可以指定点击跳转指定的 url4、可以控制图标旋转，模拟请求状态 pending
源码如下
import * as React from ‘react’;
import {findDOMNode} from ‘react-dom’;
import * as PropTypes from ‘prop-types’;
import classNames from ‘classnames’;
/* 引入了一个系的模块 Wave，可能是功能函数，可能是组件，先不管它是什么，用到时再回来看 */
import Wave from ‘../_util/wave’;
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’;
}
// 组件逻辑函数：在两个中文字符间插入一个空格
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 <span>{child}</span>;
}
return child;
}
/* 联合类型 Button.props 中 type、shape、size、htmlType 的取值范围 */
export type ButtonType = ‘default’ | ‘primary’ | ‘ghost’ | ‘dashed’ | ‘danger’;
export type ButtonShape = ‘circle’ | ‘circle-outline’;
export type ButtonSize = ‘small’ | ‘default’ | ‘large’;
export type ButtonHTMLType = ‘submit’ | ‘button’ | ‘reset’;
/* 定义接口 相当于 props-types */
export interface BaseButtonProps {
type?: ButtonType;
icon?: string;
shape?: ButtonShape;
size?: ButtonSize;
loading?: boolean | {delay?: number};
prefixCls?: string;
className?: string;
ghost?: boolean;
block?: boolean;
children?: React.ReactNode;
}
export type AnchorButtonProps = {
href: string;
target?: string;
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
} & BaseButtonProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
export type NativeButtonProps = {
htmlType?: ButtonHTMLType;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
} & BaseButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
export type ButtonProps = AnchorButtonProps | NativeButtonProps;
export default class Button extends React.Component<ButtonProps, any> {
static Group: typeof Group;
static __ANT_BUTTON = true;
static defaultProps = {
prefixCls: ‘ant-btn’,
loading: false,
ghost: false,
block: 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,
block: PropTypes.bool,
};
private delayTimeout: number;
constructor(props: ButtonProps) {
super(props);
this.state = {
/** 控制 Button 中 Icon 来旋转，通常应用在异步请返回之前的场景中，比如提交表单，请求结束前让 Icon 旋转，可以使得体验更好，用来实现文章开头时所描述的功能 4 */
loading: props.loading,
/** 作为子元素中是否有两个中文字符的标识符，以此作为是否插入空格的标识符 */
hasTwoCNChar: false,
};
}
componentDidMount() {
this.fixTwoCNChar();
}
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 = window.setTimeout(() => this.setState({ loading}), loading.delay);
} else {
this.setState({loading});
}
}
componentDidUpdate() {
this.fixTwoCNChar();
}
componentWillUnmount() {
if (this.delayTimeout) {
clearTimeout(this.delayTimeout);
}
}
fixTwoCNChar() {
// Fix for HOC usage like <FormatMessage />
const node = (findDOMNode(this) as HTMLElement);
const buttonText = node.textContent || node.innerText;
if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
if (!this.state.hasTwoCNChar) {
this.setState({
hasTwoCNChar: true,
});
}
} else if (this.state.hasTwoCNChar) {
this.setState({
hasTwoCNChar: false,
});
}
}
handleClick: React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement> = e => {
const {onClick} = this.props;
if (onClick) {
(onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)(e);
}
}
isNeedInserted() {
const {icon, children} = this.props;
return React.Children.count(children) === 1 && !icon;
}
render() {
/** 通过 Props 来生成不同的 className 而达到不同的效果，有兴趣的可以研究下样式 */
const {
type, shape, size, className, children, icon, prefixCls, ghost, loading: _loadingProp, block, …rest
} = this.props;
const {loading, hasTwoCNChar} = this.state;
/* 通过 size 控制按钮的大小尺寸 */
let sizeCls = ”;
switch (size) {
case ‘large’:
sizeCls = ‘lg’;
break;
case ‘small’:
sizeCls = ‘sm’;
default:
break;
}
/* Antd 圣诞彩蛋事件代码，每年 12.25 搞一次，UI 变换思路依旧是通过 props.someKey 配合不同的 className 来实现 */
/* 修复方式 https://github.com/ant-design/ant-design/issues/13848*/
const now = new Date();
const isChristmas = now.getMonth() === 11 && now.getDate() === 25;
/** 通过 Props 来生成不同的 className 而达到不同的 UI 效果吗，有兴趣的可以研究下样式 */
const classes = classNames(prefixCls, className, {
[`${prefixCls}-${type}`]: type,
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-${sizeCls}`]: sizeCls,
[`${prefixCls}-icon-only`]: !children && icon,
[`${prefixCls}-loading`]: loading,
[`${prefixCls}-background-ghost`]: ghost,
[`${prefixCls}-two-chinese-chars`]: hasTwoCNChar,
[`${prefixCls}-block`]: block,
christmas: isChristmas,
});
const iconType = loading ? ‘loading’ : icon;
const iconNode = iconType ? <Icon type={iconType} /> : null;
const kids = (children || children === 0)
? React.Children.map(children, child => insertSpace(child, this.isNeedInserted())) : null;
const title= isChristmas ? ‘Ho Ho Ho!’ : rest.title;
/* 可以指定按钮跳转地址，实现功能 3 */
if (‘href’ in rest) {
return (
<a
{…rest}
className={classes}
onClick={this.handleClick}
title={title}
>
{iconNode}{kids}
</a>
);
} else {
// 这里的注释的意思是 React 不推荐在 DOM element 上使用‘htmlType’ 这个属性，因此在前面的 IProps 接口中，没有定义 htmlType，但仍可以使用
// 在 ES6 与 React，通常使用（剩余参数）这种方式可以扩展组件的 IProps 接口
// React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
const {htmlType, …otherProps} = rest;
/**
* 这里出现了开头的的外部依赖 Wave，看到这种写法，对 React 组件设计比较熟悉的应该能猜到这个 Wave 是做什么的了，没错 Wave 是容器组件
* React 推崇的是组件化开发，经过这些年的发展与沉淀，有两个关键词越来越活跃：`compose` 与 `recompose`，看过设计模式的知道，良好的软件设计因该是组合优于继承的，这两个关键词也是这个思路
* 为了提高组件的可复用性，社区同时提出了几种 React 组件的设计思路 HOC、Render Callback、容器组件与展示组件等
* 组件拆分的目的是为了复用，复用什么呢？通常是是 UI 逻辑
* 这里我们先不去关注关注这个 Wave 是做什么的，我们只需要知道此时，返回一个 <button><button> 即可，我们在下一篇文章中去看下这个 Wave 组件，这里我
* 这里我们只需要知道返回了一个 button DOM 元素，可以接收 className、click 事件、可以指定点击时跳转到指定 url，
* */
return (
<Wave>
<button
{…otherProps}
type={htmlType || ‘button’}
className={classes}
onClick={this.handleClick}
title={title}
>
{iconNode}{kids}
</button>
</Wave>
);
}
}
}
分析过 `<Button />` 组件，再结合之前的 `<Icon />` 组件，我们其实可以发现一些 Antd 的一点设计模式（经过两年的 React 项目踩坑，回过头来看时，发现 React 社区中存在着大量的设计模式），将之成为 `Control CSS with Props`，后面简称为 `CCP`。
在以前 JQuery + CSS 横扫各大浏览器的时候，大家写 CSS 时已经注意到了复用的便利性，下面的代码，前端开发人员肯定写过，我们来看下面这段 css 代码
// 抽取出一个组件的样式
.btn {
display: inline-block;
font-weight: @btn-font-weight;
text-align: center;
touch-action: manipulation;
cursor: pointer;
background-image: none;
border: @border-width-base @border-style-base transparent;
white-space: nowrap;
.button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
user-select: none;
transition: all .3s @ease-in-out;
position: relative;
box-shadow: 0 2px 0 rgba(0, 0, 0, .015);
}
// 在此基础上变形，与扩展
.btn-danger{
color: red;
}
.btn-primary{
background: blue;
}
相信上面这段代码对前端开人员来说，如果放到 `html + css` 中，如喝水吃饭一样习以为常，不过是之前的模式在 React 中经过了变化，此模式将在后面的代码中大量出现，所以与大家约定这种 `CCP` 的名字
css 已经有了，怎么跟 Html 匹配上呢，看下 JSX 中的写法
class SimpleBtn extends React.component {
render(){
const {type} = this.this.props;
const cls = ‘btn’;
/** 根据 props.type 来生成不同 DOM 节点 */
const btnCls = classNames({
[`${cls}-danger`]: type === ‘danger’,
[`${cls}-primary`]: type === ‘type’,
}, cls);
return (
<button className={btnCls}>
{this.props.children}
</button>
)
}
}
调用方式如下
improt {SimpleBtn} from ‘smpePath’;
class Clent extends React.Component{
render(){
return (
<div>
// 显示一个红色的按钮
<SimpleBtn type=”danger”></SimpleBtn>
// 显示一个蓝色按钮
<SimpleBtn type=”primary”></SimpleBtn>
</div>
)
}
}
相信看到这里，大家对这种设计模式已经了然于心了。在后面的组件中会大量出现这种组件设计模式。本篇完