GitHub_Trending/rea/react-conf-app：React 项目中的六边形架构设计

【免费下载链接】react-conf-app 项目地址: https://gitcode.com/GitHub_Trending/rea/react-conf-app

你是否还在为 React 项目中业务逻辑与 UI 组件纠缠不清而头疼？当需求变更时，是否需要修改大量耦合代码？本文将通过 GitHub 热门项目 react-conf-app，带你了解如何用六边形架构（Hexagonal Architecture）解决这些问题，让你的 React 项目更灵活、更易维护。

读完本文你将获得：

• 六边形架构的核心思想与优势
• react-conf-app 项目中的架构分层实践
• 如何在 React 项目中实现业务逻辑与外部依赖解耦
• 状态管理与 UI 组件的分离模式

六边形架构：让业务逻辑不再依赖外部世界

六边形架构（Hexagonal Architecture），又称端口和适配器模式（Ports and Adapters Pattern），由 Alistair Cockburn 提出。它的核心思想是将应用程序核心业务逻辑与外部工具（数据库、UI、第三方服务等）分离，通过「端口」定义交互规则，通过「适配器」实现具体交互。

这种架构像一个六边形：

• 中心：业务逻辑和领域模型（Domain Model）
• 端口（Ports）：定义核心与外部交互的接口（如数据获取、用户操作）
• 适配器（Adapters）：实现端口，连接外部工具（如 API 调用、UI 组件）

react-conf-app 项目结构与架构映射

react-conf-app 是一个 React 技术栈的会议应用，用于展示会议日程、演讲者信息和收藏功能。通过分析项目结构，我们可以清晰看到六边形架构的影子：

src/
├── store/          # 核心业务逻辑（领域层）
├── hooks/          # 业务逻辑封装（应用层）
├── utils/          # 数据处理（端口）
├── components/     # UI组件（外部适配器）
├── app/            # 路由与页面（外部适配器）
└── data/           # 数据存储（外部适配器）

1. 核心业务逻辑层：不依赖任何外部框架

核心业务逻辑位于 src/store 目录，使用 Zustand 状态管理库，但状态管理实现细节被封装，核心逻辑不依赖于 Zustand 或 React。

以 src/store/bookmarkStore.ts 为例，它定义了书签功能的核心逻辑：

type BookmarkState = {
  bookmarks: { sessionId: string; notificationId?: string }[];
  toggleBookmarked: (sessionId: string, notificationId?: string) => void;
};

export const useBookmarkStore = create(
  persist<BookmarkState>(
    (set) => ({
      bookmarks: [],
      toggleBookmarked: (sessionId, notificationId) => {
        set((state) => {
          // 核心业务逻辑：添加/移除书签
          if (state.bookmarks.find(b => b.sessionId === sessionId)) {
            return { bookmarks: state.bookmarks.filter(b => b.sessionId !== sessionId) };
          } else {
            return { bookmarks: [...state.bookmarks, { sessionId, notificationId }] };
          }
        });
      },
    }),
    { name: "react-conf-2025-bookmarks" }
  )
);

这段代码中：

• BookmarkState 定义了领域模型（书签数据结构）
• toggleBookmarked 实现了核心业务逻辑（添加/移除书签）
• 不包含任何 UI 渲染或 API 调用逻辑

2. 端口：定义交互规则，隔离外部依赖

端口（Ports）定义了核心逻辑与外部世界的交互规则。在 react-conf-app 中，src/utils 目录下的工具函数扮演了端口的角色。

src/utils/sessions.ts 定义了会议数据处理的接口：

export const formatSessions = (talks: ApiAllSessions): Session[][] => {
  const allSessions = talks.sessions.map(talk => ({
    id: talk.id,
    title: talk.title,
    // 数据转换逻辑...
  }));
  
  return [
    allSessions.filter(isDayOneSession),  // 第一天会议
    allSessions.filter(isDayTwoSession)   // 第二天会议
  ];
};

这个函数：

• 接收原始 API 数据（外部依赖）
• 转换为核心逻辑需要的 Session 类型（领域模型）
• 不依赖任何 UI 框架或状态管理库

3. 适配器：连接外部世界与核心逻辑

适配器（Adapters）实现端口定义的接口，将外部工具（如 UI 组件、API 客户端）与核心逻辑连接起来。react-conf-app 中的适配器主要有两类：

UI 适配器：components 目录

src/components/TalkCard.tsx 是展示会议信息的 UI 组件，它通过调用核心逻辑而非直接实现业务规则：

export function TalkCard({ session, day, isBookmarked = false }: Props) {
  const { toggleBookmark } = useBookmark();  // 调用业务逻辑钩子
  
  return (
    <ThemedView style={styles.container}>
      <ThemedText>{session.title}</ThemedText>
      <Bookmark 
        session={session} 
        isBookmarked={isBookmarked}
        onPress={() => toggleBookmark(session)}  // 触发业务逻辑
      />
    </ThemedView>
  );
}

这个组件：

• 只负责 UI 渲染，不包含业务逻辑
• 通过 useBookmark 钩子与核心逻辑交互
• 不直接操作状态管理库（如 Zustand）

数据适配器：hooks 目录

src/hooks/useBookmark.ts 实现了书签功能的应用层逻辑，连接核心状态与外部通知服务：

export function useBookmark() {
  const toggleBookmarked = useBookmarkStore(state => state.toggleBookmarked);
  
  const toggleBookmark = async (session: Session) => {
    // 1. 业务逻辑：切换书签状态
    toggleBookmarked(session.id);
    
    // 2. 外部交互：处理推送通知
    if (isBookmarked(session.id)) {
      await scheduleNotification(session);  // 调用通知服务
    }
  };
  
  return { toggleBookmark, isBookmarked };
}

这个钩子：

• 封装核心业务逻辑（调用 store）
• 适配外部服务（推送通知）
• 向 UI 组件提供简洁接口

核心业务逻辑与外部依赖的清晰边界

react-conf-app 通过类型定义强化了架构边界。src/types.ts 定义了核心数据结构：

export type Session = {
  id: string;
  title: string;
  description: string | null;
  startsAt: string;
  endsAt: string;
  speakers: Speaker[];
  room: string;
  isServiceSession: boolean;
};

这个类型定义：

• 是核心业务逻辑的一部分
• 被 UI 组件、数据处理函数共同使用
• 确保各层之间数据交互的一致性

六边形架构带来的实际收益

在 react-conf-app 中，六边形架构带来了这些好处：

1. 业务逻辑可独立测试

核心逻辑（如 src/store/bookmarkStore.ts）不依赖 React 或其他框架，可以直接编写单元测试：

// 伪代码示例
test('toggleBookmarked adds session when not bookmarked', () => {
  const store = createBookmarkStore();
  store.toggleBookmarked('session1');
  expect(store.bookmarks).toContain('session1');
});

2. 轻松替换外部依赖

如果要将状态管理从 Zustand 迁移到 Redux，只需修改 store 目录下的代码，UI 组件和业务逻辑无需变动。

3. 团队协作更高效

• 业务开发者：专注于 store 和 hooks，无需关心 UI 实现
• UI 开发者：专注于 components 和 app，通过 hooks 调用业务逻辑

如何在你的 React 项目中应用六边形架构

基于 react-conf-app 的实践，总结三个关键步骤：

1. 识别核心业务逻辑：哪些是与 UI、数据库无关的纯业务规则？（如书签切换、日程计算）
2. 定义端口：通过函数或接口定义核心与外部的交互（如 src/utils/sessions.ts）
3. 实现适配器：UI 组件调用核心逻辑，数据处理适配外部 API（如 src/components/TalkCard.tsx）

总结：架构清晰，项目才能走得更远

react-conf-app 项目展示了六边形架构在 React 应用中的优秀实践：通过将业务逻辑置于中心，用端口和适配器隔离外部依赖，实现了代码的高内聚、低耦合。

这种架构特别适合：

• 业务逻辑复杂的应用
• 需要长期维护的项目
• 多人协作开发的团队

最后，用项目中的一句话与你共勉：好的架构不是设计出来的，而是演进出来的。从 react-conf-app 开始，尝试在你的项目中引入六边形架构思想，让代码更健壮、更易维护。

如果你觉得本文有帮助，欢迎点赞、收藏，关注作者获取更多 React 架构实践！

【免费下载链接】react-conf-app 项目地址: https://gitcode.com/GitHub_Trending/rea/react-conf-app