⚡ 30 秒速记

• 核心判断：状态管理的核心是把状态变化约束成可追踪的数据流，中间件在派发边界扩展异步、日志和副作用
• 原理主线：围绕 「一、环境搭建」、「二、初识Dva」、「三、计数器例子」 建立输入、状态变化与输出之间的因果关系
• 文章范围：深入解析Dva的原理、架构设计、数据流、与React集成方式，帮助前端开发者全面理解Dva在实际项目中的应用
• 边界与代价：集中式状态不是越多越好；可变性、订阅粒度和异步取消决定性能与可维护性
• 工程落地：选型要从状态归属、更新频率、调试需求和团队约束出发，而不是只比较 API 数量

Dva 本质上是把 React Router、Redux 和 Redux-saga 整合成一套以领域模型为中心的数据流方案。 每个 model 用 namespace 隔离状态，reducer 负责同步更新，effect 处理异步逻辑并派发动作。应用还能通过 hooks 扩展日志、错误处理和 loading 等能力，并支持动态加载路由与模型。需要注意，旧项目中的入口和路由写法可能受版本影响，迁移时要先核对当前依赖。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 本文若分析 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配置