dva.js 用法總結

　dva.js是阿里前端團隊開發的一個基於react、redux、webpack的一個前端框架，他可以實現react-redux-webpack環境一鍵部署，能幫前端工程師節省很多環境搭建的時間。並且通過優化的redux跟原生redux相比使用起來要方便很多。這裏來大體講一下dva.js的用法。

 

dva.js官方案例：

https://ant.design/docs/react/practical-projects-cn

github:

https://github.com/dvajs/dva

 

先全局安裝dva-cli

cnpm install dva-cli -g

使用dva-cli初始化應用：

dva new your-project-name

而後進入項目目錄，新建文件dev.bat，內容以下：

call npm run start

保存後雙擊dev.bat便可開啓開發服務器，並出現初始頁面。

這裏咱們用一個加法計數器來做爲演示。

一、routes文件夾內新建demo.js以及demo.css

import {connect} from 'dva'
import styles from './demo.css'

function demo({dispatch,num}) {      //dispatch用來操做數據模型。

  function Add() {
    console.log(num);
    dispatch({
      type:"num/add",       //num表明數據模型，add表明方法。這裏能夠經過payload來傳遞參數。
　　　　// payload: 1,          
    })
  }

  return(
    <div className={styles.checkNum}>
      <input type="button" value="+" onClick={Add}/>
      <input type="input" value={num}/>
      <input type="button" value="-"/>
    </div>
  )
}


export default connect(        //將組件與數據模型進行鏈接。
  ({num})=>({num})
)(demo);

demo.css:

.checkNum{
  width: 300px;
  height: 100px;
  border: 1px solid #ccc;
}

 

二、models文件夾新建文件num.js

export default {
  namespace:'num',
  state:0,
  reducers:{
    'add'(state){        //num能夠理解爲數據模型，state是數據的初始值，add是方法名，用來修改num用的。若是須要傳參可參考官方教程。（payload）
      state++;
      return state
    }
  }
}

 

三、前往src下的index.js，註冊num數據模型：

import dva from 'dva';
import './index.css';


// 1. Initialize
const app = dva();

app.model(require('./models/num').default);
app.router(require('./router').default);

這步若是粗心的話就容易遺漏，務必當心。

 

四、src文件夾下的router.js內添加demo路由：

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/IndexPage';
import demo from './routes/demo'

function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
        <Route path="/demo" exact component={demo} />

      </Switch>
    </Router>
  );
}

export default RouterConfig;

 

這時，訪問http://localhost:8000/#/demo便可看到成果。

請你們自行完成減法功能並看懂官方案例以鞏固知識。

想要進一步瞭解dva.js請看下一篇：dva.js的數據獲取與渲染。

http://www.cnblogs.com/axel10/p/8548305.html