React 101：目录结构

背景介绍

创建一个基于React的应用程序可能是令人生畏的，因为React并没有提供一定的目录结构。许多人有自己的结构。和他们一样，我也有自己的看法。

组件的层次结构

我根据组件的用途来看待它们。一般来说，我认为有3种类型的组件--普通、功能和页面。

普通组件是可以通用的组件，如Button,Modal,Accordion 等。这些组件是作为你的应用程序的构建块。

特征组件是由特定特征使用的组件。你可以把功能看作是你为用户提供的一种服务。一个功能组件可以是Authentication 、User ，等等。

最后，页面组件是允许用户使用你的功能和公共组件的组件。这些可以是Settings,Profile, 等。

依赖关系

这三种类型的组件在它们如何相互作用上有一套规则。

	普通组件	特征	页面
常见的	✅
特点	✅	✅如果相同的特征
页码	✅	✅	✅ 如果相同的页面

✅ - 可以使用组件

制定这些规则的原因是，我们希望在不同层级的特定性之间进行关注点的分离。我注意到，当一个应用程序变大后，许多组件会交织到其他地方。

遵循这三层结构的好处是。

• 目录的语义命名使代码库更容易可视化，也使新的工程师更容易理解它。
• 使用别名的绝对路径将更容易理解。

import { Button } from "@common/Button";
import { Dropdown } from "@common/Dropdown";
import { UserAvatar } from "@features/User/components/UserAvatar";

• 构建新的页面会更简单，因为你不需要担心你的核心功能会在哪里。
• 这将促使设计师和工程师更加一致，或使用现有的组件，因为结构是为了可重复使用。

例子。

app/
|-- common/
   |-- Layout/
       |-- __tests__/
       |-- stories/
       |-- index.ts
       |-- Layout.tsx
       |-- Layout.scss
   |-- Button/
       |-- __tests__/
       |-- stories/
       |-- index.ts
       |-- Button.tsx
       |-- Button.scss 
   |-- Modal/
       |-- __tests__/
       |-- stories/ 
       |-- components/
           |-- ModalHeader/
              |-- index.ts
              |-- ModalHeader.tsx
              |-- ModalHeader.scss
           |-- ModalContent/
              |-- index.ts
              |-- ModalContent.tsx
              |-- ModalContent.scss
           |-- ModalFooter/
              |-- index.ts
              |-- ModalFooter.tsx
              |-- ModalFooter.scss
       |-- index.ts
       |-- Modal.tsx
       |-- Modal.scss 
|-- features/
     |-- User/
         |-- __tests__/
         |-- stories/
         |-- components/
             |-- UserAvatar/
                 |-- __tests__/
                 |-- stories/
                 |-- index.ts
                 |-- UserAvatar.ts
                 |-- UserAvatar.scss
         |-- hooks/
             |-- useUser.ts
             |-- useUserMutations.ts
         |-- constants.ts
         |-- helpers.ts
|-- pages/
    |-- Settings/
        |-- __tests__/
        |-- components/
            |-- UserTab/
                |-- __tests__/
                |-- stories/
                |-- index.ts
                |-- UserTab.tsx
                |-- UserTab.scss
        |-- index.ts
        |-- Settings.tsx
        |-- Settings.scss

可以存在于该结构中的其他文件/目录有。

• __tests__
• contexts
• constants
• helpers
• hooks
• stories

为什么index.ts

为了让工程师更简单地找到他们需要的东西，我们使用index.ts 作为组件的入口，同时为实际的实现提供一个命名文件。

// without index.ts
import { Button } from "@common/Button/Button";

// with index.ts
import { Button } from "@common/Button";

弱点

像任何其他目录结构一样，它并不完美。这种目录结构在某种意义上是有意见的，你的团队需要决定你会认为什么是特征。例如，User 与UserProfile 是否不同？UserProfile 能不能住在User 。

另一个人们可能不喜欢的弱点是目录的嵌套方式。

结论

这个目录结构是为了有一个语义的方式来结构你的应用程序。它并不意味着是一个万能的和终极的解决方案。它只是一个有意义的解决方案，对我来说很有效。

如果你喜欢这个目录的某些方面，并想采用它们；请在评论中告诉我你打算如何采用它。如果你不喜欢它或对如何改进它有建议，请在评论中告诉我。

参考资料

reactjs.org/docs/faq-st…