什么是故事？

故事捕获 UI 组件的渲染状态。开发人员为每个组件编写多个故事，描述组件支持的所有“有趣”状态。

安装 Storybook 时，CLI 会创建示例组件，展示你使用 Storybook 可以构建的组件类型：按钮、页眉和页面。

每个示例组件都有一组故事，展示它支持的状态。你可以在 UI 中浏览这些故事，并在以 .stories.js|ts 结尾的文件中查看它们的代码。这些故事是用 组件故事格式 (CSF) 编写的，它是一种基于 ES6 模块的编写组件示例的标准。

让我们从 Button 组件开始。故事是一个描述如何渲染目标组件的对象。以下是如何在“primary”状态下渲染 Button 并导出一个名为 Primary 的故事。

import type { Meta, StoryObj } from '@storybook/react';
 
import { Button } from './Button';
 
const meta: Meta<typeof Button> = {
  component: Button,
};
 
export default meta;
type Story = StoryObj<typeof Button>;
 
export const Primary: Story = {
  args: {
    primary: true,
    label: 'Button',
  },
};

通过点击 Storybook 侧边栏中的 Button 来查看渲染后的 Button。请注意，args 中指定的价值观被用来渲染组件，并且与 Controls 选项卡中所显示的价值观相匹配。在故事中使用 args 还有其他好处

• Button 的回调会被记录到 Actions 选项卡中。点击尝试一下。
• Button 的参数可以在 Controls 选项卡中动态编辑。调整控件。

使用故事

Storybook 使得一次在一个组件的一个状态（也称为故事）上工作变得很容易。当你编辑组件的代码或它的故事时，Storybook 会在浏览器中立即重新渲染。无需手动刷新。

创建新故事

如果你正在处理一个还没有任何故事的组件，你可以在侧边栏中点击 ➕ 按钮来搜索你的组件，并为你创建一个基本故事。

你也可以为你的新故事创建一个故事文件。我们建议你将现有的故事文件复制粘贴到组件源文件旁边，然后根据你的组件调整它。

如果你正在处理一个已经包含其他故事的组件，你可以使用 Controls 插件 来调整控件的值，然后将这些更改保存为一个新故事。

或者，如果你愿意，你可以直接编辑故事文件的代码，为你的故事添加一个新的命名导出。

编辑故事

使用 Controls 插件 来更新故事中控件的值。然后你可以将这些更改保存到故事中，故事文件代码就会为你更新。

当然，你也可以直接更新故事的代码。

故事也有助于你在进行更改时检查 UI 是否仍然看起来正确。 Button 组件有四个故事，展示了它在不同用例中的情况。现在查看这些故事，确认你对 Primary 的更改是否在其他故事中引入了非故意的错误。

在开发过程中检查组件的故事有助于防止意外回归。 与 Storybook 集成的工具可以为你自动执行此操作。

现在我们已经了解了故事的基本结构，让我们看看如何使用 Storybook 的 UI 来开发故事。