为什么要构建自己的组件库？

  1. 保证UI交互的一致性，用户体验的一致性
  2. 前端资源产品化
  3. 一套设计规范，多人协同，提高开发效率

antd常用组件

GridLayout
ActionGroup
IconTooltip

布局组件，Layout，Grid
菜单组件，Menu，Item，嵌套菜单 SubMenu，菜单组 Group
表单组件，Form
消息组件，Modal，Drawer，Message，Notification，Popconfirm

业务领域的组件

水印组件，WaterMater
复制组件，Copy

编写组件库

  1. 需求分析
  2. 文件结构和代码规范
  3. 官方规范
  4. 代码规范

开发一个组件库需要考虑的问题

  1. 代码结构
  2. 组件需求分析和编码
  3. 代码打包输出和发布
  4. 样式解决方案
  5. 组件单元测试用例分析和编码
  6. CI CD，文档生成

通过不同的文件去定义原型上的方法
高内聚，一个组件不要依赖任何外部组件
所有的代码不可能一步到位，需要周期性迭代
先写好样式和布局再去实现功能

Boolean 类型的属性不使用 is 前缀。例如 visible 而不要使用 isVisible ，和 Ant Design 保持一致
组件必须支持常用基础属性，如style, className, disabled, value, onChange, onClick, loading, defaultValue, children

减少文件数量
通常建议一个 index.tsx + style.less 文件

减少代码数量
一般建议不超过 200行

添加间隔
与其他区块产生间隔，大多数情况下需要设置 className=’mb-16’

添加必要链接
如果在区块中使用到了不太常用的工具和仓库，那么建议添加链接，方便直接到达

URL路径命名规范，统一用小写字母，中横线命名，不要用驼峰