一种更好的前端组件结构：组件树

文章预览

自很久以前遵循互联网上的建议以来，我一直采用了某种“ 能工作就行 ”的组件结构。 场景 让我们首先想象一个简化的前端应用程序目录结构，如下所示： public/   some-image.jpg pages/   index.tsx components/   Heading.tsx   Logo.tsx   Layout.tsx   BoxContainer.tsx   Footer.tsx 问题所在 上面的简单应用程序结构很难解释这些组件之间是如何相互作用的。 例如，您可能会猜测 Layout.tsx 导入 Footer.tsx 和 Header.tsx ，而这又可能导入 BoxContainer.tsx 。但这仅仅从文件结构上是不清楚的。 更糟糕的是，随着应用程序的增长，组件列表将变得越来越难以推断它们是如何依赖的。 简单方法：扁平组件结构 通常首先想到的是将组件组织到语义正确的目录中。 下面是这种方法的典型结果： public/   some-image.jpg pages/   index.tsx components/   layout/     Layout.tsx     Heading.tsx   ………………………………