前言

本次课程主要介绍了如何更好的使用组件库，了解组件库的一些常用能力底层如何设计实现，以及在进行业务组件库搭建时，需要注意哪些技术点，最后结合组件开发实例演示如何设计一个通用组件，并进行快速托管。主要包括以下几个方面的内容：组件库的使用、组件库的使用和自定义组件库。

组件库的介绍

什么是组件

组件可以归结为一些名词的总称，包括部件、元件、构件等等。

组件分类

软件组件：封装好的可复用的程序“零部件”，可以理解为软件开发就是一个搭积木的过程.
工业品组件：具有标准接口和某种功能且可复用的标准零部件。
前端UI组件：“按钮”、“输入框”、“下拉选择”都是组件，组件和组件组合就变成了一个更复杂的组件。示例如下：

组件库的使用

快速上手

引入组件库

需要同时安装react >= 16.8 和react- -dom >= 16.8

> npm i @arco-des ign/ web-react
基础使用的语句

import React from "react";
import ReactDOM from "react-dom";
import { Button } from "@arco-des ign/web- react";
import "@arco-design/web-react/dist/css/arco.css";

ReactDOM. render(

 <Button type="primary">Hello Arco</Button> ,
 document. querySelector("#root")

);

Arco Pro

该方向的技术栈主要包括：React、TypeScript、BizCharts、Arco Design、多架构；

而在多架构这一块的内容主要有Next.js、Create React APP、Vite等。
其他

预装环境的语句：> npm i -g arco-cli

项目初始化语句：> arco init hello-arco-pro

项目开发的语句：> cd hello-arco-pro、> yarn dev

自定义组件

搭建业务组件库

我们知道，拥有一套通用的组件库，可以保障规范性，稳定性，并且提高业务开发效率。

那么，在搭建新的业务组件库的时候就需要考虑很多问题，比如：怎么打包组件库？产物应该是什么格式？如何在项目里使用？怎么本地开发预览？怎么保障质量？怎么展示Demo？等等。

首先，它的关键点就是包括了架构设计、技术方案、对外文档等；就好比盖房子的过程一样，得需要先打地基，再盖房子，最后进行装修，必须有一个合理的先后顺序才行。下面具体介绍一下各个过程。

架构设计

单包架构：一个代码仓库里所有组件打包成一个整体，发布出去一个npm包

优点:

公共代码易复用
展示更聚合，便于维护
引入一个包即可使用全部组件

缺点:

修改一个组件需要更新整个库
需要考虑按需加载

多包架构：一个代码仓库包含多个组件代码，会发布出去多个npm包。

优点:

单独发包，升级灵活
在同一仓库下，便于代码管理
使用者无需考虑按需加载

缺点:

组件间相互依赖时，需要通过npm包引入
组合使用时需要安装每一个用到的npm包

总之，需要根据实际业务场景来选择合适的架构。

技术方案

开发环境
1. 打包速度
2. 实时预览，如storybook
样式方案
1. 样式方案: Less / Sass, CSS in JS, CSS等
2. 组件库换肤，样式定制等能力
产物构建
1. 构建工具webpack，rollup，vite ，gulp 等
2. 产物格式:cjs，umd，es
质量保障
1. 测试工具:jest，karma, mocha, enzyme, react-testing- -library等
2. 测试类型:单元测试，快照测试，截屏测试，e2e测试等

对外文档

文档部署
1. Demo展示: Storybook, umiis等
2. 静态内容: markdown
组件API提取
1. 手写
2. 自动提取: ts-docuemnt 等
版本日志生成
1. 手写
2. 自动提取:从PR提交记录自动提取@arco-design/ changelog

什么是最好的组件

高内聚，低耦合
- 职责清晰，高可维护性。
- 对外提供简单稳定的接口，对内关注内部逻辑的实现。
- 组件和组件之间能简单的配合实现定制的功能。
- 比如: Popver 直接嵌套Input即可实现:在输入框聚焦时显示气泡提示内容。
通用性，易拓展
- 基础组件适用广泛的业务场景
- 适用于不同行业的业务平台
- 业务组件适用于针对性平台
- 具备显著的业务属性，-般基于基础组件开发。
- 比如:通过关键字调接口搜索Lark群聊

其他

通过本次学习，主要了解了如何更好的使用组件库，了解组件库的一些常用能力底层如何设计实现，以及在进行业务组件库搭建时，需要注意哪些技术点。感兴趣的同学可以自行去学习字节内部课程。

（ ps：本次学习主打的就是快乐！！！）

组件库的使用与自定义组件 ｜ 青训营笔记

前言