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即可开启开发服务器,并出现初始页面。

这里我们用一个加法计数器来作为演示。

1、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;
}

 

2、models文件夹新建文件num.js

export default {
  namespace:'num',
  state:0,
  reducers:{
    'add'(state){        //num可以理解为数据模型,state是数据的初始值,add是方法名,用来修改num用的。如果需要传参可参考官方教程。(payload)
      state++;
      return state
    }
  }
}

 

3、前往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);

这步如果粗心的话就容易遗漏,务必小心。

 

4、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

 

posted on 2018-03-04 09:22  axel10  阅读(14620)  评论(0编辑  收藏

统计