前言
现在有很多一键生成React应用项目结构的脚手架工具，比如最热门的Create-react-app，给我们的日常开发带来了很大的便利性，但是在享受便捷的同时，却失去了对项目架构及技术栈完整学习的机会。下面我们就来从以下几个方面来简单地了解以下React项目的架构设计吧。
项目结构
首先，我们来看一下项目的目录结构，如下图：
src为应用源代码目录；public为应用静态资源目录；build为前端打包出来的文件，用于部署server.js为node启动前端项目，用于部署config为script eject 出来的webpack的配置文件package.json为项目依赖管理文件；.gitignore, .gitlab-ci.yml为提交git时配置；README.md为项目说明文档；.Dockerignore为做docker的忽视文件配置
最主要的就是丰富src目录，里面是项目的核心部分。
技术栈
- react和react-dom库；
- react前端路由；
- 应用状态管理容器；
- 异步任务管理；
根据以上划分，选用以下第三方库和工具构成项目完整的技术栈：
- react，react-dom；
- react-router-dom;
- react-hooks;
- axios
那么src的具体目录如下图：
components为通用组件；config为网络请求相关配置；method为项目里用到的通用方法；pages为具体页面；store为整个项目里的变量管理文件；index.js, index.css为项目入口文件；
组件划分
React组件化开发原则是组件负责渲染UI，组件不同状态对应不同的UI,一般遵循以下组件设计思路：
- 布局组件：仅仅涉及应用UI界面结构的组件，不涉及任何业务逻辑，数据请求及操作；
- 容器组件：负责获取数据，处理业务逻辑，通常在render()函数内返回展示型组件；
- 展示型组件：负责应用的界面UI展示；
- UI组件：指抽象出的可重用的UI独立组件，通常是无状态组件；
数据流
React是自上而下的单向组件数据流，容器组件&展示组件（也叫傻瓜组件&聪明组件）是最常用的React组件设计方案，容器组件负责处理复杂的业务逻辑以及数据，展示组件负责处理UI层，通常我们会将展示组件抽出来进行复用或者组件库的封装，容器组件自身通过state来管理状态，setState更新状态，从而更新UI，通过props将自身的state传递给展示组件实现通信。
当业务需求不复杂，页面较简单时，我们通常会用上面的方式来管理项目中的数据流。但如果需要实现跨组件通信、状态同步以及状态共享时，通过状态提升至最近的共同父组件来实现。
前端路由
现在React的单页应用的路由基本都是前端自己管理的，而不像以前是后端路由，React管理路由的库常用的就是React-Router。
总结
React 出现已经有一定的时间了。从围绕组件驱动的库发展了一个全面而强大的库生态系统，到现在React 使用户能够使用函数组件创建组件来驱动的用户界面，发展迅速，要想吃透React项目架构实则不易，学习不止！
