image.png

React 通过 JSX 提供灵活的组件化开发，将 HTML 与 JavaScript 逻辑结合，使开发更直观。其虚拟 DOM 和 Fiber 架构提升性能，通过高效的差异对比和异步渲染，使复杂应用更流畅。
React 拥有庞大的生态系统和社区支持，丰富的第三方库和工具（如 Redux、React Router）以及广泛的企业采用（如 Facebook、Netflix）推动其发展。Create React App 简化项目初始化，内置现代开发配置。React Developer Tools 提供强大调试功能，React Native 扩展技术栈到移动端，Hooks API 推动函数式编程，使代码更简洁和可重用。

React系列系列：
前端React系列一: React简介
前端React系列二: create-react-app简介
前端React系列三: TypeScript简介
前端React系列四：Ant Design简介
前端React系列五：React+CRA+TS+Ant Design高效开发前端
前端React系列六：ant-design-pro简介
前端React系列七：ant-design-pro架构
前端React系列八：ant-design-pro辅助开发命令
前端React系列九：Umi简介
前端React系列十：Umi环境变量

前言

Ant Design Pro 是一个完整的前端解决方案，专为企业级中后台应用而设计。它基于 Ant Design 设计语言，采用 React 技术栈，并集成了 UmiJS 和 Dva 等工具。以下是对 Ant Design Pro 架构的详细分析：

总体架构

我们可以通过下面的大图来了解整个 Ant Design Pro 的架构。

image.png

Ant Design Pro 的架构由以下几个关键部分组成：

• UI 层：基于 Ant Design 的高质量组件库。
• 数据层：通过 Dva 管理应用状态和数据流。
• 路由层：由 UmiJS 提供路由管理。
• 构建和工具链：Webpack、Babel、ESLint 等工具集成。
• 开发和测试：Jest 和 Enzyme 进行测试，Prettier 和 ESLint 确保代码质量。

核心技术栈

UmiJS

• 插件化框架：UmiJS 是一个插件化的前端框架，提供了强大的路由管理和工程化支持。
• 文件即路由：根据文件结构自动生成路由配置。
• 动态加载：支持按需加载，提升性能。
• 插件机制：通过插件系统扩展功能，适应不同的项目需求。

Dva

• 状态管理：基于 Redux 和 Redux-saga，简化了状态管理。
• 模型（Model）：将 state、reducers、effects、subscriptions 结合在一起，通过 model 组织状态和逻辑。
• 数据流：提供清晰的数据流动，便于调试和维护。

Design

• 组件库：提供了丰富的 UI 组件，如表单、表格、按钮等，提升开发效率。
• 设计语言：统一的设计规范和风格，确保应用界面一致性。
• 定制化：支持主题定制和样式覆盖，满足个性化需求。

项目结构

Ant Design Pro 的项目结构合理，便于组织和管理代码。典型的项目结构如下：

/public         // 公共资源文件，如 HTML 模板和静态资源
/src
  /assets       // 静态资源，如图片、样式文件等
  /components   // 通用组件
  /models       // Dva 数据模型，用于管理全局状态
  /services     // 与后台接口的交互逻辑
  /utils        // 工具函数和公共方法
  /layouts      // 布局组件
  /pages        // 页面组件
  /locales      // 国际化资源文件
/config         // UmiJS 的配置文件
/mock           // 模拟数据，用于本地开发和测试

核心功能

组件化开发

• 高质量组件：Ant Design 提供的组件封装了常见的 UI 交互模式，开发者可以直接使用这些组件构建页面。
• 模块化：通过组件化开发，提升代码的复用性和维护性。

路由管理

• 文件即路由：UmiJS 根据文件结构自动生成路由配置。
• 动态加载：支持代码分割和按需加载，优化性能。

状态管理

• 简化 Redux 使用：Dva 提供了简洁的 API，将 Redux 和 Redux-saga 的优点结合，降低了使用门槛。
• 模型概念：通过 model 将 state、reducers、effects、subscriptions 结合在一起，便于管理。

国际化支持

• 内置国际化：Ant Design Pro 提供了国际化支持，通过 /locales 文件夹管理多语言资源文件。

权限管理

• 基于角色的访问控制（RBAC）：支持基于角色的权限管理，开发者可以根据业务需求定制权限规则。

模拟数据

• 本地开发和测试：通过 /mock 目录和配置文件，支持模拟数据的生成和接口的模拟。

构建和工具链

Webpack

Webpack 可以帮助我们完成一些任务。比如 js 压缩、css 压缩、编译模板文件等等，从而减少前端的工作量。当然，Webpack 功能很强大，能帮我们完成的工作远远不止这些。

• 模块打包：将模块化的 JavaScript 文件及其依赖打包成静态资源。
• 插件和加载器：通过插件和加载器扩展功能，如 Babel-loader 处理 ES6+ 代码，CSS-loader 处理 CSS 文件。
• 开发服务器：提供热模块替换（HMR），提升开发效率。

Babel

• JavaScript 编译器：将现代 JavaScript 语法转换为旧版本浏览器兼容的代码。

fabric

pro 内置了 fabric 作为了编码规范，fabric 提供了严格但是不严苛的 lint 规则集，包含 eslint，stylelint，prettier 三种工具，可以显著的提升代码质量，规范代码风格。

• 代码质量：通过 ESLint 进行代码静态分析，发现潜在的问题。
• 代码风格：通过 Prettier 统一代码格式，保证代码风格一致。

umi 与 webpack

运行时和编译时

Pro 的底座基于 umi， umi 与 webpack 相比增加了运行时相关的能力，我们在开发中有时候可能难以区分。

• 编译时 指的是代码在编译的时候做的事情，这个阶段的环境一般是 node 环境，可以使用 fs，path 等功能。但是同时因为没有使用 webpack ，所以 jsx，引入图片等非 node 的能力是无法使用的。
• 运行时 是指代码已经编译完成开始运行的阶段，这个阶段一般是浏览器环境，不能使用 fs，path 等功能，访问 url 也会有跨域的问题，但是这个环境被 webpack 编译过，所以可以写 jsx，导入图片等功能。

运行时和编译时两个环境用起来容易混淆，这里有一个简单的版本:

• src 文件夹中都是运行时的代码，都会经过 webpack 编译。
• 其他目录的都可以认为是编译时，可以使用 node 能力。

这也是为什么我们不能在 config.ts 里面写 JSX 的原因。

umi-插件化的前端框架

umi作为Pro 的底座 ，它是一个 webpack 之上的整合工具。 umi 相比于 webpack 增加了运行时的能力，同时帮助我们配置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。这也是我们能提供插件的原因。

• @umijs/plugin-access，权限管理
• @umijs/plugin-analytics，统计管理
• @umijs/plugin-antd，整合 antd UI 组件
• @umijs/plugin-initial-state，初始化数据管理
• @umijs/plugin-layout，配置启用 ant-design-pro 的布局
• @umijs/plugin-locale，国际化能力
• @umijs/plugin-model，基于 hooks 的简易数据流
• @umijs/plugin-request，基于 umi-request 和 umi-hooks 的请求方案

如果不喜欢 umi 默认的配置，可以在这里看看有没有你喜欢的配置。如果还是不能满足就要自定义 webpack 了，chainWebpack 可以自定义内置的 webpack 配置。

webpack 对于 node 也是有版本需求的，不同 webpack 对 node 版本的依赖也不同，所以最好的办法是升级到最新的长期维护版本。

开发和测试

Jest 和 Enzyme

• 单元测试：通过 Jest 编写和运行单元测试，确保代码的正确性。
• 组件测试：通过 Enzyme 测试 React 组件的行为和渲染结果。

总结

Ant Design Pro 是一个强大且灵活的前端框架，结合了 UmiJS、Dva、Ant Design 等现代前端技术，提供了丰富的功能和工具。其合理的项目结构、高质量的 UI 组件、完善的状态管理和国际化支持，使其成为构建企业级中后台应用的理想选择。通过使用 Ant Design Pro，开发者可以快速搭建高质量的中后台应用，提高开发效率和代码质量。