如何在5个步骤中组织反应项目

如何将大型的Reaction应用程序组织成文件夹和文件是一个非常固执己见的话题。关于这个主题，我挣扎了一段时间，因为没有正确的方法。然而，每隔一周，人们就会问我如何组织我的反应项目。不仅是关于小型Reaction项目的文件夹结构，更重要的是关于可伸缩的Reaction应用程序。在实施了几年的REACT应用程序之后，我想向您细分一下我是如何处理这件事的。

对于任何说我会移动文件直到感觉正确为止的人：作为一个单独的开发人员或在一个小团队中，这可能是可以的。但是，在一个由4名开发人员组成的跨职能团队中，公司中总共有5个跨职能团队，您真的会这样做吗？在规模较大的团队中，在没有清晰愿景的情况下只移动文件会变得很棘手。此外，当我的客户问我这件事时，我也不能告诉他们这件事。因此本演练作为参考..。

第一步遵循规则：一个文件来统治所有文件。大多数Reaction项目都以一个src/文件夹和一个带有App组件的src/App.js文件开始。至少这是你使用Create-Reaction-App时得到的。这个App Function组件只是呈现了一些东西：

最终，该组件添加了更多功能，它的大小自然会增长，并且需要提取其中的一部分作为独立的Reaction组件。下面我们从App组件中提取一个带有另一个子组件的Reaction List组件：

每当您开始一个新的Reaction项目时，我都会告诉人们在一个文件中包含多个组件是很好的。无论何时，只要一个组件与另一个组件紧密相连，在较大的Reaction应用程序中就更好了。然而，在此场景中，最终您的一个文件将不再足以满足您的Reaction项目。这就是我们过渡到第二步的时候。

第二步遵循规则：多个文件来规则所有文件。以我们之前的App组件及其List和ListItem组件为例：我们可以将这些组件拆分到多个文件中，而不是将所有内容都放在一个src/App.js文件中。你决定把它带到这里走多远。例如，我会使用以下文件夹结构：

虽然src/List.js文件将具有List和ListItem组件的实现详细信息，但它只会将List组件作为公共API从文件导出到此文件：

如果您想更进一步，您还可以将ListItem组件提取到它自己的文件中，并让ListItem组件导入ListItem组件：

但是，如前所述，这可能会做得太过了，因为到目前为止，ListItem组件与List组件紧密耦合。因此，可以将其保留在src/List.js文件中。我遵循的经验法则是，每当Reaction组件成为可重用的Reaction组件时，我都会将其拆分为独立文件，就像我们对List组件所做的那样，以使其可供其他Reaction组件访问。

从这里开始，它变得更加有趣，也更加固执己见。每个Reaction组件最终都会变得更加复杂。这不仅是因为添加了更多的逻辑(例如，使用条件呈现或Reaction Hooks的JSX更多)，还因为有更多的技术问题，比如样式和测试。一种简单的方法是在每个Reaction组件旁边添加更多文件。例如，假设每个Reaction组件都有一个测试和一个样式文件：

人们已经可以看到，这并不能很好地扩展，因为src/文件夹中每增加一个组件，我们就会更多地看不到每个单独的组件。这就是为什么我希望每个Reaction组件都有一个文件夹的原因：

这些文件的命名由您决定。例如，index.js可能会变成Component.js，而test.js可能会变成spec.js。此外，如果您使用的不是CSS，而是类似于样式组件的内容，那么您的文件扩展名可能也会从style le.css更改为style.js。一旦您习惯了您的命名约定，您就可以在IDE中搜索列表索引或App test来打开每个文件。如果折叠所有组件文件夹，则具有非常简洁和清晰的文件夹结构：

如果某个组件有更多的技术问题，例如，您可能希望将某些组件的自定义挂钩提取到它们自己的文件中，则可以在Component文件夹中水平扩展此方法：

如果您决定通过将ListItem组件解压到其自己的文件中来保持list/index.js的轻量级，那么您可能希望尝试以下文件夹结构：

在这里，您还可以更进一步，将包含所有其他技术问题(如测试和样式)的自己的文件夹提供给组件：

重要提示：从这里开始，您需要注意不要将组件嵌套得太深。我的经验法则是我嵌套的组件永远不会超过两层，所以List和ListItem文件夹应该没问题，但是LI