本文已参与「新人创作礼」活动，一起开启掘金创作之路。
之前两篇文章讲了Ant Design Pro V5 的 基本配置 和 比较重要的五大模块， 这篇文章就比较轻松了，来聊聊 V5 的工作流程，如果是刚接触 V5 的小伙伴，相信这篇文章一定能帮助你~(●￣(ｴ)￣●)
V5 相关的技术栈
Ant Design Pro V5 所用的技术还是比较新的，主要有 react(Hook函数式编程） + ts + ant design + ProComponents + umi + dva + ant design Chart 等, 关于组件的部分没有过多的解释，我们来简单介绍下其他的语言~
React
如果你对它还不了解，请查看：React文档，它是学习该教程的前提。学过Vue的小伙伴，有的反馈说，它比较难上手，不如Vue简单高效。其实这点我个人观点是不同意的，Vue适合小型项目，代码复用低的情况。React难归难，但是一旦上手，便爱不释手。
React Hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。也就是说函数式组件也能拥有状态，并且比class组件的使用更加简洁，请查看： React Hook
dva
dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。简单的说，Dva是在Mobx和Redux基础上的高度封装，使用更简单高效。 请查看：Dva文档
Umi@3
umi 是蚂蚁金服的底层前端框架，已直接或间接地服务了 600+ 应用，是一个可插拔的企业级 react 应用框架。umi 以路由为基础的，支持类 next.js 的约定式路由，以及各种进阶的路由功能，并以此进行功能扩展，比如支持路由级的按需加载。简单的说，有了Umi，从此操作路由变得如此高效简单。 请查看：Umi文档
TypeScript
带类型的 JS，ypeScript 是 javascript 的超集，TypeScript 不仅包含 JavaScript 的语法，同时还提供了静态类型检查和更完善的代码提示功能。任何现有的 JavaScript 程序都是合法的 TypeScript 程序，只需要简单的学习，就可以获得更佳的开发体验。简单来说，ts就是代码检测，使用的时候超级方便，同时也让代码更加规范，更好维护
有兴趣的同学可以先看看相关的文档，这样能加深对 V5 的理解
文件结构
在目录结构这里，本人建议新增一个公共页面，用于存放公共的页面
├── config # umi 配置，包含路由，构建等配置
├── mock # 本地模拟数据
├── public
│ └── favicon.png # Favicon
├── src
│ ├── assets # 本地静态资源
│ ├── commonPages # 公共页面
│ ├── components # 业务通用组件
│ ├── e2e # 集成测试用例
│ ├── layouts # 通用布局
│ ├── models # 全局 dva model
│ ├── pages # 业务页面入口和常用模板
│ ├── services # 后台接口服务
│ ├── utils # 工具库
│ ├── locales # 国际化资源
│ ├── global.less # 全局样式
│ └── global.ts # 全局 JS
├── tests # 测试工具
├── README.md
└── package.json
复制代码页面代码结构推荐，建议将接口单独分离出来~
src
├── components
└── pages
├── Welcome // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
| ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
| ├── index.tsx // 页面组件的代码
| └── index.less // 页面样式
| └── interface.d.ts // 页面复杂，单独把ts拿出来
| └── services.ts // 接口
| └── mock.ts // 模拟数据，大部分不需要
复制代码V5 页面执行顺序
1.首先执行
我们先看看 /scr/app.tsx 这段代码
首先页面打开（无论哪个页面都会执行），会执行 app.tsx 里的 getInitialState ，然后走向queryCurrentUser 这个函数，在这个函数上他会判断 access 是否存在，如果不存在则会报错，发送状态码为401, 然后就会走向登录页面，反之则会停留在当前页面
2.抵达登录页面
到达登录页面后。输入账号密码时走向 fetchUserInfo 这个方法，这个方法主要的作用是存储了一开始登录接口所需的函数
注意，这里进去的页面不会执行 getInitialState 这个函数，所以再次要执行获取用户信息的方法
3.页面切换
我们做的页面会放在浏览器上，我们需要登录信息才能够打开，但由于许多外部原因会导致存储的信息发生变化，如清储缓存，时间过长导致登录信息失效等，那么在 V5 中如何判断的呢？
会将登录信息放在 initialState 中，我们需要在 app,tsx 中的 onPageChange 这个方法里
这个方法是通过页面转换而触发的，在这里也会判断用户信息是否存在，如果不存在，则会重新跳转登录界面
其他
@ 做了什么
我们随意的可以看见类似这样的引入
import Footer from '@/components/Footer';
复制代码那么 @是干嘛的呢？
其实在项目中引入分为绝对路径和相对路径，我们通常将组件放置在 component 模块下，配置放置在 utils模块下，那么 @ 实际上就是 相当于绝对路径 也就是 /src 的作用，他就是别名
帮助我更快速的引入，详细的可参考 webpack别名设置
至此，有关Ant Design Pro V5的三篇文章就完成了，以上文章只是本人的看法，如果有不对的地方欢迎留言指出，致谢(●￣(ｴ)￣●)！
关于 Ant Design Pro V5 的基本配置请看 打造属于你的Ant Design Pro V5（一）
Ant Design Pro V5 五大模块的配置使用请查看打造属于你的Ant Design Pro V5（二）