React Relay 项目目录结构组织
Posted
技术标签:
【中文标题】React Relay 项目目录结构组织【英文标题】:React Relay project directory structure organization 【发布时间】:2017-08-18 09:19:11 【问题描述】:我开始使用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 中,容器在概念上是一个“智能组件”(参见 this link,并且在组件(纯 React 组件)和容器(带有 redux 数据的“智能组件”)中区分它们是有意义的
p>现在,当我转向 Relay 时,容器在概念上仅与数据相关,与 React 组件相关(请参阅here),这会稍微改变上面的目录结构。
问题:
a) 我应该将组件和容器保存在单独的目录中吗?
b) 我可以称它们为所有组件并将其结构为:
src
|------ containers
|-------- itemcontainer.js (relay container)
|-------- itemcomponent.js (react component)
|-------- itemcomponent.css (react component styling)
那么,没有数据关联的组件如何处理?
c) 我应该做些不同的事情吗?
在 React/Relay 架构中组织组件、容器和样式的最佳方法是什么?
组织 React/Relay 项目结构的最佳方法是什么?
【问题讨论】:
【参考方案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)
您的所有“智能”中继组件(“容器”+“演示文稿”,您称之为“组件”)都将位于 components/
目录中,而您的“愚蠢”组件则无事可做使用 Relay,例如设计系统的组件(例如 Button
、Avatar
等),将位于 ui/
目录中(您可以随意命名)。
如果您想要一种简单的方法来安置和实施上述结构,我创建了一个 CLI relay-butler,它接收 GraphQL fragments
并以该结构输出 Relay 组件。默认情况下它是 TypeScript,但您可以根据需要自定义模板并将其更改为 javascript。
我还建议阅读 relay.dev 文档中关于 Thinking in Relay 的页面,该页面不会告诉您如何构建项目,但确实可以让您了解如何进行。
但最重要的是,正如create-react-app
的合著者之一丹·阿布拉莫夫(Dan Abramov)曾经说过的那样:“移动文件,直到感觉合适为止”(https://twitter.com/dan_abramov/status/1042364018848145408)。
【讨论】:
以上是关于React Relay 项目目录结构组织的主要内容,如果未能解决你的问题,请参考以下文章