组件浏览器

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

组件浏览器将 UI 问题与业务逻辑和应用程序上下文隔离开来。 您可以孤立地构建 UI 组件，以专注于每个组件支持的变体。这使您可以衡量输入（props、state）如何影响渲染的 UI，并构成可视化测试套件的基础。

Storybook 是行业标准的组件浏览器，我们将用它来演示可视化测试。Twitter、Slack、Airbnb、Shopify、Stripe 和数千家其他公司都采用了它，因此您可以将本指南中的知识应用到您最终工作的任何地方。

为什么要隔离构建 UI？

更少的错误

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

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

更快的开发

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

组件浏览器通过提供一个沙箱来在隔离于应用程序之外的环境中开发 UI，从而使这种分离显而易见。这意味着团队可以同时处理不同的 UI 部分，而不会受到应用程序其他部分的干扰或状态污染。

更轻松的协作

UI 本质上是可视化的。仅代码的拉取请求不能完整地表示工作。为了真正解锁协作，利益干系人必须查看 UI。

组件浏览器可视化 UI 组件及其所有变体。这使得从开发人员、设计师、产品经理和 QA 那里获得关于“这看起来对吗？”的反馈变得容易。

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

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

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

了解工作流程

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