前言
在《GrowingIO Design 组件库搭建之开发工具》一文中介绍了搭建组件库的原因和使用的开发工具,这篇文章就来介绍组件库的主角:组件。先从组件的定义说起。
组件的定义
组件是标准化的、可互换的 UI 模块。它们封装了 UI 部分的外观和功能。想想乐高积木。乐高积木可用于建造从城堡到宇宙飞船的所有东西,组件可以拆开并用于创建新功能。
组件通过将状态与应用程序业务逻辑隔离来实现互换性。这样,你可以将复杂的屏幕分解成简单的组件。每个组件都有定义明确的 API 和可被 Mock 的系列状态。这允许组件被拆开和重组,以构建不同的 UI。
组建驱动 UI
前面明确了组件定义之后,如何从一个个组件构建出完整的 UI。过程如下:
一次构建一个组件:隔离构建每个组件并定义其相关状态。从小处着手。
组合组件:将小组件组合在一起以解锁新功能,同时逐渐增加复杂性。
组装页面:通过组合复合组件来构建页面。使用 Mock 数据模拟页面的难以到达状态和边缘情况。
集成到项目中:通过连接数据和连接业务逻辑,将页面添加到您的应用程序。
组件驱动 UI 的好处:
质量: 通过隔离构建组件并定义其相关状态,验证用户界面在不同场景中工作。
耐用性: 通过在组件级别进行测试,将缺陷精确到细节。它比测试屏幕工作更少,也更精确。
速度: 通过重用组件库或设计系统中的现有组件,更快地组装 UI。