Bit 最佳实践 - 第四节：编写可复用bit组件规范与方案

编写可复用bit组件规范与方案

背景

随着项目的复杂度和代码量增长，时间一长，往往面临着以下问题：

• 单个组件承担的功能越来越多
• 类同组件越来越多
• 组件之间的互相引用使得开发与调试变得越来越困难
• 组内成员对项目内的组件现状、props 与使用方法掌握不清
• 不了解某个组件的潜在问题
• 注释不够全面，代码难以理解

组件原则

单一

即一个组件应该只有单一职责，处理单一功能。单个组件不应该知道任何跟此组件不想关的状态与数据

内聚

组件内的其他文件应仅与当前组件有关系

完善

组件内应包含比较完善的代码文件、样式文件、测试用例、文档等等，使得单个组件相对独立

组件实施规范

单个组件单个文件夹

将所有相关的文件放到一个文件夹中，包括代码、样式、文档、用例等。使得他人使用时可以一次性获得全部相关文件。

目录结构方案一：

Button
├── index.tsx
├── index.module.scss
├── index.test.ts
├── README.md

目录结构方案二：

Button
├── Button.tsx
├── Button.module.scss
├── Button.test.ts
├── index.ts
├── README.md

使用绝对路径和别名

使用：

import Button from '@components/Button';

不使用：

import Button from '../../../components/Button';

使用别名可以更方面的更改代码位置

组件内不使用未知的全局变量

使用未知的、自定义的全局变量将会使得组件复用极容易引发问题

不依赖状态管理

一个组件对 redux、mobx 等状态管理工具应该是无感知的，组件所使用的数据源应仅通过自身的 props 获取

出口收敛

组件相互之间只能通过 xxx/index.ts 依赖引用，组件所有从成员只能通过 index.ts 导出

使用：

import { ButtonProps } from '@components/Button';

不使用：

import { ButtonProps } from '@components/Button/Button';

参考资料

• reusable-components-styleguide