组件库介绍

组件

名词：

• 部件
• 元件
• 构件
• 组成
• 分枝

工业品组件

具有标准接口和某种功能且可复用的标准零部件

软件组件

封装好的可复用的程序“零部件” 软件开发=>搭积木

前端UI组件

“按钮”、“输入框”、“下拉选择”都是组件，组件和组件组合就变成了一个更复杂的组件。

社区组件库

什么是组件库

• 一致性
• 效率
• 协同

组件库的使用

• 快速上手
• 主题定制
• 暗黑模式
• 国际化
• 业务常见问题

快速上手

• 引入组件库
• 基础使用
• 安装按需加载插件
• 修改Babel配置，引入插件
• 通过CDN使用
• 预装环境
• 项目初始化
• 项目开发

Arco Pro

技术栈:

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

主题定制

• 通过CSS进行样式覆盖
• 修改Less变量
• 组件定制：Button：带有投影效果；Input：面性=>线性

主题定制——DesignLab

• 通过Arco插件引入

暗黑模式：

• 在不同模式下改变的只有颜色。尺寸、边距等没有改变
• 代码写法一致
• 读取到的变量值不同

暗黑模式——局部应用暗色模式

• 核心思路：本质上是控制暗色变量的挂载位置，提高我们所需要的颜色变量的优先级
• 尝试共建：#1655
• 参考实现：核心实现

国际化

语言国际化

• Ant Design
• Element
• arco.design
• 从全局配置上读取Locale语言文件
• 直接通过ConfigProvider组件传入不同语言文件去修改Locale
• 通过ConfigProvider组件消费

RTL视图

• 元素方向RTL:CSS属性
• 布局RTL：
• 交互行为：Slider组件
• 其他处理：左还是左，右还是右

ConfigProvider-全局配置组件默认属性

• 修改组件默认的属性值，从而改变组件的默认表现
• 使用方法：通过ConfigProvider的componentConfig属性，传入定义好的配置文件，组件配置将会对ConfigProvider组件所包裹的所有组件生效

ConfigProvider

• ConfigProvider：利用React Context，为所有组件提供统一的全局配置

可能关注的点

• 旧项目的迁移
• 如何获取OnCall支持
• 更新日志，发版周期
• 如何参与共建

自定义组件

业务组件库搭建

• 通用业务组件库：保障规范性，稳定性，提高业务开发效率
• 架构设计：单包架构；多包架构
• 技术方案：开发环境；样式方案；产物构建；质量保障；组件开发
• 对外文档：Demo展示；组件API生成；版本日志

架构设计

• 单包架构：一个代码仓库里所有组件打包成一个整体，发布出去一个npm包
• 多包架构：一个代码仓库包含多个组件代码，会发布出去多个npm包
• 根据实际业务场景选择合适的架构

架构设计——单包架构

• 使用方法：从一个包名里面引用了多个组件，去进行组合使用
• 优点：1. 公告代码易复用 2. 展示更聚合，便于维护 3. 引入一个包即可使用全部组件
• 缺点：1. 修改一个组件需要更新整个库 2. 需要考虑按需加载

架构设计——多包架构

• 使用方法：组合使用多个组件的话，就必须从多个NPM包引入组件
• 优点：1. 单独发包，升级灵活 2. 在同一仓库下，便于代码管理 3. 使用者无需考虑按需加载
• 缺点：1. 组件间互相依赖时，需要通过npm包引入 2. 组合使用时需要安装每一个用到的npm包