关于组件库:GrowingIO-Design-组件库搭建之组件开发

前言

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

组件的定义

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

组建驱动 UI

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

1. 一次构建一个组件：隔离构建每个组件并定义其相干状态。从小处着手。
2. 组合组件：将小组件组合在一起以解锁新性能，同时逐步减少复杂性。
3. 组装页面：通过组合复合组件来构建页面。应用 Mock 数据模仿页面的难以达到状态和边缘状况。
4. 集成到我的项目中：通过连贯数据和连贯业务逻辑，将页面增加到您的应用程序。

组件驱动 UI 的益处：

• 品质: 通过隔离构建组件并定义其相干状态，验证用户界面在不同场景中工作。
• 耐用性: 通过在组件级别进行测试，将缺点准确到细节。它比测试屏幕工作更少，也更准确。
• 速度: 通过重用组件库或设计零碎中的现有组件，更快地组装 UI。
• 效率: 通过将用户界面分解成离散的组件，而后在不同的团队成员之间分担负载，并行化开发和设计。

接下来就得介绍如何用代码实现组件了。但在此之前，先说说代码仓库的事。

代码仓库

从代码仓库的格调说起：Monolithic Repo（简称 Monolith）、Monorepo 和 Multirepo。

• Monolith：所有代码都寄存在一个仓库中。Ant Design 组件库应用的就是此种形式，所有组件都在 components 目录下，每个组件独自目录。
• Monorepo：也是将所有的代码都寄存在一个仓库中，然而它能够蕴含 Monolith（比方一个目录对应一个 Monolith）。组件库中应用此种形式的是 Material Components for the web，所有组件都寄存在 packages 目录下，每个组件都是一个 package，并且对立发版。
• Multirepo：将代码分成多个局部，寄存在不同的仓库中。此种形式的代表是 react-component，每个组件都是独自仓库，每个组件都可独自发版。

对于 GrowingIO Design 来说，一方面是做不到 Material Design 那样对立发版，有些简略组件开发完后会长工夫不更新；另一方面是组件太多，应用 Multirepo 形式，导致仓库很多，保护老本太大。所以，GrowingIO Design 采纳了常见的 Monolith 格调，用一个仓库，不同组件放在不同目录下，并且最终只有一个 package。

组件目录

上一节中代码仓库格调抉择了 Monolith，也明确了不同组件放在不同目录下，思考到组件会随着迭代越来越多，有必要提前标准一下组件的目录构造，明确一下一个组件至多应该蕴含哪些文件。

component
├── Component.mdx
├── Component.stories.tsx
├── Component.tsx
├── __tests__
├── index.ts
├── interfaces.ts
└── style

• Component.mdx 是组件的文档，包含组件定义的标准等内容；
• Component.stories.tsx 寄存组件的各种应用场景的 Demo；
• Component.tsx 就是组件的具体实现文件了；
• index.ts 次要是 export 组件和各种 props；
• interfaces.ts 定义组件的各种 props。

其中，__tests__和 style 两个目录，这里先不介绍，埋个伏笔，它们的具体介绍会放在组件测试和组件打包两篇文章中。

组件实现

对于单个组件的实现，这里就不具体介绍。这是因为组件的编写须要各位“八仙过海，各显神通”了。
GrowingIO Design 大部分组件是基于 react-component 封装的，剩下的就是齐全本人实现了。然而，组件必须蕴含的 props 还是要标准的，这里给一个简略的示例：

import React from 'react';

interface BaseProps {
  /**
   * 自定义 CSS 款式名称
   */
  className?: string;
  /**
   * 自定义 CSS
   */
  style?: React.CSSProperties;
}

function Component(props: BaseProps) {return <div>Base Component</div>;}

export default Component;

具体组件的代码能够去咱们 GitHub 上的仓库查看。

组件文档

工具选型

罕用的几种工具：

• Storybook：可帮忙你编写组件文档以供重用，并主动可视化测试组件以避免 Bug。
• docz：使您可能应用 MDX 疾速创立实时重载、搜索引擎优化敌对、可用于生产的文档网站，并在须要时利用 GatsbyJS 和 Gatsby 主题定制外观、感觉和行为。
• React Styleguidist：带有生存格调指南的聚合反应组件开发环境。
• dumi：中文发音嘟米，是一款为组件开发场景而生的文档工具，与 father 一起为开发者提供一站式的组件开发体验，father 负责构建，而 dumi 负责组件开发及组件文档生成。

GrowingIO Design 最终选用了 Stroybook，起因只有一点：Controls 插件反对扭转组件的 props，实时看到成果，能够缩小很多 Demo 代码。具体示例如下：

文档标准

文档次要蕴含以下几局部：

1. 题目和子标题：题目间接是组件的英文名称和中文名称，用 Markdown 的一级题目语法，子标题应用 Storybook 的 Subtitle 组件。
2. 应用标准：应用 Markdown 的二级题目语法，次要形容组件的各种应用场景。
3. 参数阐明：应用 Markdown 的二级题目语法，应用 Storybook 的 ArgsTable 展现组件的 Props 类型。
4. 代码演示：用 Story 来展现组件的各种应用场景，每种场景对应一个 Story。次要提供场景的形容和 Story 链接，场景名称应用 Markdown 的三级题目，Story 链接应用绝对链接。

总结

本文次要从以下几个方面介绍如何开发组件：

• 代码仓库采纳最常见的 Monolith 格调，对立治理所有组件的代码；
• 组件目录标准了不同类型的文件命名形式；
• 组件文档应用 Storybook 来 Demo 组件的款式，并提供组件的设计规范。

参考

Component Driven User Interfaces https://www.componentdriven.org/

Monorepo https://en.wikipedia.org/wiki…

Ant Design https://github.com/ant-design…

Material Components for the web https://github.com/material-c…

react-component https://github.com/react-comp…

Storybook https://storybook.js.org/

docz https://www.docz.site/

React Styleguidist https://react-styleguidist.js…

dumi https://d.umijs.org/

作者：潘杰

GrowingIO 工程经理，目前次要负责 GrowingIO Design 组件库搭建和微前端建设。

招聘信息

GrowingIO 技术团队是一个生机四射、对技术充斥激情的团队，多个岗位继续招聘中！诚招前端工程师 / 大数据工程师 /Java 工程师等，欢送有趣味的同学投递简历至：jianli@growingio.com（邮件题目请注明具体岗位名称），更多职位及信息可进入招聘官网查看


对于 GrowingIO

GrowingIO 是国内当先的一站式数据增长引擎整体计划服务商，创建于 2015 年，以数据智能剖析能力为外围，通过构建客户数据平台，打造增长营销闭环，帮忙企业晋升数据驱动能力，赋能商业决策、实现业务增长。