构建 React 组件

你用 create-react-app 设置了项目。你有一个文件App.js和一个文件夹components。你开始编写函数，每天添加新的组件。突然间，同一个文件夹中出现了 30 个文件，你开始不知所措。

您是否对此很熟悉？那么，让我们深入探讨可能的解决方案。

评估您的组件库存

有必要了解每个组件的功能，以及它们在组件层次结构中的位置（从容器到子组件）。为了理解这一点，请仔细检查每个组件，并问自己以下问题：

• 这个组件是容器组件（它保存状态并将其作为道具传递）还是展示组件（它接收道具并呈现它们）？
• 这个组件的父组件是什么，子组件是什么（如，，<Table>）？<TableRow><TableCell>
• 这个组件的可复用性如何？它对处理的数据有多依赖？它生成的标记有多具体？
• 这个组件是否实现了我想要从其他函数调用的函数？

App.js然后，从最底层开始，列出所有组件的完整清单。以下是我使用的模板：

有了这种见解，您就可以构建您的应用程序了。

语义文件夹名称

您将把您的应用程序转换为具有语义文件夹名称的新结构。

首先，构建所有容器和展示组件：

• 布局：代表整体布局结构的容器和展示组件，例如页眉、主页面、导航栏和页脚
• 页面：页面是应用程序的独特部分，它们将主容器组件和所有不可重复使用的展示组件分组
• 组件：所有其他可重复使用的组件，如按钮、卡片、盒子

其次，确定实用程序的性质并将它们移动到适当的文件夹：

• Redux：当您使用 React Redux 时，将所有代码（包括测试）放在此文件夹中。
• 钩子：所有可重复使用的钩子都将放在这里
• Utils：将所有其他导出的函数放在这里

这是应用于我的棋盘游戏应用程序的结构：

src
├── App.js
├── index.js
├── components
│   ├── BgCard.js
│   ├── ...
├── hooks
│   ├── usePagination.js
│   └── withFetchData.js
├── layout
│   ├── Footer.js
│   ├── Loader.js
│   ├── ...
├── pages
│   ├── accountlogin
│   │   └── AccountLogin.js
│   ├── accountregister
│   │   └── AccountRegister.js
│   ├── bgsearch
│   │   ├── BgSearch.js
│   │   ├── BgSearchTable.js
│   │   ├── BgSearchTableRow.js
│   │   ├── ...
│   ├── homepage
│   ├── myaccount
│   ├── mycollection
│   ├── userprofile
│   └── usersearch
├── redux
│   ├── actions.js
│   ├── reducers.js
└── utils
│   ├── utils.js
└── ├── transformXML.js

语义组件名称

你的思路很好。现在，最后一个任务是按照组件出现的语义顺序来命名它们，如上图所示<BgSearch>, <BgSearchTable>, <BgSearchTableRow>。这会给你提供关于复杂页面结构的书面线索，并帮助你思考页面结构。

结论

这篇文章解释了如何将 React 应用构建为符合应用组件层次结构的语义文件夹名称。使用这种结构可以帮助你将每段代码放在明确定义的位置。