六边形架构应用于 TypeScript React 项目

2025-06-08

六边形架构应用于 TypeScript React 项目

介绍

通常,当我们开发 React 应用程序时,我们只关心目录图、钩子、组件、页面、存储等的分离。但这种目录分离并不能保证我们的应用程序将来能够扩展或可维护。

本文将特别介绍六边形架构,以帮助领域驱动设计 (DDD) 。

我们将使用 React 实现一个 TypeScript 项目,以应用 HA(六边形架构)的一些概念

首先,为了保持这种真实性,我们实现了一个现有的 API 来获取狗品种照片。您可以在下面的链接中找到 API 文档。Dog
CEO API 文档

让我们开始吧

我将创建一个 React 应用程序,使用 yarn 并创建 React 应用程序 CLI 和 TypeScript 模板,为此您需要输入以下内容:

yarn create react-app dogapp --template typescript
Enter fullscreen mode Exit fullscreen mode

这将创建一个样板反应应用程序,我们将对其进行修改以实现 HA,首先让我们来谈谈设计。

六角形架构。

六边形架构像洋葱一样分层,并提出三个基础层,即领域层、应用层和基础设施层。

替代 HA 图

六边形架构认为,我们的领域是各层的核心,并且不与任何外部对象耦合。我们不是明确地使用领域,而是遵循依赖反转原则,将自身与契约(接口或端口)耦合,而不是与具体的实现耦合。

代码。

我们将制作一个狗品种应用程序,因此让我们创建一些目录来实现 HA。

为了实现 HA,我们需要分离我们的实现域,因此让我们创建 HA 提出的层。

所以我们需要创建 3 个主文件夹来包含我们的应用程序。

我会在文章末尾将其上传到 github 存储库中。

  • 源码
    • - 领域
    • - 应用
    • - 基础设施

使用这种方法,域文件夹确实知道如何实现,而应用层只能访问域,但不知道基础设施将如何实现

如果你愿意,你可以在我的 github 帐户esaraviam中看到已完成的项目

结论

从 React 应用程序的角度来看,实现这种架构将促使您应用 SOLID 原则,并且您的应用程序将更具可扩展性且易于维护。

它通过使用由外部元素实现的域自己的接口来强制我们的域不与任何外部事物耦合。

它有助于与交付方式分离,使用例更容易适用于移动应用程序、API、传统网站、REST 的单个 Web 应用程序等……

另一方面,它允许您随时准备更改实现细节,例如持久性或框架。
与任何基于依赖项投资的架构一样,它有助于对组件进行单元测试。

鏂囩珷鏉ユ簮锛�https://dev.to/esaraviam/hexagonal-architecture-applied-to-typescript-react-project-enn
PREV
Python 转 .exe 如何将 .py 转为 .exe?分步指南。自动将 .py 转为 .exe
NEXT
互联网崩溃的 13 种方式 - 第 9 种会让您震惊!