为什么选择 Storybook？
问题
网络的普遍性正在将越来越多的复杂性推向前端。它始于响应式网页设计，它将每个用户界面从一个变成了 10 个、100 个、1000 个不同的用户界面。随着时间的推移，额外的需求不断增加，例如设备、浏览器、可访问性、性能和异步状态。
像 React、Vue 3 和 Angular 这样的组件驱动工具有助于将复杂的 UI 分解成简单的组件，但它们并非万能药。随着前端的发展，组件的数量也在膨胀。成熟的项目可能包含数百个组件，从而产生数千种不同的变体。
更复杂的是，这些 UI 难以调试，因为它们与业务逻辑、交互状态和应用程序上下文纠缠在一起。
现代前端的广度压倒了现有的工作流程。开发人员必须考虑无数的 UI 变体，但却没有能力开发或组织所有这些变体。最终，您会发现 UI 变得更难构建、工作起来不那么令人满意且易于出错。
解决方案
独立构建 UI
每个 UI 片段现在都是一个组件。组件的强大之处在于，您无需启动整个应用程序即可查看它们的渲染方式。您可以通过传入 props、模拟数据或伪造事件来独立渲染特定变体。
Storybook 被打包成一个小型、仅限开发的工作坊，与您的应用程序并存。它提供了一个独立的 iframe 来渲染组件，而不会受到应用程序业务逻辑和上下文的干扰。这有助于您专注于每个组件变体的开发，即使是最难触及的极端情况。
将 UI 变体捕获为“故事”
在独立开发组件变体时，将其保存为一个故事。故事是一种声明性语法，用于提供 props 和模拟数据来模拟组件变体。每个组件可以有多个故事。每个故事都允许您演示该组件的特定变体，以验证外观和行为。
您可以为细粒度的 UI 组件变体编写故事，然后在开发、测试和文档中使用这些故事。
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 跟踪每个故事
Storybook 是您 UI 组件及其故事的交互式目录。过去，您必须启动应用程序、导航到页面并将 UI 扭曲到正确的状态。这浪费了大量时间，并阻碍了前端开发。使用 Storybook，您可以跳过所有这些步骤，直接跳转到在特定状态下处理 UI 组件。
Storybook 在我的项目中处于什么位置？
Storybook 被打包成一个小型、仅限开发的工作坊，与您的应用程序并存。通过运行命令来安装它。
在开发过程中，在单独的节点进程中运行它。如果您正在独立处理 UI，那么您唯一需要运行的就是 Storybook。
Storybook 是否与我喜欢的库兼容？
Storybook 旨在与行业标准工具和平台集成，以简化设置。感谢我们雄心勃勃的开发者社区，我们取得了重大进展。有数百个插件和教程，指导您如何在各种类型的项目中设置 Storybook。
如果您使用的是利基框架或最近推出的工具，我们可能还没有为其提供集成。考虑先自己创建概念验证，为社区的其他成员指明方向。
推荐的 Storybook 工作流程是什么？
每个团队都不同，他们的工作流程也不同。Storybook 旨在逐步采用。团队可以逐步尝试各种功能，以了解哪些功能最适合他们。
大多数社区成员选择使用组件驱动的工作流程。UI 的开发与“自下而上”的页面组装相隔离，从基本组件开始，然后逐步组合以构建页面。
- 独立构建每个组件并为其变体编写故事。
- 将小型组件组合在一起以实现更复杂的功能。
- 通过组合复合组件来构建页面。
- 通过连接数据和业务逻辑将页面集成到您的项目中。
优势
当您为组件编写故事时，您会免费获得许多额外的好处。
📝 开发更耐用的 UI
隔离组件和页面，并将其用例作为故事进行跟踪。验证难以触及的 UI 边缘案例。使用插件模拟组件所需的一切——上下文、API 请求、设备功能等。
✅ 更轻松地测试 UI，且无任何不稳定因素
故事是跟踪 UI 状态的一种务实且可重现的方式。在开发过程中使用它们来现场测试 UI。Storybook 提供了用于自动化组件、可访问性和视觉测试的内置工作流程。或者通过将故事导入其他 JavaScript 测试工具将其用作测试用例。
📚 为您的团队记录 UI 以供重用
Storybook 是您 UI 的唯一真相来源。故事索引您所有的组件及其各种状态，使您的团队能够轻松地找到和重用现有的 UI 模式。Storybook 还会根据这些故事自动生成文档。
📤 分享 UI 的实际工作方式
故事展示了 UI 的实际工作方式，而不仅仅是其预期工作方式的图片。这使每个人都了解当前正在生产环境中的内容。发布 Storybook以获得团队成员的批准。或者将其嵌入到 Wiki、Markdown 和 Figma 中以简化协作。
🚦自动化 UI 工作流程
Storybook 与您的持续集成工作流程兼容。将其添加为 CI 步骤以自动化用户界面测试、与团队成员一起审查实现并获得利益相关者的批准。
编写一次故事，随处重用
Storybook 由组件故事格式提供支持，这是一种基于 JavaScript ES6 模块的开放标准。这使得故事能够在开发、测试和设计工具之间进行互操作。每个故事都导出为一个 JavaScript 函数，使您可以将其与其他工具一起重用。没有供应商锁定。
使用Jest或Vitest和Testing Library重用故事以验证交互。将它们放入Chromatic进行视觉测试。使用Axe审核故事的可访问性。或使用Playwright和Cypress测试用户流程。重用可以解锁更多工作流程，无需额外费用。
Storybook 的设计初衷是帮助您更快地开发复杂的 UI，并提高其耐用性，降低维护成本。它被数百家领先公司和数千名开发者使用。