GrowingIO Design 组件库搭建之组件开发

前言

在《GrowingIO Design 组件库搭建之开发工具》一文中介绍了搭建组件库的原因和使用的开发工具，这篇文章就来介绍组件库的主角：组件。先从组件的定义说起。

组件的定义

组件是标准化的、可互换的 UI 模块。它们封装了 UI 部分的外观和功能。想想乐高积木。乐高积木可用于建造从城堡到宇宙飞船的所有东西，组件可以拆开并用于创建新功能。
组件通过将状态与应用程序业务逻辑隔离来实现互换性。这样，你可以将复杂的屏幕分解成简单的组件。每个组件都有定义明确的 API 和可被 Mock 的系列状态。这允许组件被拆开和重组，以构建不同的 UI。

组建驱动 UI

前面明确了组件定义之后，如何从一个个组件构建出完整的 UI。过程如下：

一次构建一个组件：隔离构建每个组件并定义其相关状态。从小处着手。
组合组件：将小组件组合在一起以解锁新功能，同时逐渐增加复杂性。
组装页面：通过组合复合组件来构建页面。使用 Mock 数据模拟页面的难以到达状态和边缘情况。
集成到项目中：通过连接数据和连接业务逻辑，将页面添加到您的应用程序。

组件驱动 UI 的好处：

质量: 通过隔离构建组件并定义其相关状态，验证用户界面在不同场景中工作。
耐用性: 通过在组件级别进行测试，将缺陷精确到细节。它比测试屏幕工作更少，也更精确。
速度: 通过重用组件库或设计系统中的现有组件，更快地组装 UI。