带有React和Redux的分形投影结构-利弊
带有React和Redux的分形投影结构-利弊
提问于 2016-07-01 02:10:25
我想知道在React + Redux项目中使用Fractal Structure的优缺点是什么，我想知道是否有人有这种方法的经验，或者是否有从文档中无法立即看到的陷阱。
(分形结构)也称为:自包含应用程序、递归路由层次结构、提供者等
上下文:我正在研究react-redux-starter-kit，它建议使用fractal structure来组织文件夹。如果我理解得很好，这种方法需要按功能组织项目文件夹，并递归嵌套路线。
所以，如果我有一个"events“资源，
/events列出所有events/events/new显示用于插入新event/events/1/details的表单显示有关id为1的事件的详细信息
从样板开始，我必须添加新的路由文件夹，如下所示：
├── src # Application source code
│ ├── main.js # Application bootstrap and rendering
│ ├── components # Reusable Presentational Components
│ ├── containers # Reusable Container Components
│ ├── layouts # Components that dictate major page structure
│ ├── static # Static assets (not imported anywhere in source code)
│ ├── styles # Application-wide styles (generally settings)
│ ├── store # Redux-specific pieces
│ └── routes # Main route definitions and async split points
│ ├── index.js # Bootstrap main application routes with store
│ ├── Root.js # Wrapper component for context-aware providers
~ ~
│ ├── Events # Fractal route
│ │ ├── index.js # Route definitions and async split points
│ │ ├── components # Presentational React Components
│ │ ├── container # Connect components to actions and store
│ │ ├── modules # Collections of reducers/constants/actions or single DUCK module
│ │ └── routes # Fractal sub-routes (** optional) <-------------
│ │ │
│ │ └── New
│ │ │ ├── index.js # Route definitions and async split points
│ │ │ ├── assets # Assets required to render components
│ │ │ ├── components # Presentational React Components
│ │ │ ├── container # Connect components to actions and store
│ │ │ ├── modules # Collections of reducers/constants/actions or single DUCK module
│ │ │ └── routes # Fractal sub-routes (** optional) <-------------
│ │ │
│ │ └── Details
│ │ ├── index.js # Route definitions and async split points
│ │ ├── assets # Assets required to render components
│ │ ├── components # Presentational React Components
│ │ ├── container # Connect components to actions and store
│ │ ├── modules # Collections of reducers/constants/actions or single DUCK module
│ │ └── routes # Fractal sub-routes (** optional) <-------------
~ ~
│ └── NotFound # Capture unknown routes in component
~New和Details文件夹嵌套在根Event文件夹下。
文档强调了这一主要优点：
- 它比平面目录结构具有更好的伸缩性，带有用于组件、容器等的文件夹。使用webpack的代码拆分与合并algorithm
- Since逻辑可以将
- 路由捆绑成“块”。DLL逻辑是独立的，路由可以很容易地拆分到单独的存储库并使用webpack的DLL插件引用，以实现灵活、高性能的开发和DLL。
回答 2
Stack Overflow用户
发布于 2016-07-01 16:13:17
我在类似的结构中遇到的一个缺点或缺点是，如果/当事物开始在层次结构之外使用时，您必须在导入中使用大量的../../..。
例如，假设您得到了在StartPage路由上应该显示最近事件的详细信息的要求。
所以现在看起来是这样的：
routes
├─Events
│ ├─New
│ ├─Details
├─StartPage
├─ components // here somewhere you import ../../Events/Details这不是世界末日，但您的良好层次结构不再是严格的层次结构。
Stack Overflow用户
发布于 2016-07-07 16:36:55
我可以说的一个缺点是无法at a glance查看所有可用路由及其各自的组件，这可以通过一些描述性注释来缓解，但它确实增加了路由配置的复杂性。我还会尽量将嵌套文件夹保持在最低限度，因为在导入语句中获得正确的嵌套级别会带来认知负载，即../../../../../，如果有许多嵌套的路由，这些可能会变得无法控制。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/38130434
复制相关文章
相似问题