Storybook项目实战：构建页面级组件的技巧与模式-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01173/article/details/148323391

Storybook项目实战：构建页面级组件的技巧与模式

storybook Storybook是一个独立运行的UI组件开发环境，支持React、Vue、Angular等多种前端框架。它允许开发者在隔离环境中创建、展示和测试UI组件，有助于组件化开发和设计系统的标准化，提高团队协作效率和代码质量。项目地址: https://gitcode.com/gh_mirrors/st/storybook

前言

在现代前端开发中，组件化开发已成为主流范式。Storybook作为业界领先的UI组件开发环境，不仅适用于原子级组件开发，还能高效处理复杂的页面级组件。本文将深入探讨如何在Storybook中构建和展示完整的页面组件，分享两种主流实现模式及其适用场景。

纯展示型页面构建

核心概念

纯展示型页面(Pure presentational pages)是指完全通过props接收数据，不直接处理数据获取、状态管理等副作用的组件。BBC、The Guardian等知名团队都采用这种模式。

实现优势

简化Storybook集成：所有数据通过props传递，无需额外配置即可在Storybook中展示
更好的工具链支持：与Storybook的Controls等工具无缝配合
清晰的关注点分离：业务逻辑与展示逻辑解耦

典型实现示例

// 页面组件实现
function DocumentPage({ user, document, subdocuments }) {
  return (
    <PageLayout user={user}>
      <DocumentHeader document={document} />
      <DocumentList documents={subdocuments} />
    </PageLayout>
  );
}

参数组合技巧

当构建复合页面时，可以使用Storybook的Args Composition特性高效管理故事：

// 页面故事定义
export default {
  component: DocumentPage,
  args: {
    ...PageLayoutStories.default.args,
    ...DocumentHeaderStories.Default.args,
    ...DocumentListStories.Loading.args
  }
};

这种方法避免了重复定义数据，保持DRY原则，特别适合包含多个子组件的大型页面。

连接型组件的处理方案

连接型组件特点

连接型组件(Connected components)通常指：

依赖网络请求获取数据
使用上下文(Context)获取全局状态
访问浏览器环境API

三种处理策略

1. 模块处理(Handling imports)

适用于组件直接导入的依赖模块：

// 在.storybook/preview.js中
jest.mock('../api', () => ({
  fetchData: () => Promise.resolve(mockData)
}));

2. API请求处理(Handling API Services)

处理网络请求的常见方案：

使用Mock Service Worker(MSW)拦截HTTP请求
模拟GraphQL响应
创建内存中的模拟数据库

3. 提供者处理(Handling providers)

针对上下文依赖的解决方案：

// 在故事文件中
const MockThemeProvider = ({ children }) => (
  <ThemeContext.Provider value={mockTheme}>
    {children}
  </ThemeContext.Provider>
);

进阶模式：容器组件上下文

架构设计

通过上下文提供容器组件，实现更灵活的处理：

ProjectStructure/
├── ProfilePage.js          # 展示组件
├── ProfilePage.stories.js  # 故事定义
├── ProfilePageContainer.js # 容器逻辑
└── ProfilePageContext.js   # 上下文定义

实现示例

创建上下文：

// ProfilePageContext.js
import { createContext } from 'react';
export default createContext({});

展示组件使用：

// ProfilePage.js
import { useContext } from 'react';
import ProfilePageContext from './ProfilePageContext';

function ProfilePage() {
  const { UserProfile } = useContext(ProfilePageContext);
  return <UserProfile />;
}

Storybook中处理：

// ProfilePage.stories.js
import MockedUserProfile from './UserProfile.stories';

export const Default = () => (
  <ProfilePageContext.Provider value={{
    UserProfile: () => <MockedUserProfile {...args} />
  }}>
    <ProfilePage />
  </ProfilePageContext.Provider>
);