如何设计实现一个React UI组件库——Ant Design源码阅读与浅析
概述
在我们进行日常的项目开发的过程中，我们经常会遇到使用一些通用的UI组件库如BootStrap、Ant Design等。作为成熟的UI组件库，它能够提供提供一整套UI组件用来满足使用需求，能大大减少开发成本。
在使用了他人提供的组件库后，我自然就会有兴趣去了解一下别人开发的组件库到底是如何设计的，如何进行相关的组件封装。本文以Ant Design为例，让我们来了解一下目前较为有名的UI组件库是如何设计与实现的？同时，我们又能够有哪些经验可以借鉴？
阅读本文，你最好有如下的基础知识来帮助你理解本文内容：
- 对React相关开发有一定的了解，对React的组件有一定的认知。
- 对JavaScript有一定的了解，最好能够了解TypeScript（不了解也能够理解文章内容）。
- [选]对单元测试有一定的了解（不了解可以先阅读我的前一篇文章提高代码质量——使用Jest和Sinon给已有的代码添加单元测试）。
PS: 博客写一半，手受伤骨折了囧囧囧，后面大部分文字是通过语音输入转换的，如果有什么错误或者逻辑不清晰，欢迎在评论中指正。
如何实现单个的React UI组件
首先，需要了解Ant Design提供的组件，我们先来看下单个组件是如何实现的。
目录结构
需要了解一个组件的内容，我们应该先从目录接口开始。我们以avatar头像组件为例，目录结构如下图所示：
我们一个一个来看一下：
- index.tsx，UI组件源文件，即TSX（TypeScript+JSX），包含整个组件的内容和逻辑。
- index.zh-CN.md，组件使用说明文档
- style，UI组件样式文件，包含当前UI组件的相关样式
- tests，UI组件测试文件，包含当前UI组件相关的单元测试，使用Jest单元测试框架。
- demo，用来进行展示和用法示例说明的文档
介绍完了目录结构，我们来看下这个插件的具体内容。
TSX文件
我们首先来看一下这个插件的TSX文件。这个文件包含了插件的结构和功能。如代码示例示例所示：
export interface AvatarProps {
/** Shape of avatar, options:`circle`, `square` */
shape?: 'circle' | 'square';
/** Size of avatar, options:`large`, `small`, `default` */
size?: 'large' | 'small' | 'default';
/** Src of image avatar */
src?: string;
/** Type of the Icon to be used in avatar */
icon?: string;
style?: React.CSSProperties;
prefixCls?: string;
className?: string;
children?: any;
}
export interface AvatarState {
scale: number;
isImgExist: boolean;
}我们先看一下声明文件。在你TypeScript声明中我们可以看到：它通过interface定义了props和state两个属性的值。这样可以明确界定传入的属性和内部的属性类型，在代码规范和质量中也能够有一个保证。
下面让我们来看一下具体的组件类。具体示例如下：
export default class Avatar extends React.Component<AvatarProps, AvatarState> {
render() {
const {
prefixCls, shape, size, src, icon, className, ...others,
} = this.props;
const sizeCls = classNames({
[`${prefixCls}-lg`]: size === 'large',
[`${prefixCls}-sm`]: size === 'small',
});
const classString = classNames(prefixCls, className, sizeCls, {
[`${prefixCls}-${shape}`]: shape,
[`${prefixCls}-image`]: src && this.state.isImgExist,
[`${prefixCls}-icon`]: icon,
});
let children = this.props.children;
if (src && this.state.isImgExist) {
children = (
<img
src={src}
onError={this.handleImgLoadError}
/>
);
} else if (icon) {
children = <Icon type={icon} />;
} else {
const childrenNode = this.avatarChildren;
if (childrenNode || this.state.scale !== 1) {
const childrenStyle: React.CSSProperties = {
msTransform: `scale(${this.state.scale})`,
WebkitTransform: `scale(${this.state.scale})`,
transform: `scale(${this.state.scale})`,
position: 'absolute',
display: 'inline-block',
left: `calc(50% - ${Math.round(childrenNode.offsetWidth / 2)}px)`,
};
children = (
<span
className={`${prefixCls}-string`}
ref={span => this.avatarChildren = span}
style={childrenStyle}
>
{children}
</span>
);
} else {
children = (
<span
className={`${prefixCls}-string`}
ref={span => this.avatarChildren = span}
>
{children}
</span>
);
}
}
return (
<span {...others} className={classString}>
{children}
</span>
);
}
}从上面的示例代码中我们可以看到，这是一个很常规的React的组件类。它通过传入的属性来判断应该选择哪种方式渲染头像，然后完成组件的渲染过程。同时，在组件渲染完成后，这个组件会根据参数来调整相关的图片大小用于适配。
这样，一个简单的UI组件就已经基本满足相关的功能了。
接下来，让我们来看下样式相关的文件。
Style文件
还是以Avatar组件为例，具体的样式代码这里就不举例了，只像大家介绍下：Ant Design的样式是通过Less语言来完成的，并且通过TSX文件来进行引入。
Test文件
Test文件通过enzyme来对React组件进行测试。我们简单介绍以下enzyme，这是一个对React组件进行测试的JavaScript框架，能够提供mount等相关API接口来对组件选人和相关的数据更新操作进行测试。
我们选取一部分测试示例如下：
import React from 'react';
import { mount } from 'enzyme';
import Avatar from '..';
describe('Avatar Render', () => {
it('Render long string correctly', () => {
const wrapper = mount(<Avatar>TestString</Avatar>);
const children = wrapper.find('.ant-avatar-string');
expect(children.length).toBe(1);
});
it('should render fallback string correctly', () => {
const div = global.document.createElement('div');
global.document.body.appendChild(div);
const wrapper = mount(<Avatar src="http://error.url">Fallback</Avatar>, { attachTo: div });
wrapper.instance().setScale = jest.fn(() => wrapper.instance().setState({ scale: 0.5 }));
wrapper.setState({ isImgExist: false });
const children = wrapper.find('.ant-avatar-string');
expect(children.length).toBe(1);
expect(children.text()).toBe('Fallback');
expect(wrapper.instance().setScale).toBeCalled();
expect(div.querySelector('.ant-avatar-string').style.transform).toBe('scale(0.5)');
wrapper.detach();
global.document.body.removeChild(div);
});
});通过上面的示例我们可以知道，enzyme能够根据Avatar组件渲染后的数据来对组件进行测试。
UI组件库到底是如何实现以及与使用者交互的
其实UI组件与我们自己开发的React组件没有什么太大的区别，只是一个提供了部分UI和功能的第三方组件而已。想明白了这点，我们就能知道，我们开发的组件与第三方UI组件的交互就是通过Props的方式。
以上面的Avatar组件为例，我们给组件传递sharp, size，src等字段，Avatar组件收到相关数据后，在内部进行相关的处理，最终返回一个React组件。具体示例如下：
import Avatar from './avatar/';
class Container extends React.Component {
render() {
return (
<div>
<Avatar sharp="circle" size="large" src="https://www.baidu.com">Avatar!!</Avatar>
</div>
);
}
}如果我们需要引入相关样式文件，我们则需要引入编译后的css文件，具体方式如下：
@import '~antd/dist/antd.css';通过Ant Design，我们在开发UI组件时学到了什么
通过对UI组件库源码的阅读，我得到了如下的一些经验。
结构清晰
每一个UI组件都是一个完整的模块，都应该有自己独立的目录结构；同时所有的UI组件都是属于同一类，因此所有的UI组件的目录结构应该相似。
Ant Design中每一个UI组件的目录结构都如前几章中所述。拥有一个清晰的目录结构能够方便我们进行代码管理，同时也可以使用脚本做一些自动化的处理。比如Ant Design就通过脚本来对所有components/**/style文件夹中的less文件进行合并编译。
组件分离
每个UI组件应该都是可以独立被引用的，而且也应该优先使用“独立引用”的方式。
Ant Design的每一个组件都可以被独立引用，引用方式如下：
import Button from 'antd/lib/button';我们在使用第三方UI组件库时，通常不会使用到上面所有的组件，而是经常使用到部分组件。因此我们在设计UI组件库时，处于文件大小的考虑，我们也应该保证每个UI组件都互不依赖（同一层级的组件，排除本身业务上就有依赖关系的组件），做到不使用的组件不引入，减小业务方文件大小。
测试覆盖
每一个UI组件都是独立的，因此我们需要为每一个独立的组件进行测试覆盖。
Ant Design中通过Jest和上文提到的enzyme来对每一个组件进行测试，从而保证UI组件的代码质量。
总结
总体上来说，Ant Design相关的源代码简单易懂，结构也很清晰，非常容易阅读。如果你对React开发有一定的了解，但是不知道如何进行组件的封装，或者想了解当前主流的组件库是如何实现的，推荐可以阅读一下相关源码。你能够从中了解到我们如何对UI组件进行切割和封装。
当然，Ant Design不仅仅是一个UI组件库，而是一整套UI规范，我们今天分享的只是这套规范在React上面的实现。如果对相关的UI规范有兴趣的同学，可以去Ant Design的官网进行了解。