打造属于你的Ant Design Pro V5（三）

之前两篇文章讲了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（二）