抽象如何帮助您最大限度地利用UI组件

通过简化组件来重用ui

加载
多米尼克阮
@domyen

软件维护消耗项目40-80%的资源. 维护负担影响项目速度和团队满意度. 难道你不愿意创造新功能,而不是在漏洞和技术债务中苦苦挣扎吗?

模块重用典型地降低了维护成本. 您对已经构建的代码重用得越多 & 测试的应用程序越健壮. 在构建用户界面时,重用UI组件是一致和快速的.

然而,组件在默认情况下是不可重用的. 创建可重用组件的核心策略是抽象. 也就是说,将一个想法的关注点从它诞生的背景中“分离”出来.

一个惯用模式,the “直觉的/容器”分裂 将组件的表示部分抽象出其数据上下文. 目标是创建一个代码更简单的UI组件 其他开发人员 要理解.

然而,要重用组件,十博体育备用网址还需要使其更容易 其他应用程序 “理解”——即. 消费. 十博体育备用网址需要将组件的使用从它诞生的应用中抽象出来.

类型的组件

不是所有的组件都相等,也不是所有的组件都属于一个组件库. 在之前的文章中 我描述了一次性组件和可重用组件之间的区别:

  • 一次性组件 被限制在他们现在的位置吗. 他们将特定应用的关注点与“核心”关注点纠缠在一起.
  • 可重用组件 可以应用在很多场合吗. 他们不依赖任何来自他们渲染的环境. 演示和数据(或任何特定于环境的东西)之间有清晰的划分.

可重用组件的定义特征是呈现的能力 任何 环境,给予正确的输入. 换句话说,它是从全局状态、样式、业务逻辑和数据中抽象出来的. 这允许“表示的”或纯粹的组件 可重用的 在同一应用程序的不同地方,并打开了便携到其他应用程序的大门.

This isn’t to say writing single-use components is bad; components that underst和 the 应用程序 they are in are the glue that makes the whole thing work. 仍然, 在可能的地方抽象出可重用组件将有助于扩展您的库并鼓励一致性.

如何处理抽象

UI组件库应该只包含可重用的组件,这些组件独立于应用上下文工作. 这些通常是从数据上下文和应用程序环境中抽象出来的纯+表示的UI组件.

例如:CommentList组件

CommentList 呈现来自不同作者的消息. 下面显示的是依赖于同一个星球大战数据源的3种排列. 您可能会发现这样的组件局限于一个银河聊天应用程序. 十博体育备用网址希望此组件在 任何 应用程序. 让十博体育备用网址这样做吧.

设计规范

首先,看一看 不可重复使用的 组件的实现:

组件是不可重用的,因为它与数据库查询纠缠在一起 假设存在特定的路由.

如果你匆忙创建了这个组件,你可能会想直接从数据库传递字段给组件(our commentText《十博体育备用网址》characterName | | Id 字段). 尽管最初很方便,但这使得组件在其他上下文中难以使用. 一个更好的方法是在你自己的应用程序中转换数据,使组件的API更清晰.

组件还规定了到作者的路由应该如何构造 {name} 哪个要求开发者将id作为属性传递. 这不利于重用,因为假设应用程序的环境是用 /字符 目录和 路由是用 id’s.

这在你的数据库设置和你的评论仅限于星球大战的情况下是有效的 字符. 但是,对于希望显示来自的注释的情况,没有太多的灵活性 超级英雄 or 推特 用户.

A 可重用的 实现只依赖于as的输入 道具 要传递数据,组件需要呈现. 它不依赖于特定的数据库字段或假设任何关于应用程序路由.

你的组件现在可以处理不同的数据了:

组件的探险家 React Storybook用来展示每个数据源.

最后的话

抽象是简化. 这不仅是最佳的实践 一笔可观的前端,它允许组件重用所需的灵活性. 就像你看到的 CommentList 例如,小的调整会在可重用性方面产生很大的不同. 不难想象一个图书馆由 下拉, DatePicker, 抽屉里 其模式被无休止地重用以减少团队维护负担的组件.


Chroma是组件重用的有力支持者. 没有人需要重建相同的ui. 十博体育备用网址正在探索一个前端由可重用组件组装而成的世界,并对十博体育备用网址的发现感到兴奋. 如果你感兴趣的话, 注册邮件列表以发现更多关于该主题的文章. 帮个忙,然后送上这篇文章.

这篇文章对你有帮助吗?

通过电子邮件向您发送免费的UI开发指南和教程.

4,410名开发人员,而且还在增加

十博体育备用网址正在招聘!

加入Storybook和colorless背后的团队. 构建被成千上万的开发人员在生产中使用的工具. Remote-first.

视图的工作

受欢迎的文章

预制组件

孤立地构建UI组件的情况
加载
汤姆·科尔曼
通过彩色
为专业UI开发人员提供的深入指南和教程,来自Storybook团队
指南
介绍故事书为开发人员设计系统视觉测试手册
关于
订阅
加入墨水通讯,以获得免费的教程,指南,和资源的电子邮件给你.
友情链接: 1 2 3 4 5 6 7 8 9 10