为什么选择 Storybook？

问题所在

Web 的通用性正在将更多的复杂性推向前端。一切都始于响应式 Web 设计，它将每个用户界面从 1 个变成了 10 个、100 个、1000 个不同的用户界面。随着时间的推移，其他需求也堆积如山，例如设备、浏览器、可访问性、性能和异步状态。

组件驱动的工具（如 React、Vue 3 和 Angular）有助于将复杂的用户界面分解为简单的组件，但它们并非万能药。随着前端的增长，组件的数量也会膨胀。成熟的项目可能包含数百个组件，这些组件会产生数千种不同的变体。

更复杂的是，这些用户界面很难调试，因为它们与业务逻辑、交互状态和应用程序上下文纠缠在一起。

现代前端的广度使现有的工作流程不堪重负。开发人员必须考虑无数的用户界面变体，但却没有配备开发或组织所有这些变体的工具。最终，用户界面变得更难构建，工作起来更不令人满意，而且也更脆弱。

UI multiverse

解决方案

隔离构建用户界面

现在，每个用户界面部分都是一个组件。组件的超能力在于，您无需启动整个应用程序即可查看它们的渲染效果。您可以通过传入 props、模拟数据或伪造事件来隔离渲染特定的变体。

Storybook 打包成一个小的、仅用于开发的工作台，与您的应用程序并存。它提供了一个隔离的 iframe 来渲染组件，而不会受到应用程序业务逻辑和上下文的干扰。这有助于您专注于组件的每个变体的开发，即使是难以触及的极端情况。

将用户界面变体捕获为“stories”

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

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

Histogram.stories.ts|tsx

import type { Meta, StoryObj } from '@storybook/react';
 
import { Histogram } from './Histogram';
 
const meta: Meta<typeof Histogram> = {
  component: Histogram,
};
 
export default meta;
type Story = StoryObj<typeof Histogram>;
 
export const Default: Story = {
  args: {
    dataType: 'latency',
    showHistogramLabels: true,
    histogramAccentColor: '#1EA7FD',
    label: 'Latency distribution',
  },
};

Storybook 跟踪每个 story

Storybook 是用户界面组件及其 story 的交互式目录。过去，您必须启动应用程序，导航到页面，并将用户界面扭曲到正确的状态。这非常浪费时间，并且拖慢了前端开发的速度。借助 Storybook，您可以跳过所有这些步骤，直接开始处理特定状态下的用户界面组件。

Storybook 在我的项目中处于什么位置？

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

在开发过程中，在单独的节点进程中运行它。如果您正在隔离地处理用户界面，那么您唯一需要运行的就是 Storybook。

Storybook 是否适用于我最喜欢的库？

Storybook 旨在与行业标准工具和平台集成，以简化设置。感谢我们雄心勃勃的开发者社区，我们取得了重大进展。有数百个插件和教程，指导您如何在所有类型的项目中设置 Storybook。

如果您使用的是小众框架或最近推出的工具，我们可能还没有针对它的集成。请考虑先自己创建一个概念验证，为社区的其他人带路。

推荐的 Storybook 工作流程是什么？

每个团队都是不同的，他们工作流程也是如此。Storybook 旨在可逐步采用。团队可以逐步尝试各种功能，以了解哪种功能最适合他们。

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

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

优势

当您为组件编写 story 时，您将免费获得许多额外的好处。

📝 开发更持久的用户界面

隔离组件和页面，并将它们的用例作为 stories 进行跟踪。验证用户界面难以触及的极端情况。使用插件来模拟组件所需的一切——上下文、API 请求、设备功能等。

✅ 以更少的精力和无故障的方式测试用户界面

Stories 是一种务实的、可重现的方式来跟踪用户界面状态。在开发期间使用它们来抽查用户界面。Storybook 为自动化组件、可访问性和视觉测试提供了内置的工作流程。或者通过将 stories 导入到其他 JavaScript 测试工具中，将 stories 用作测试用例。

📚 为您的团队记录用户界面以供重用

Storybook 是用户界面的单一事实来源。Stories 索引您的所有组件及其各种状态，使您的团队可以轻松找到和重用现有的用户界面模式。Storybook 还从这些 stories 自动生成文档。

📤 分享用户界面实际的工作方式

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

🚦自动化用户界面工作流程

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

编写一次 story，处处复用

Storybook 由组件 Story 格式提供支持，这是一种基于 JavaScript ES6 模块的开放标准。这使 stories 能够在开发、测试和设计工具之间互操作。每个 story 都导出为一个 JavaScript 函数，使您可以在其他工具中重用它。没有供应商锁定。

将 stories 与 Jest 或 Vitest 和 Testing Library 一起重用，以验证交互。将它们放在 Chromatic 中进行视觉测试。使用 Axe 审核 story 的可访问性。或使用 Playwright 和 Cypress 测试用户流程。重用解锁了更多工作流程，而无需额外成本。

Storybook 专门用于帮助您更快地开发复杂的用户界面，并具有更高的持久性和更低的维护成本。它被数百家领先公司和数千名开发者使用。