数栈技术分享：利用 Atomic 构建 React 项目工做流，so easy!
数栈是云原生—站式数据中台PaaS，咱们在github和gitee上有一个有趣的开源项目：FlinkX，FlinkX是一个基于Flink的批流统一的数据同步工具，既能够采集静态的数据，也能够采集实时变化的数据，是全域、异构、批流一体的数据同步引擎。你们喜欢的话请给咱们点个star！star！star！前端
github开源项目：https://github.com/DTStack/fl...git
gitee开源项目：https://gitee.com/dtstack_dev...github
用过 React 的朋友都知道，React 项目文件夹的划分是有不少种的，在 React 官方关于文件结构这个部分给出了一些社区比较常见的构建方式的示例。例若有经过features或者routes进行分组的，也有经过模块类型（type) 划分的。在文档提到了一种针对components 进行细化组织的方法 —— Atomic Design。若是还没了解过这个设计方法的朋友，不妨来看一看。
1、什么是Atomic架构
Atomic 是一套指导设计前端组件（Components）架构的方法。在咱们的平常工做中，如何更好的划分和管理前端组件经常会是咱们碰到的问题。Atomic 经过一系列设计思想和原则，能够很好指导咱们的项目架构。用 Atomic 做者本身的话说，这套设计方法的灵感是来自于本身曾经学习过的化学课，以及对天然知识自己的思考。做者经过原子（Atoms)、分子(Molecules)、 有机体(Organisms)、模板(Templates), 页面(Pages) 这5种基本类型组件，经过灵活的组合，从而来知足咱们平常的页面开发需求。ide
一、原子（Atoms）工具
正如化学知识中所表述的，原子（Atoms)是元素能保持其化学性质的最小单位，因此正好利用原子的概念，能够用来组件系统中的最小单位的组件，或者说抽象到最小粒度的组件，即咱们在 HTML 中常见的一些基本元素，例如：按钮（buttons)，表单标签(labels)，输入控件（input)等等。既然是最小单位，Atom 类型的组件显然是没法再进行任何拆分了，若是能继续拆分，那么该组件应该被划分为分子组件（Molecules）。布局
二、分子（Molecules）学习
咱们都知道，在化学概念中，分子是有若干原子组成。经过组合各类原子组件，咱们能够轻易的能够组合出某种功能的分子组件。例如经过组合 input 控件和 button 组件，咱们能够获得一个搜索（Search)分子组件，经过组合 button 和 a 标签，能够能够组合分页（Pagination）组件。atom
三、有机体（Organisms）spa
仅靠分子组件和分子组件的抽象，仍然是不能知足咱们实际工做中对组件复用的需求，例如咱们咱们大部分项目中都有导航栏（Navigation Bar)、页头（Header)、页脚（Footer)、边栏（Sidebar)、列表（List) 等等组件，显然能够根据须要能够抽象成独立组件，以便后来的项目能够直接使用。能够看到的是，在有原子和分子组件的状况下，咱们经过灵活组合这些原子、分子组件的方式，即可轻易达到咱们的需求。而经过这类方式组合的组件类型咱们便称之为有机体组件（Organisms)。
四、模板（Templates）
到这里，模板层就很好理解了。很显然，模板层是原子、分子、有机组件的结合体。例如包含头部（Header、Content、Footer)常见部分的首页模板、又或者各类左右上下布局模板组件等等。
五、页面（Pages）
页面这一层多是复用率最低的一层了，由于业务需求大部分时候各不相同的，固然也不排除有复用页面的状况。页面组件天然就是个包含了其余四种组件类型的综合体了。有了前几层组件的抽象，能够轻松的应对各类业务页面，而且不断地能够丰富新组件到各种型本身中去，以便后面的项目中持续使用。
综合看下来，经过这5种组件的划分，就能够很好的知足咱们实际项目中对页面组件进行划分和管理了。
2、Atomic实践
根据 Atomic 的思路, 以 src 目录为基础，在 React 项目中，我能够获得了相似以下的开发目录：
固然，像我一般喜欢把 pages 的层级提升，也就是把他与 components 同层，也就是：
这里有个仓库 Demo 能够参考：
https://github.com/wewoor/ato...
3、总结
在实际工做中，每每咱们会引用第三方的组件库，因此不少粒度组件都不须要咱们编写，或者说须要咱们独立编写的只有不多一部分，那么能够根据本身的实际情况来适当的缩减目录结构，包括目录名称，在跟项目成员沟通达成一致的状况下，也能够用其余的命名规则。若是你正在设计一个完整的 UI 组件系统的话，或者你在开发一个大型的Web系统，那么更详细的划分规则可能会更有利于后期的维护和开发了。
Atomic 始终是一套设计思想，在实践中咱们能够更灵活的根据本身业务，团队的状况进行合适的调整，从而更好的知足咱们的开发需求。
更详细内请看Atomic Design：