后端开发教程 - Java、Spring Boot 实战 - msg200.com
第 2 部分：文件夹结构 - 构建坚实的基础
欢迎来到“2023 年 React 最佳实践”系列的第二部分！在本篇博文中，我们将深入探讨组织项目文件夹结构的关键环节。
关键是要保持清晰、有序的结构，以便于查找和管理您的文件。
精心设计的文件夹结构对于维护干净且可扩展的代码库、改善团队成员之间的协作以及提高整体开发效率至关重要。
React 项目中常用的文件夹结构有多种类型，包括基于组件的结构、基于功能的结构和基于领域的结构。
虽然有各种可用的文件夹结构选项，但“基于功能的结构”被认为是在 React 项目中组织代码库的最佳方法之一。
它通过根据特性或功能而不是技术层对相关文件和组件进行分组来促进模块化、可扩展性和可维护性。
以下是基于特征的结构通常更受青睐的一些原因：
1. 模块化和关注点分离
2. 代码可重用性
3. 可扩展性和团队协作
4. 更易于导航和理解
5. 维护和重构
让我们考虑一个社交媒体应用程序（例如Facebook应用程序）的示例，以便更好地理解基于特征的结构在实践中如何运作。
我们需要创建基础文件夹，作为基于特性的结构的基础。这些基础文件夹是组织代码的起点，并为整个项目提供清晰的结构。
src/
├── features/ // Grouping features of the application
│ └── ... // Other feature folders
├── shared/ // Shared elements used across multiple features
│ ├── components/ // Reusable components
│ ├── services/ // Shared services or API calls
│ ├── hooks/ // Custom hooks
│ ├── hoc/ // Higher-order components
│ ├── slices/ // Redux slices for state management
│ └── utils/ // Utility functions
├── assets/ // Storing static assets
│ ├── images/ // Storing image files
│ ├── fonts/ // Storing font files
│ └── ...
├── styles/ // Global styles
│ └── ...
├── App.jsx // Entry point of the application
└── ... // Other necessary files and folders
在这个结构中，
- features 文件夹用于根据应用程序的不同特性或功能对代码进行分组。每个特性都有自己的子文件夹。
- 共享文件夹包含各种子文件夹，如components、services、hooks、hoc、slices和utils，用于存储跨多个功能使用的共享元素。
- 资产文件夹用于存储静态资产，例如图像、字体或其他媒体文件。
- 样式文件夹是您可以放置全局样式或样式相关文件的地方。
- App.jsx代表应用程序的主要组件或入口点。
在 Facebook 中，我们可能有“新闻提要”、“个人资料”和“聊天”等功能。我们会在 features 目录下为每个功能创建单独的子文件夹。
让我们在“ News Feed ”下添加子文件夹。
src/
├── features/
│ ├── news-feed/ // Folder for the News Feed feature
│ │ ├── components/ // Components related to the News Feed
│ │ ├── containers/ // Containers or pages related to the News Feed
│ │ ├── services/ // Services or API calls specific to the News Feed
│ │ ├── utils/ // Utility functions specific to the News Feed
│ │ ├── slices/ // Redux Slices to manage states specific to the News Feed
│ │ └── ...
│ └── ... // Additional feature folders
├── ...
├── App.jsx
└── ...
在这个结构中，
components文件夹包含专用于新闻推送功能的 React 组件。这些组件负责用户界面的呈现和渲染。它们专注于应用程序的视觉方面，并处理数据的显示。组件通过 props 接收数据，并渲染JSX来定义UI 的结构和外观。
容器文件夹包含容器组件（也称为智能组件或连接组件），负责将应用程序的数据和逻辑与展示组件连接起来。它们负责数据获取、状态管理，并向展示组件提供数据和功能。
让我们深入了解容器文件夹。
news-feed/
├── components/ // Folder for presentation components
│ └── ... // Additional components related to the News Feed feature
├── containers/ // Folder for container components
│ ├── news-feed-page/ // Folder for the News Feed page container
│ │ ├── NewsFeedPage.jsx // Container component for the News Feed page
│ │ ├── NewsFeedPageStyles.css // Styles specific to the News Feed page
│ │ ├── NewsFeedPageUtils.js // Utility functions specific to the News Feed page
│ │ ├── useNewsFeedPage.js // Custom hook for managing News Feed data, events and callbacks
│ │ └── ... // Additional files related to the News Feed page
│ └── ...
└── ...
请检查“ React 中的关注点分离”以了解“ container ”文件夹下上述文件的分离情况。
我们的应用程序文件夹的最终结构将如下所示，提供一种组织良好且模块化的方法来组织我们的代码库：
src/
├── features/
│ ├── news-feed/
│ │ ├── components/
│ │ │ ├── PostItem.jsx
│ │ │ ├── CommentItem.jsx
│ │ │ ├── LikeButton.jsx
│ │ │ └── ...
│ │ ├── containers/
│ │ │ ├── news-feed-page/
│ │ │ │ ├── NewsFeedPage.jsx
│ │ │ │ ├── NewsFeedPageStyles.css
│ │ │ │ ├── NewsFeedPageUtils.js
│ │ │ │ ├── useNewsFeedPage.js
│ │ │ │ └── ...
│ │ │ ├── PostDetailsPage.jsx
/* No need to create separate folder if
container have less functionality and logic */
│ │ │ └── ...
│ │ ├── services/
│ │ │ ├── newsFeedService.js
│ │ │ └── ...
│ │ ├── utils/
│ │ │ ├── dateUtils.js
│ │ │ └── ...
│ │ ├── slices/
│ │ │ ├── newsFeedSlice.js
│ │ │ └── ...
│ │ └── ...
│ ├── profile/
│ │ ├── components/
│ │ │ ├── ProfileInfo.jsx
│ │ │ ├── Avatar.jsx
│ │ │ ├── ProfileSettings.jsx
│ │ │ └── ...
│ │ ├── containers/
│ │ │ ├── ProfilePage.jsx
│ │ │ └── ...
│ │ ├── services/
│ │ │ ├── profileService.js
│ │ │ └── ...
│ │ ├── utils/
│ │ │ ├── validationUtils.js
│ │ │ └── ...
│ │ ├── slices/
│ │ │ ├── profileSlice.js
│ │ │ └── ...
│ │ └── ...
│ └── ...
├── shared/
│ ├── components/
│ ├── services/
│ ├── hooks/
│ ├── hoc/
│ ├── slices/
│ ├── utils/
│ ├── assets/
│ └── styles/
│ └── ...
├── App.jsx
└── ...
将组件组织到各自的功能文件夹中，有助于清晰地分离关注点，并更轻松地定位和使用特定组件。此外，它还能提升应用程序内代码的可重用性和模块化。
注意：提供的文件夹结构仅为示例，可能会根据项目的要求和偏好而有所不同。
请继续关注第 3 部分：组件结构 - 在 React 中构建可重用和可维护的组件！
编码愉快！😊👩💻👨💻
鏂囩珷鏉ユ簮锛�https://dev.to/sathishskdev/part-2-folder-struct-building-a-solid-foundation-omh