umi+dva项目快速上手指南
发布网友
发布时间：1天前
共1个回答
热心网友
时间：1天前
在React项目中，阿里系列技术栈——umi+dva+antd的使用越来越普遍。本文将带您快速了解和上手umi项目。
首先，确保Node环境版本为8.0.0以上，然后全局安装umi：`npm install -g umi`，推荐使用yarn进行安装。
构建umi项目，请参考官方文档进行详细操作：umijs.org/zh/guide/构建部分。
项目结构配置通常在`.umirc.js`或`config/config.js`中进行，支持ES6语法。本文使用后者进行配置。
在业务目录中，常规配置有局部公用组件（components）、数据模型（models）和接口服务（services），入口文件`_layout.js`需要根据需要引入。
umi的路由管理有约定式和配置式两种：约定式路由下，pages目录下的.js或.jsx文件自动关联路由；配置式路由则在相应配置文件中进行设置。
权限路由通过`Routes`属性实现，创建如`PrivateRoute.js`来管理特定权限的路由。跳转路由支持link和router方式。
在models层，`models/index.js`不能为空，dva的model利用redux-saga简化了操作，使得数据流更直观。注意call方法的异步阻塞问题，需用fork替换。
services层用于处理后台接口请求，返回Promise对象。组件层的dispatch用于触发action，可以与effect中的put方法配合，或者通过callback函数进行异步操作。
connect方法有两种用法：mapStateToProps适用于类组件和函数组件，通过它从models获取数据填充组件props。Es6注解方式仅适用于类组件。
使用`withRouter`可以为未经路由跳转的组件提供路由信息。常见问题解答：url变化但页面不刷新，可能需要在`layouts/index.js`中使用`umi/withRouter`包裹组件。
最后，总结一下dva的数据流动：从View层的dispatch触发action，到models层的effect处理并调用services，再通过put更新model状态，视图层重新渲染，最终页面更新。
参考资料：umi官方文档(umijs.org/zh/guide/) 和 dva文档(dvajs.com/guide/)。
