storybook react是什么？修订版本明细

源

采纳

编辑于 18天前

半兽人

storybook react是什么？

Storybook React

Storybook for React 是一个用于开发、测试和展示 React 组件的开源工具。它提供了一个独立的开发环境，允许开发者以隔离的方式构建和查看 UI 组件，而无需运行整个应用程序。

1. Storybook for React 是什么？

Storybook 是一个 UI 组件开发工具，最初为 React 开发，现在也支持其他框架（如 Vue、Angular、Svelte 等）。在 React 生态中，Storybook 允许开发者以“故事”（Stories）的形式展示组件的不同状态和变体。每个“故事”是一个组件的特定用例，展示其外观和行为。

Storybook 的核心功能包括：

组件隔离：在独立环境中开发和测试组件，不受应用程序其他部分的干扰。
交互式预览：通过 Storybook 的 UI 界面查看组件的各种状态（如不同 props、状态、主题等）。
文档生成：自动或手动为组件生成文档，便于团队协作和维护。
插件生态：支持丰富的插件，如交互控件（Controls）、无障碍测试（a11y）、主题切换等。
测试集成：与测试工具（如 Jest、Testing Library）结合，支持视觉回归测试和交互测试。

简单来说，Storybook 是一个“组件驱动开发”（Component-Driven Development）的利器，广泛用于构建设计系统、组件库或任何需要高质量 UI 组件的项目。

2. 怎么用 Storybook for React？

以下是使用 Storybook for React 的基本步骤：

步骤 1：安装 Storybook

确保你有一个 React 项目：
如果没有，可以用以下命令创建一个：
```
npx create-react-app my-app
cd my-app
```
安装 Storybook：
在项目根目录运行以下命令，自动初始化 Storybook：
```
npx storybook@latest init
```
这会：
- 安装 Storybook 及其依赖。
- 在项目中创建 .storybook 文件夹（包含配置文件）。
- 在 src/stories 文件夹中生成示例故事。
启动 Storybook：
运行以下命令启动 Storybook 的开发服务器：
```
npm run storybook
```
Storybook 会在浏览器中打开（默认地址为 http://localhost:6006），展示示例组件。

步骤 2：编写 Stories

Storybook 使用“故事”（Stories）来描述组件的不同状态。每个故事是一个 JavaScript/TS 文件，导出组件的特定用例。

例如，假设你有一个 Button 组件：

// src/components/Button.jsx
import React from 'react';

const Button = ({ label, primary, onClick }) => {
  return (
    <button
      style={{
        backgroundColor: primary ? 'blue' : 'gray',
        color: 'white',
        padding: '10px 20px',
        border: 'none',
        borderRadius: '4px',
      }}
      onClick={onClick}
    >
      {label}
    </button>
  );
};

export default Button;

为这个组件创建一个 Story 文件：

// src/stories/Button.stories.jsx
import Button from '../components/Button';

export default {
  title: 'Components/Button', // Storybook 侧边栏中的层级结构
  component: Button, // 指定组件
  argTypes: {
    primary: { control: 'boolean' }, // 控制面板中可以交互的 props
    label: { control: 'text' },
    onClick: { action: 'clicked' }, // 模拟点击事件
  },
};

const Template = (args) => <Button {...args} />;

// 默认故事
export const Default = Template.bind({});
Default.args = {
  label: 'Default Button',
  primary: false,
};

// 主按钮故事
export const Primary = Template.bind({});
Primary.args = {
  label: 'Primary Button',
  primary: true,
};

title：定义故事在 Storybook 界面中的位置。
component：指定要展示的组件。
argTypes：定义 props 的交互方式（如布尔值、文本等）。
Template：一个可复用的组件渲染模板。
每个导出的故事（如 Default、Primary）展示组件的不同状态。

步骤 3：查看和交互

保存文件后，Storybook 会自动更新。你可以在浏览器中：

切换不同故事（Default、Primary）。
使用“Controls”面板动态调整 props（如修改 label 或切换 primary）。
查看组件的行为（如点击按钮会触发 onClick 日志）。

步骤 4：扩展功能（可选）

添加插件：安装常用插件，如 @storybook/addon-a11y（无障碍测试）或 @storybook/addon-docs（自动文档）。
```
npm install @storybook/addon-a11y
```
在 .storybook/main.js 中注册插件：
```
module.exports = {
  addons: ['@storybook/addon-a11y'],
};
```
自定义配置：修改 .storybook/preview.js 或 .storybook/main.js 来调整主题、布局或全局设置。
集成测试：使用 @storybook/testing-library 编写交互测试或视觉回归测试。

步骤 5：部署（可选）

将 Storybook 部署到静态网站（如 Vercel、Netlify）或内部服务器，供团队查看：

npm run build-storybook

这会生成一个静态的 storybook-static 文件夹，可以直接部署。

3. 为什么用 Storybook for React？

Storybook 的使用有以下几个核心优势：

3.1 提高开发效率

隔离开发：开发者可以在不启动整个应用的情况下专注于单个组件，减少干扰。
快速迭代：通过 Storybook 的热重载和交互控件，快速调整组件的外观和行为。
复用性：Storybook 鼓励组件化开发，生成的组件更易于在项目中复用。

3.2 改进团队协作

统一组件库：Storybook 作为一个“活文档”，展示所有组件及其用法，方便设计师、开发者和产品经理对齐。
设计系统支持：许多团队用 Storybook 构建和维护设计系统（如 Airbnb、Shopify），确保 UI 一致性。
跨团队共享：部署后的 Storybook 可以让非开发人员（如 QA 或客户）预览组件。

3.3 提升质量

测试友好：Storybook 支持视觉回归测试、无障碍测试和交互测试，减少 UI 错误。
文档化：通过 Storybook 的 Docs 插件，自动生成组件文档，降低维护成本。
边界用例覆盖：通过编写不同故事，开发者可以覆盖组件的各种状态（如加载中、禁用、错误等）。

总结

Storybook for React 是一个强大的工具，用于以组件为中心的方式开发、测试和展示 UI。它通过隔离环境、交互式预览和文档化功能，提升了开发效率和团队协作能力。使用时，只需安装、编写故事、扩展功能即可，适合从小型项目到企业级设计系统的各种场景。

预览