为什么选择 Storybook？

问题

网络的普遍性将越来越多的复杂性推向了前端。它始于响应式网页设计，将每个用户界面从一个变成了 10、100、1000 个不同的用户界面。随着时间的推移，设备、浏览器、可访问性、性能和异步状态等其他需求也随之而来。

像 React、Vue 3 和 Angular 这样的组件驱动工具有助于将复杂的 UI 分解为简单的组件，但它们并非万能药。随着前端的增长，组件的数量也会急剧增加。成熟的项目可能包含数百个组件，产生数千种不同的变体。

更糟糕的是，这些 UI 由于与业务逻辑、交互状态和应用程序上下文纠缠在一起，因此调试起来非常痛苦。

现代前端的广度压倒了现有的工作流程。开发人员必须考虑无数的 UI 变体，但又无法全部开发或组织它们。最终，UI 的构建变得更加困难，工作起来也不那么令人满意，而且容易出错。

UI multiverse

解决方案

独立构建 UI

UI 的每一部分现在都是一个组件。组件的强大之处在于，您无需启动整个应用程序即可查看它们的渲染方式。通过传入 props、模拟数据或伪造事件，您可以独立渲染特定的变体。

Storybook 被打包成一个小的、仅用于开发的工作坊，它与您的应用程序并存。通过运行命令即可安装。

将 UI 变体捕获为“Stories”

当独立开发组件变体时，请将其保存为 Story。 Stories 是一种声明式语法，用于提供 props 和模拟数据来模拟组件变体。每个组件可以有多个 Stories。每个 Story 允许您演示该组件的特定变体，以验证外观和行为。

您为细粒度的 UI 组件变体编写 Stories，然后在开发、测试和文档中使用这些 Stories。

Histogram.stories.ts|tsx

// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, nextjs-vite, etc.
import type { Meta, StoryObj } from '@storybook/your-framework';
 
import { Histogram } from './Histogram';
 
const meta = {
  component: Histogram,
} satisfies Meta<typeof Histogram>;
 
export default meta;
type Story = StoryObj<typeof meta>;
 
export const Default: Story = {
  args: {
    dataType: 'latency',
    showHistogramLabels: true,
    histogramAccentColor: '#1EA7FD',
    label: 'Latency distribution',
  },
};

Storybook 跟踪每个 Story

Storybook 是一个交互式的 UI 组件及其 Stories 的目录。过去，您需要启动应用程序，导航到某个页面，然后将 UI 调整到正确的状态。这非常浪费时间，并且会拖慢前端开发。使用 Storybook，您可以跳过所有这些步骤，直接专注于特定状态下的 UI 组件。

Storybook 在我的项目中扮演什么角色？

Storybook 被打包成一个小的、仅用于开发的工作坊，它与您的应用程序并存。通过运行命令即可安装。

在开发过程中，请在单独的节点进程中运行它。如果您在独立开发 UI，唯一需要运行的就是 Storybook。

Storybook 能否与我喜欢的库一起使用？

Storybook 旨在与行业标准工具和平台集成，以简化设置。得益于我们充满活力的开发者社区，我们取得了显著的进展。有数百个插件和教程，介绍如何在各种项目中设置 Storybook。

如果您使用的是小众框架或最近推出的工具，我们可能还没有集成。可以考虑先自己创建一个概念验证，为社区开辟道路。

推荐的 Storybook 工作流是什么？

每个团队都不同，他们的工作流也不同。Storybook 被设计成可以渐进式地采用。团队可以逐步尝试功能，看看哪种最适合他们。

大多数社区成员选择组件驱动的工作流。UI 从“自下而上”地独立开发，从基本组件开始，然后逐步组合以组装页面。

独立构建每个组件，并为其变体编写 Stories。
将小型组件组合在一起以实现更复杂的功能。
通过组合复合组件来组装页面。
通过挂载数据和业务逻辑将页面集成到您的项目中。

优势

当您为组件编写 Stories 时，您可以免费获得许多额外的优势。

📝 开发更持久的 UI

隔离组件和页面，并将它们的使用场景跟踪为 Stories。验证 UI 中难以触及的边缘情况。使用插件模拟组件所需的一切——上下文、API 请求、设备功能等。

✅ 更轻松地测试 UI，无抖动

Stories 是跟踪 UI 状态的实用且可重现的方法。在开发过程中使用它们进行即时测试。Storybook 提供了用于自动交互、可访问性和视觉测试的内置工作流。或者，通过将 Stories 导入其他 JavaScript 测试工具来将它们用作测试用例。

📚 为团队提供可复用的 UI 文档

Storybook 是您 UI 的单一事实来源。Stories 索引了您所有的组件及其各种状态，方便您的团队查找和重用现有的 UI 模式。Storybook 还会从这些 Stories 中自动生成文档。

📤 分享 UI 的实际工作方式

Stories 展示了 UI 的实际工作方式，而不仅仅是它们应该如何工作的图片。这使每个人都能对当前生产环境中的内容保持一致。发布 Storybook 以获得团队成员的批准。或者嵌入到 wiki、Markdown 和 Figma 中，以简化协作。

🚦 自动化 UI 工作流

Storybook 与您的持续集成工作流兼容。将其添加为 CI 步骤，以自动化用户界面测试，与团队成员审查实现，并获得利益相关者的批准。

一次编写 Stories，随处复用

Storybook 由组件 Story 格式 (Component Story Format) 驱动，这是一种基于 JavaScript ES6 模块的开放标准。这使得 Stories 可以在开发、测试和设计工具之间进行互操作。每个 Story 都被导出为一个 JavaScript 函数，使您能够与其他工具重用它。没有供应商锁定。

重用 Stories 与 Jest 或 Vitest 和 Testing Library 来验证交互。在 Chromatic 中进行视觉测试。使用 Axe 审计 Story 的可访问性。或使用 Playwright 和 Cypress 测试用户流程。重用可以带来更多工作流，而无需额外成本。

Storybook 旨在帮助您更快地开发复杂的 UI，提高耐久性并降低维护成本。它被 100 多个领先公司和数千名开发人员使用。