一、dva

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

6个api

1.步骤

1.全局安装

cnpm install dva-cli -g
dva -v (小写) —- dva-cli version 0.10.1

1.2新建项目

dva new your_project_name (nwe)

cd 项目 npm start

1.3目录结构

1.假数据mock

mock - 假数据的接口

  1. //1 mock/m.js
  2. module.pexports={
  3.     "GET /test/lsit":(req,res)=>{
  4.         res.json({
  5.             code: 200,
  6.             result: [1,2,3]
  7.         })
  8.     }
  9. }
  10. //2 .roadhorc.mock.js中引入
  11. export default {
  12.     ...require('./mock/m.js')
  13. }
  14. //3. 直接就可以使用`/test/lsit`这个接口

2.入口

src/index.js - 入口文件

  1. import dva from 'dva';
  2. import './index.css';
  3. // 1. Initialize
  4. const app = dva();
  5. // 2. Plugins
  6. // app.use({});
  7. // 3. Model
  8. // app.model(require('./models/example').default);
  9. // 4. Router
  10. app.router(require('./router').default);
  11. // 5. Start
  12. app.start('#root');
  1. 官网上是在index.js中初始化数据(redux的数据)
  1. - const app = dva();
  2. + const app = dva({
  3. +   initialState: {
  4. +     products: [
  5. +       { name: 'dva', id: 1 },
  6. +       { name: 'antd', id: 2 },
  7. +     ],
  8. +   },
  9. + });

3.请求的封装

utils/request.js - 对fetch的封装

services/example.js - 具体的请求模块

4.页面与路由

routes文件夹中并不是路由,而是页面-样式可以使用引入的styles.xxx

而同级的router.js文件是路由表

  1. import React from 'react';
  2. import { Router, Route, Switch } from 'dva/router';
  3. import IndexPage from './routes/IndexPage';
  4. import Test from './routes/Test'
  5. function RouterConfig({ history }) {
  6.   return (
  7.     <Router history={history}>
  8.       <Switch>
  9.         <Route path="/" exact component={IndexPage} />
  10.         <Route path="/test" component={Test} />
  11.       </Switch>
  12.     </Router>
  13.   );
  14. }
  15. export default RouterConfig;

5.redux

models: effects-异步、reducers-同步、subscriptions-订阅、state-数据、namespace-命名空间 — 结构上类似于vuex了

  1. index.js中注册模块`app.model(require('./models/products').default);`
  1. export default {
  2.   namespace: 'example',
  3.   state: {},
  4.   subscriptions: {// 监听-history是路由
  5.     setup({ dispatch, history }) {  // eslint-disable-line
  6.     },
  7.   },
  8.   effects: {// 异步saga
  9.     *fetch({ payload }, { call, put }) {  // eslint-disable-line
  10.       yield put({ type: 'save' });
  11.     },
  12.   },
  13.   reducers: {// 同步
  14.     save(state, action) {
  15.         // action = {type: "example/inc", payload: 2}
  16.         // {type: "example/inc", @@redux-saga/SAGA_ACTION: true}
  17.       return { ...state, ...action.payload };
  18.     },
  19.   }
  20. };

6.组件中使用
  1. import {connect} from 'dva'
  2. //组件....
  3. const mapStateToProps=(state)=>{return{
  4.     n: state.example.n
  5. }}
  6. // 默认没有配置装饰器语法
  7. export default connect(mapStateToProps)('组件名')
  9. // 所有方法默认挂载到props上,不用自己connect。但是使用的时候需加上namespace
  10. effects: {
  11.     // saga插件使用generator函数
  12.     *asyncList({payload},{call,put}){
  13.         const result = yield call(getList);//call接受一个promise,等待结果返回
  14.         //异步写成同步的感觉
  15.         yield put({
  16.             type: 'lsit',//因为在这个模块内,不用写namespace
  17.             data:{lsit:res.data.data.list}
  18.         })
  19.     }
  20. }

7.根目录下的.webpackrc配置proxy

8.dva的node_modules报错

二、umi

umijs antd、dva、内置路由 的深度整合

npm i yarn tyarn -g tyarn是yarn的国内源
npm i yarn umi -g

建个项目的目录
cd 项目目录

  1. //官方工具创建项目,不允许选择配置项
  2. yarn create @umijs/umi-app
  4. // umi来创建 可以选择配置项
  5. yarn create umi  (目录就是项目名了)
  7. //需要自己装依赖
  8. cnpm i 
  9. yarn start  默认8000端口

新建页面 umi g page 页面名字即可自动在.umirc.js中添加路由信息

.umirc.js配置插件、路由表

不适合umi框架的情况:

  • 需要支持 IE 8 或更低版本的浏览器
  • 需要支持 React 16.8.0 以下的 React
  • 需要跑在 Node 10 以下的环境中
  • 有很强的 webpack 自定义需求和主观意愿
  • 需要选择不同的路由方案