精华内容
参与话题
问答
  • dva

    2020-04-23 22:51:14
    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'...

    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/

     

    展开全文
  • Dva

    2020-06-06 17:56:05
    使用:安装 dva-cli npm install dva-cli -g 全局安装 dva new 项目名 ,创建 npm start 目录简介: mock:模拟数据, service:请求 routers:根pages,定义一些路由中使用的组件,对应起来。 router.js:...

    定义:集成了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

    1. 简介:模型,dva通过model,更新state(reducer,同步),异步effect,订阅subscriptions 
    2. 定义一个,新建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);

       

    3. 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'
          })
        }

       

    4. 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,啥时候有数据,后做某事。

       

    5. subscriptions:订阅数据源:如路由,当前时间,websocket,keyboard等

    6. dva-loading:https://www.jianshu.com/p/61fe7a57fad4
    展开全文
  • DVA

    2018-07-19 08:48:29
    DVA 通过dva-cli脚手架搭建一个dva项目,具体做法参考dva github dva-cli相关内容。 ignore *.iml 文件,此为是intellij idea的工程配置文件,不需要push到git中,被git管理 + ...

    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" ]}}
    展开全文
  • dva Lightweight front-end framework based on redux, redux-saga and react-router. (Inspired by elm and choo) Features Easy to learn, easy to use: only 6 apis, very friendly to redux users, ...
  • 创建Dva项目的方法(dva-cli,umi)

    万次阅读 2019-08-04 22:19:58
    一共有俩种方式创建DvaJS项目,一种是通过dva-cli创建,另一种是通过umi。 通过dva-cli创建项目 先安装dva-cli。 $ npm install dva-cli -g 然后创建项目 $ dva new myapp 最后,进入目录并启动 $ cd myapp $ npm ...

    一共有俩种方式创建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
    
    展开全文
  • 剖析Dva原理: 手写Dva

    2020-09-24 11:28:10
    关于Dva: dva 是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架,或者可以理解为react框架插件处理的全家桶. ...
  • Dva教程

    2020-05-07 04:59:08
    Dva教程 2019千锋DvaJS视频精讲,全网首发!【Web前端】 千锋Web前端教程:01_dva_初始化 (01_dva_初始化&) 01_dva_初始化& 暴露request对象发送请求 其他地方调用query 千锋Web前端教程:02_dva...
  • dva上手

    2019-07-16 16:03:00
    安装dva-cli用户初始化项目 npm install -g dva-cli # 或 yarn global add dva-cli dva -v dva-cli version 0.9.1 创建新应用 安装完dva-cli之后,可以在命令行里访问到dva命令。现在,可以通过dva new ...
  • Dva学习笔记

    万次阅读 2020-02-13 11:35:29
    Dva学习笔记 本文是基于Windows 10系统环境,学习和使用Dva: Windows 10 一、dva状态管理state (1) 定义一个model文件 zufang.js // zufang.js export default { // 命名空间,全局唯一 namespace: '...
  • dva入门

    2020-11-10 12:56:02
    一、dva 介绍 dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。dva = React-Router + Redux + Redux...
  • dva处理_dva.js初探

    2021-01-04 12:21:53
    dva是一个在redux和redux-saga的基础上封装的一个轻型框架,能辅助更好的组织代码进行开发。同时提供了react-router和fetch,基本上具备了开发web前端应用所需的主要工具,省下开发者自己进行配置安装的工作。开始...

空空如也

1 2 3 4 5 ... 20
收藏数 3,425
精华内容 1,370
关键字:

dva