组件库的使用和自定义组件

1. 组件库介绍

组件：
部件元件构件组成分枝
工业品组件：
具有标准接口和某种功能且可复用的标准零部件。

组件库介绍-组件

软件组件：封装好的可复用的程序“零部件”
前端 UI 组件: “按钮”、“输入框”、“下拉选择”都是组件，组件和组件组合就变成了一个更复杂的组件。

社区组件库

showcase: 一致性，效率，协同
主题平台: 源力主题
字节云物料库 :源力物料库物料平台
图标平台 :源力 / 业务图标库

2. 组件库的使用

引入组件库

需要同时安装 react >= 16.8 和 react-dom >= 16.8。 > npm i @arco-design/web-react
基础使用：
import React from "react"; import ReactDOM from “react-dom"; import { Button } from “@arco-design/web-react"; import “@arco-design/web-react/dist/css/arco.css"; ReactDOM.render( Hello Arco, document.querySelector("#root") );

安装按需加载插件 babel-plugin-import

yarn add babel-plugin-import -D

修改 Babel 配置，引入插件
plugins: [ [ 'babel-plugin-import', { libraryName: '@arco-design/web-react', libraryDirectory: 'es', camel2DashComponentName: false, style: true, // 样式按需加载 }, ], [ ‘babel-plugin-import’, // 图标库按需加载 { libraryName: '@arco-design/web-react/icon', libraryDirectory: 'react-icon', camel2DashComponentName: false, }, ], ];

主题定制1.通过CSS进行样式覆盖
2.修改Less变量

Aroc Pro

技术栈：

React
TypeScript
BizCharts
Arco Design
多架构
- Next.js
- Create React APP
- Vite

国际化

语言：自定义语言包文件 custom-locale.ts RTL视图实现浅析
元素方向 RTL: CSS 属性 direction: rtl; ( 用来设置文本和其他元素的默认方向是从右到左 )
布局 RTL :margin-left => margin-right position: right => position: left
交互行为 RTL: Slider 组件向左拖动数值变小 => 向右拖动数值变小其他处理
左还是左，右还是右 Notification 设置为 right 弹出时，无论在 RTL 还是 LTR ，都是出现在右上⻆

搭建业务组件库：
保障规范性，稳定性，提高业务开发效率

3. 自定义组件

业务组件库搭建

通用业务组件库 ：保障规范性，稳定性，提高业务开发效率
搭建业务组件库：库架构设计技术方案对外文档

关键点

架构设计
单包架构多包架构
技术方案
开发环境样式方案产物构建质量保障组件开发
对外文档
Demo 展示组件 API 生成版本日志

搭建业务组件—架构设计

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

搭建业务组件—单包结构

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

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

缺点：

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

搭建业务组件—多包结构

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

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

缺点：

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

搭建业务组件—技术方案

开发环境

打包速度
实时预览，如 storybook

样式方案

样式方案：Less / Sass，CSS in JS，CSS 等
组件库换肤，样式定制等能力

产物构建

构建工具 webpack ， rollup， vite ， gulp 等
产物格式：cjs ， umd ，es

质量保障

测试工具： jest ，karma，mocha, enzyme, react testing-library 等
测试类型：单元测试，快照测试，截屏测试，e2e 测试等

搭建业务组件—对外文档

文档部署

Demo 展示：Storybook，umijs 等
静态内容： markdown

组件 API 提取

手写
自动提取： ts-docuemnt 等

版本日志生成

手写
自动提取：从 PR 提交记录自动提取 @arco-design/changelog

组件开发规范

好的组件：

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

组件设计

组件属性定义
类名前缀统一
避免行内样式
避免在 JS 中耦合 CSS
注意样式的按需加载

示例实践guide_tip

功能要点

控制引导气泡的出现
点击下一步/上一步时切换气泡卡片的内容
气泡卡片的位置跟随变动
在最后一步时，显示完成按钮

核心逻辑

显示弹出层： Arco Popover 组件
步骤切换：状态变量 current 记录当前处于哪一步骤
弹出层始终指向对应的 Button ：实时获取目标节点的位置，更新弹出层指向。

业务组件快速托管

4. 总结

这次课程从组件库使用和自定义组件开发两个方面介绍，组件库使用包括组件库引入、主题定制、亮/暗色模式切换、国际化、自定义组件默认配置。自定义组件开发包括单包架构和多包架构、什么是好的组件、组件开发规范、组件快速托管。本次课程通过讲解组件开发的实例演示如何设计通用组件，并进行快速托管，便于我们理解。课程时间不长，内容很丰富，需要自己好好理解消化。

组件库的使用和自定义组件 | 青训营笔记