时至今日，对项目架构的设计判断仍是一项极为复杂的难题。每小我在启动项目之初，都邑参考一系列分歧的文章与博客，进展借此确定项目架构的具体斥地方式。
给设计质量低下的项目“擦屁股”，或者要比设计好项目加倍难题。
您的项目架构应该简练且直观，如许当有新的斥地人员接办治理时，才可以在懂得数据跟踪及其背后施展的 UI 路径时不致赶上太多无法懂得的问题。
人们使用的是架构而非一个个自力组件，是以架构中的各个组件应该只是自力的文件。
为什么我们的项目架构应该尽量强调简练与直观？易于治理。易于懂得。编码经由优化。组件更新更简洁。文件或许组件越小，调试起来越轻松。
下图所示，就是本文想要表达的根基概念。
项目的架构
下面，我们将经由一系列明确的流程匡助人人认识项目的构造设计体式：
组件划分
组件越小，就越易于处理
将 UI 拆分成一个个小型组件。代码行（LOC）越少，我们对代码的掌控能力就越强，调试与需要时的更新也就越简洁。人人能够测验经由以下体式增加项目的架构：将民众组件移动到分歧的目录傍边。将每个文件的组件容纳量限制为 2 到 3 个，且确保个中不包含民众代码组件。测验对组件进行归纳，以便在分歧的用例中频频使用。将彼此相关的组件划分到统一个目录傍边，且包管这些目录不会在目录之外的组件中使用。
辅助函数
辅助函数应该壮大且中立
辅助函数应该与衬着逻辑区分隔来。仅在组件需要时使用辅助函数，且一样应该进行声明。辅助函数的感化在于：
* 处理从办事器处领受到的数据以适应 UI 逻辑。特定于组件逻辑。与浏览器规范相关。与斥地人员实施的逻辑相关，其经由分歧的尺度以杀青方针。将彼此相关的组件划分到统一个文件傍边，将民众函数划分至utils* 文件傍边。
API 办事
办事是数据间的链接办事声明应作为 API 挪用的根基实现。应接管设置（变量等）以作为 API 挪用的需要参数进行传递。应将从办事器处领受到的数据原样传递给挪用组件。若是使用 React 以及 Apollo，请行使 Render Props 方式构建办事组件。
Config
Config 是接入办事器的要害
Config 傍边包含关于应用法式运行地点情况的具体设置。请确保将设置与实际代码库拆分隔来。设置该当：使用分歧的文件对应分歧的情况类型。凭据需要获取的分歧资源类型（包罗资产域、办事器 API URL 等）而有所分歧。
路由
路由是保障 UI 使用体验的首要体式
路由决意着我们在 Web 应用法式傍边需要实现的分歧页面的 URL 花样或模式。在界说路由时，需要注重以下几点：尽或者连结路由的准确顺序，以包管 UI 路径不致丢失。路由的定名应该尽或者简短。
Static
Static 文件是指未包含在逻辑傍边的文件
Static 文件分歧于 CSS、图像、js（很少调换）以及字体等文件。Static 文件（静态文件）应该：
* 凭据其类型进行分组。尽或者降低其体积。
页面
页面代表着 Web 应用法式傍边的分歧方针
作为来自 NextJS 中的概念，页面容录中的目录或文件，代表着路由路径的目的地。如斯一来，当我们在破译路由并拆分出组件时，就可以轻松将路由与目的地关系起来。页面应该：仅包含路由及另外组件之间的接触点。包含引用初始前提以指导页面的各个文件。不包含完整逻辑，我们应该将逻辑凭据功能移动至分歧的组件傍边。卖力进行定名，因为该文件的名称代表着 build 文件与路由组件（在使用 NextJS 的情形下）。
Graphql 查询
Graphql 是从办事器傍边获取数据的数据查询说话
Graphql 要求查询花样行使特定键获取数据。这种查询说话的文件就好凭据分歧的查询与分歧的文件留存在分歧的目录傍边。具体要求包罗：各查询应凭据特定类型进行分组，且分歧类型在组内对应分歧的目录。以同样的体式对变异与订阅进行分组。应将部门查询片段从查询傍边剔除，例如分歧目录中的民众代码片段。尽或者为各个查询、变异等名称保留前缀，用以区分恳求分歧办事器的分歧 Web 应用，例如 abcPost 查询与 xyzPost 查询等。如许可以更轻松区域分指向分歧 Web 应用法式的沟通查询。当组件傍边包含或许需要文件时，请尽量将名称保留为大写形式，以确保斥地人员可以轻松判断组件与查询之间的区别。
另外注重事项
另外可以为 Web 应用法式供应助力的对象与技能
这部门内容包罗可用于启动应用法式、治理 build、治理电子表格以及治理所使用文件语法的分歧对象。这些对象应包罗：用于启动前端办事器的 Server 文件。用于指定项目中所使用包或模块的包清单文件。用于描述项目规范、项目发布与使用体式、来由以及内容等分歧要素的 Readme.md 文件。若是使用 babel 进行剧本编译，则应包含.babelrc 文件。在使用 webpack 作为绑缚对象时的 Webpack 设置。若是使用任何另外对象或软件包（例如 apollo-client），则应为该软件包的设置建立新的目录，因为该文件傍边或者包含多个彼此相关的文件。
