前端青训营-React-组件 | “朝闻道”知识分享大赛

[小年华°Moon]

这是我参加朝闻道知识分享大赛的第130篇文章。

简介

组件：在工业品上，指具有标准接口和某种功能且可复用的标准零部件。在软件开发上，指封装好的可复用的程序“零部件”。

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

组件库：一系列UI组件的合集

组件库特点：一致性、效率、协同

使用

快速上手

引入组件库：

按需加载：降低体积

通过CND使用：

主题定制

主题色：

通过C55进行样式覆盖或修改Less变量来修改颜色

组件定制：

Arco Pro：

DesignLab：

暗黑模式

国际化

语言国际化：

RTL视图：

Arco 组件库 RTL 从 0 到 1

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

项目demo

开发

搭建业务组件库

考虑的问题：架构设计、技术方案、对外文档

• 怎么打包组件库？
• 产物应该是什么格式？
• 如何在项目里使用？
• 怎么本地开发预览？
• 怎么保障质量？
• 怎么展示 Demo？

架构设计：

• 单包架构：一个代码仓库里所有组件打包成一个整体，发布出去一个 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

组件开发

什么是好的组件：

项目组织：

• 语义化命名

  组件的命名应当具有语义，并且避免与基础组件冲突。同一团队/仓库下的业务组件，也可采用相同的命名前缀。

• 包名和组件名最后一致

  NPM包名应当尽量与组件名保持一致，包含明确的使用场景信息。

• 单独维护类型文件

  推荐将需要对外导出的TS类型维护在单独的interface.ts中，并将其在index.ts中导出。

组件设计：

• 接口定义

  在为组件定义接口类型时，应继承原生DOM（或基础组件）属性，避免属性遗漏或重复声明。

• 类名前缀统一

  组件使用特殊且统一的类名前缀，尽量降低与用户类名冲突的可能性。

• 避免行内样式和 CSS Modules

  确保外部可通过类名进行样式覆盖。

• 避免在JS中耦合CSS

  应尽量保证逻辑与样式的分离，确保用户可以分别引入JS和CSS文件，避免由于构建环境的不同导致的用户编译失败的问题。

• 注意样式的按需加载

  在基于基础组件库如Arco进行业务组件的逻辑封装时，应注意按需引入所依赖的Arco基础组件的样式文件

案例：Guide Tip，在线demo，源码地址

功能要点

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

API定义

核心逻辑

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

快速托管