React+Atd+Dva架构深入理解——框架_react + antdesign + antv-优快云博客

本文链接：https://blog.youkuaiyun.com/PINGER0077/article/details/85088651

本文详细介绍了PC管理端架构的技术构成，包括React框架的优势、AntDesign UI组件库的特性、Dva状态管理机制以及Webpack打包工具的功能。深入探讨了工程脚手架结构，从根目录到src目录的组织方式，以及如何通过yx-npm工具进行项目初始化、依赖安装和启动。此外，还阐述了数据流驱动的工作原理，从接口服务层、业务处理层到视图展示层的流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

PC管理端架构

技术构成：
1）基础框架React ----性能优越、稳定可靠
虚拟DOM技术，网页在内存拼接，一次批量快速渲染

2）UI组件库Ant Design ----成熟、丰富、稳定的React UI组件库
文档说明清晰，使用人数多，常用UI组件多，界面美观，可定制性高

3）数据状态管理Dva
跨组件数据状态共享，避免复杂的数据传递，任一组件可以随意获取另一组件数据

4）打包工具WebPack
可以使用现金的ES6/ES7/ReactJSX语法
可以使用样式缩略语法less
代码分割、合并、压缩

工程脚手架——根目录

.gitignore       --git忽略文件夹
.happypack       --WebPack多进程打包插件
dist            --最终打包生成的html+css+js
node_modules    --node.js依赖包目录
src               --开源目录
package-lock.json       --node.js锁定包版本文件
package.json           --node.js包管理记录文件
README.md                --工程说明文档
webpack.config.js        --webpack配置文件
webpack.dll.config.js    --Webpack Dll配置文件

工程脚手架——src目录

assets           --静态资源目录（样式、图片、字体、json）
config            --站点配置文件
css               --站点全局样式
pages           --业务页面目录
pubBiz           --业务组件（构件）目录
utils           --公共工具类
widget           --基础组件目录
favicon.ico       --站点地址栏图标
index.html       --单页面模板
index.js        --入口程序
router.js        --路由配置
theme.js        --主题设置