dva的用法术

1.安装

npm install -g dva-cli

dva -v查看版本号

2.创建项目

dva new app

3.启动项目

cd app
//启动项目
npm start

一。定义路由

方法1

在router.js里面添加
import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import Home from './page/home/home';
import Car from "./page/car/car"
function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        ++<Route path="/" exact component={Home} />
        ++<Route path="/car" exact component={Car} />
      </Switch>
    </Router>
  );
}


export default RouterConfig;

方法二

app.router(require('./router').default);

二，定义状态

1.在modol层定义index.js文件

export default {
  namespace:"indextext",
  state:{
    name:"张三"
  }
}

.在入口index.js文件中写入


import dva from 'dva';
// 引入css
// 1. Initialize
const app = dva();
// 2. 加载插件用的
// app.use({});
// 3. 接收自己发过来的action请求用的
++app.model(require('./models/indextext').default);
// 4. Router
app.router(require('./router').default);
// 5. Start
app.start('#root');

3.在home组件中加引用

import {connect} from "dva"
@connect((state,home)=>({
   state,
   home
})
)

const mapStateToProps = state => {
  console.log(state)
  return {
    name: "weiwei",
    mage:"我喜欢你"
  }
}
export default connect(mapStateToProps)(home) ;

三dva的属性

  1.namespace


数据状态的名字

2.reducers


数据的静态方法

3.effects


数据请求的异步方法
里面有两个方法为put和call

4.subscriptions


数据监听的方法


1.新建一个home文件夹在home文件夹里新建一个module文件夹和index.js在module里新建一个index.js代码如下


export default {
  namespace:"homeData",
  state:{
    name:"张三"
  },
  reducers:{
    setName(state,old){
      console.log(state)
      return state
    }
  },
  subscriptions:{
    Haha({dispatch,history}){
      // console.log(99999)
      history.listen((pasName)=>{
        if(pasName==="/#/"){
          console.log(55555555)
        }
      })
    }
  }
};

然后home里的index文件代码如下


import React, { Component } from 'react';
import {connect} from "dva";
@connect((state,Home)=>({
  state,
  Home
}))
class Home extends Component {
  render() {
    return (
      <div>
        <button onClick={
          ()=>{
            this.props.dispatch({
              type:"homeData/setName",
            })
          }
        }>点击</button>
      </div>
    );
  }
}


export default Home ;

最后需要在src文件夹里面index.js加入


import dva from 'dva';
// 1. Initialize
const app = dva();


// 2. Plugins
// app.use({});


// 3. Model
+++app.model(require('./page/home/mod/index').default);


// 4. Router
app.router(require('./router').default);


// 5. Start
app.start('#root');

dva的解绍


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

官网

https://dvajs.com/guide/

 

定义：集成了react-router,fetch,readux,redux-saga等，轻量级框架。作用：简化开发体验，相对于saga

使用：安装 dva-cli

 npm install dva-cli -g  全局安装
 dva new 项目名 ，创建
 npm start

目录简介：

mock:模拟数据，

service:请求

routers:根pages，定义一些路由中使用的组件，对应起来。

router.js:路由，其中像

import { Router, Route, Switch } from 'dva/router';
等还有Link,withRouter
export default withRouter(Child);//注入路由，


index.js：入口

 

import dva from 'dva';
// import createHistory from 'history/';
import {createBrowserHistory as createHistory} from 'history'
import './index.css';

// 1. Initialize
// const app = dva();
//由history改为browserHistory(特点，无#，和浏览器API类似，react官方推荐),
const app = dva({
  history: createHistory(),
});

// 2. Plugins
// app.use({});

// 3. Model
// app.model(require('./models/example').default);

// 4. Router
app.router(require('./router').default);

// 5. Start
app.start('#root');

model

简介：模型，dva通过model,更新state（reducer，同步），异步effect,订阅subscriptions 
	
定义一个，新建model
	
model下
export default {
  namespace:'test',//命名空间，唯一，全局state的key
  state:{//初始值
    name:'cy'
  }
}
index.js
// 3. Model
// app.model(require('./models/example').default);
app.model(require('./models/test').default);//载入，使用

页面：转为props的属性，
import {connect} from 'dva'
componentDidMount() {
  console.log(this.props)
}
const mapStateToProps = state =>{
  console.log(state)
  return{
    name:state.test.name//从命名空间拿到
  }
}
export default connect(mapStateToProps)(UserPage);

	
 
	
	
reducer：等同redux的reducer，接收action，更新state（同步）
	
model
  reducers: {
    setName(state,payload){
      console.log(state,payload)//payload,就是 dispatch传入的那个对象{type:'',name:'zq'}
      let _state=JSON.parse(JSON.stringify(state));//多一步，是因为react中state不允许直接修改，新建个常量
      _state.name=payload.name;
      return _state//必须返回奥，不然看报错
    }
  }
页面：通过this.props.上的dispatch方法
  handlerSetName =()=>{
    this.props.dispatch({
      type:'test/setName',
      name:'zq'
    })
  }

	
 
	
	
effect
	
  effects:{
    *setNameAsync(payload,{put,call}){
      yield put({
        type:'setName',
        name:payload.name
      })
    }
  }
页面
  handlerSetNameAsync =()=>{
    this.props.dispatch({
      type:'test/setNameAsync',
      name:'bb'
    })
  }

	
call

	 

	
  state:{
    name:'cy',
    topPicList:[]//初始化，接收数据
  },
  reducers: {
    getTopicListR(state,payload) {拿到数据更新到state
      let _state=JSON.parse(JSON.stringify(state));//多一步，是因为react中state不允许直接修改
      _state.topPicList=payload.topPicList;
      return _state;
    }
  },
 effects:{
    *getTopicList(payload,{put,call}){
      let res=yield call(cNodeTopic);//拿到数据，放到state上，state更新用的reducer
      console.log(res)
      if(res.data){//啥时候拿到，去用put
        yield put({//一个action
          type:'getTopicListR',//reducer
          topPicList:res.data
        })
      }
    }
  }

页面
  getTopicList=()=>{
    this.props.dispatch({
      type:'test/getTopicList',
      params
    })
  }
const mapStateToProps = state =>{
  console.log(state)
  return{
    name:state.test.name,
    topPicList:state.test.topPicList//这里可以转换为props
  }
}

异步，一般用if，啥时候有数据，后做某事。

	
 
	
	

	
subscriptions:订阅数据源：如路由，当前时间，websocket,keyboard等
	
	
dva-loading：https://www.jianshu.com/p/61fe7a57fad4

DVA


通过dva-cli脚手架搭建一个dva项目，具体做法参考dva github dva-cli相关内容。
ignore *.iml 文件，此为是intellij idea的工程配置文件，不需要push到git中，被git管理
搭建router，url 和 页面的对应关系
搭建layout，所有的页面都是基于layout 页面，包括左边框，下面的footer等。
HMR（Hot Module Replacement）模块热替换, webpack 提供的功能 

"env": { 

"development": { 

  "extraBabelPlugins": [ 

    "dva-hmr" ]}}

一共有俩种方式创建DvaJS项目，一种是通过dva-cli创建，另一种是通过umi。
通过dva-cli创建项目
先安装dva-cli。
$ npm install dva-cli -g

然后创建项目
$ dva new myapp

最后，进入目录并启动
$ cd myapp
$ npm start

通过umi使用dva
先安装dva-cli@next
$ npm install dva-cli@next -g

然后创建项目
$ dva new myapp

最后，进入目录并启动
$ cd myapp
$ npm start