组件探索器

现代 UI 支持无数种状态、语言、设备、浏览器和用户数据的组合。过去，开发 UI 非常麻烦。你必须在正确的设备上以适当的设置导航到给定的页面。然后你需要四处点击以使页面达到正确的状态，这样你才能开始编码。

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

Storybook 是行业标准的组件探索器，我们将用它来演示可视化测试。它已被 Twitter、Slack、Airbnb、Shopify、Stripe 以及数千家其他公司采用，因此你可以在任何工作环境中使用本指南中的知识。

为什么要隔离构建 UI？

更少的 bug

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

组件探索器通过展示组件支持的变体来防止不一致性。这使得开发者可以独立地关注每种状态。它们可以在隔离环境中进行测试，并且你可以使用模拟来复现复杂的边缘情况。

更快的开发速度

应用永无止境，你需要持续迭代。因此，UI 架构必须具有适应性以容纳新功能。组件模型通过将 UI 与应用程序业务逻辑和后端分离来鼓励互换性。

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

更轻松的协作

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

组件探索器可视化展示 UI 组件及其所有变体。这使得开发者、设计师、产品经理和质量保证人员可以轻松地就“这看起来对吗？”提供反馈。

它如何融入我的技术栈？

组件探索器被打包成一个小的独立沙盒，与你的应用程序一起存在。它允许你在隔离环境中可视化组件变体，并包含以下功能：

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

学习工作流程

使用组件探索器隔离你的 UI 可以开启可视化测试。下一章将向你展示如何为 UI 开发改造测试驱动开发 (TDD)。