reactjs - 使用React层次结构决策的原子设计：原子组件中可以包含哪些内容？

我们正在以成功的方式跟踪Atomic Design在我们的库中组织我们的ReactJS组件。在建立了几十个组件后，我们开始对如何组织生物体产生根本性的怀疑。

我们的目标是建立一个经验法则，以便我们可以构建代码管理工具来正确处理组件，并为我们的团队提供一个标准，以便选择放置新创建组件的位置。

以下是我们采用的规则：

原子：组件中不包含库中的任何其他组件。因此，它不应该有来自其他原子组件的任何import。

Molecules ：是只能导入原子的组件。因此，如果组件具有import NNN from '../atoms/...'，则它将被视为分子。分子不能从自身（分子库）导入成分，而只能导入原子。

在有机体上，我们有第一个根本的疑问。我将把它描述为3个选项：

选项A：

生物：这些是只能导入分子的成分。所以只允许import NNN from '../molecules/...'生物体。如果必须在同一组分中导入分子和原子，它将被视为生物体。

选项B：

生物：这些成分只能导入分子或分子和原子。因此，只允许import NNN from '../molecules/...'或import NNN from '../molecules/...'与import NNN from '../../atoms/...'一起使用。

选项C：

生物：这些成分只能导入分子或分子和原子或分子，原子和生物。因此，只允许import NNN from '../molecules/...'或import NNN from '../molecules/...'以及import NNN from '../../atoms/...'或import NNN from '../molecules/...'以及import NNN from '../../atoms/...'和import NNN from '../../molecules/...'一起使用。

模板：这些组件可以将较低层次的所有组件（原子，分子和有机体）导入。如果它导入单个生物，则它是一个模板。当然，这里可以进口的东西取决于上面的生物选择决定。

页面：可以导入所有内容，因为它的目标是将内容放在较低层次结构元素上。

生物决定将影响层次结构的深度以及库的使用。

似乎原子设计方法论将其概念转移到有机体之上（使用模板和页面），因此有机体应该是较低级别组件的较高聚合器（选项C），但我们可以创建一个新级别，将所有聚合保持在模板级别，因此模板不仅是页面结构，而且实际上是组件结构。

这在ReactJS库开发方面是否有意义，哪种选项最适合开发策略？

使用React层次结构决策的原子设计：原子组件中可以包含哪些内容？

1 个答案: