⚡ 30 秒速记

• 模型按领域组织状态、同步更新与异步流程
• namespace 区分动作与状态空间
• reducers 计算状态，effects 编排副作用
• 订阅连接外部事件，也要负责清理
• 动态模型与路由加载按项目版本配合

Dva 把状态管理和异步流程收进按业务领域划分的模型，减少应用里零散的连接代码。 模型用命名空间区分身份，同步状态交给归约函数，异步操作交给副作用流程，再通过动作串起来。它组合了已有的数据流和路由能力，理解底层派发关系比记入口写法更有用。维护时还要检查模型注册、订阅清理和请求竞态，避免动态页面离开后仍更新状态。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

一、环境搭建

$ npm install dva-cli -g

# 创建应用
$ dva new dva-quickstart

# 启动
$ npm start

react项目的推荐目录结构（如果使用dva脚手架创建，则自动生成如下）

|── /mock/             # 数据mock的接口文件  
|── /src/              # 项目源码目录（我们开发的主要工作区域）   
|   |── /components/   # 项目组件（用于路由组件内引用的可复用组件）   
|   |── /routes/       # 路由组件（页面维度） 
|   |  |── route1.js  
|   |  |── route2.js   # 根据router.js中的映射，在不同的url下，挂载不同的路由组件
|   |  └── route3.js    
|   |── /models/       # 数据模型（可以理解为store，用于存储数据与方法）  
|   |  |── model1.js  
|   |  |── model2.js   # 选择分离为多个model模型，是根据业务实体进行划分
|   |  └── model3.js  
|   |── /services/     # 数据接口（处理前台页面的ajax请求，转发到后台）   
|   |── /utils/        # 工具函数（工具库，存储通用函数与配置参数）     
|   |── router.js       # 路由配置（定义路由与对应的路由组件）  
|   |── index.js       # 入口文件  
|   |── index.less      
|   └── index.html     
|── package.json       # 项目信息  
└── proxy.config.js    # 数据mock配置

使用 antd

npm i babel-plugin-import --save

babel-plugin-import 是用来按需加载 antd 的脚本和样式的

• 编辑 .webpackrc，使 babel-plugin-import 插件生效