组件浏览器

现代 UI 支持无数的状态、语言、设备、浏览器和用户数据的组合。过去，开发 UI 很繁琐。您必须在正确的设备上，使用正确的设置，导航到给定的页面。然后，您需要点击操作，使页面进入正确的状态，以便开始编码。

组件浏览器将 UI 的关注点与业务逻辑和应用上下文分离开来。 您可以在隔离的环境中构建 UI 组件，从而专注于每个组件支持的各种变体。这使您能够衡量输入（props、state）如何影响渲染的 UI，并构成了您的视觉测试套件的基础。

Storybook 是我们将用于演示视觉测试的行业标准组件浏览器。Twitter、Slack、Airbnb、Shopify、Stripe 和成千上万家其他公司都在使用它，因此您可以在今后的工作中，无论在何处工作，都能应用本指南中的经验。

为什么要独立构建 UI？

减少 Bug

组件和状态越多，就越难确认它们在用户的设备和浏览器中都能正确渲染。

组件浏览器通过展示组件支持的各种变体来防止不一致。这使得开发人员能够独立关注每个状态。它们可以在隔离的环境中进行测试，并且您可以使用模拟来复制复杂的边缘情况。

开发速度更快

应用程序永远不会完成。您会不断地进行迭代。因此，UI 架构必须是可适应的，以容纳新功能。组件模型通过将 UI 与应用程序业务逻辑和后端分离来促进互换性。

组件浏览器通过提供一个沙箱来隔离开发 UI，远离应用程序，从而使这种分离显而易见。这意味着团队可以在不分心或不被应用程序其他部分的状态污染的情况下，同时处理不同的 UI 部分。

协作更容易

UI 本质上是视觉化的。仅代码的拉取请求并不能完整地表示工作。要真正实现协作，利益相关者必须查看 UI。

组件浏览器可视化 UI 组件及其所有变体。这使得开发人员、设计师、产品经理和 QA 能够轻松地对“看起来正确吗？”这个问题进行反馈。

它在我的技术栈中处于什么位置？

组件浏览器被打包成一个小的独立沙箱，与您的应用程序一起运行。它允许您在隔离的环境中可视化组件变体，并包含以下功能：

• 🧱 用于组件隔离的沙箱
• 🔭 用于组件规格和属性的变体可视化器
• 🧩 将变体保存为“故事”以便在测试期间重新访问
• 📑 用于组件发现和使用指南的文档

学习工作流程

使用组件浏览器隔离您的 UI 可以解锁视觉测试。下一章将向您展示如何为 UI 开发重构测试驱动开发。