React Relay项目目录结构组织

Question

我开始使用Relay和我开始构建项目[我对我的项目结构感到困惑(我确实使用了同构方法).

这是我正常的React项目结构:

-- project
     |-----src
     |       |---components (React components with their respective .css styles)
     |       |---containers (React/Redux containers)
     |       |---helpers (Helpers, common to components and containers)
     |       |---redux (Redux stores)
     |       server.js (node server code)
     |       client.js (client code)
     |       routes.js (routes)
     |       config.js (application config)
     |
     |-----static
     |       |-- ... (static files)
     |-----webpack 
     |       |-- ... (webpack configuration files)

在React/Redux中,容器在概念上是一个"智能组件"(请参阅此链接,以便在组件(纯React组件)和容器(带有redux数据的"智能组件")中区分它们.

现在,当我转向Relay时,容器在概念上仅与数据相关,与React组件有关(参见此处),这将改变上面的目录结构.

问题:

a)我应该将组件和容器保存为单独的目录吗？

b)我应该将它们称为所有组件并将其构造为:

  src
   |------ containers
               |-------- itemcontainer.js (relay container)
               |-------- itemcomponent.js (react component)
               |-------- itemcomponent.css (react component styling)

在这种情况下,如何处理没有数据关联的组件？

c)我应该做些不同的事吗？

在React/Relay架构中组织组件,容器和样式的最佳方法是什么？

组织React/Relay项目结构的最佳方法是什么？

Answer 1

您的问题实际上是一个偏好问题，但如果您想最大限度地提高开发人员体验：

最好不要将你的“容器”和“组件”分开，这样可以很容易地改变组件的数据需求。无论您是使用终端还是 GUI（如文件资源管理器、Finder 或 VSCode）来导航项目，将组件的所有内容都放在一个目录中可以轻松进行更改，尤其是在长期运行和大型团队中，您想要限制摩擦的地方。只需考虑遍历文件结构，可能会阻止“懒惰”的开发人员修复错误或执行简单的任务。

我建议使用这种结构，但要持保留态度：

src
   |------ components
         |-------- ComponentName
               |-------- index.js          (relay container)
               |-------- ComponentNameUI.js  (react component)
               |-------- ComponentName.css (react component styling)
   |------ ui
         |-------- ComponentName
               |-------- index.js          (react component)
               |-------- ComponentName.css (react component styling)

所有“智能”Relay 组件（“容器”+“演示”，您称为“组件”）都将位于该components/目录中，而与 Relay 没有任何关系的“哑”组件，例如组件您的设计系统的文件（如Button等Avatar）将位于该ui/目录中（您可以随意命名）。

如果您想要一种简单的方法来放置和强制执行上述结构，我创建了一个 CLI，relay-butler，它接受 GraphQLfragments并输出该结构中的 Relay 组件。默认情况下它是 TypeScript，但您可以根据需要自定义模板并将其更改为 JavaScript。

我还建议您阅读relay.dev文档中有关“Thinking in Relay”的页面，该页面不会告诉您如何构建项目，但会告诉您如何进行该项目。

但最重要的是，正如 的合著者之一 Dan Abramovcreate-react-app曾经说过的那样：“移动文件直到感觉合适为止”（https://twitter.com/dan_abramov/status/1042364018848145408）。