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

2020-05-02 17:49:23

如何将大型的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