精华内容
下载资源
问答
  • dva

    2021-03-23 18:02:26
    dva简介dva的使用三级目录 链接: 官方网站 简介 dva不仅仅是一个第三方库,更是一个框架,它主要整合了redux的相关内容,让我们处理数据更加容易,实际上,dva依赖了很多库:react,react-router,redux,redux-...


    链接: 官方网站

    简介

    • dva不仅仅是一个第三方库,更是一个框架,它主要整合了redux的相关内容,让我们处理数据更加容易,实际上,dva依赖了很多库:react,react-router,redux,redux-saga, connecte-react-router.

    dva的使用

    • 1.dva默认导出一个函数,通过调用该函数,可以得到一个dva对象
    import dva from 'dva';
    import './index.css';
    
    // 1. Initialize
    const app = dva();
    
    // 2. Plugins
    app.use({});
    
    // 3. Model启动之前定义模型
    app.model(require('./models/example').default);
    
    // 4. Router
    app.router(require('./router').default);
    
    // 5. Start
    app.start('#root');
    
    
    • 2.dva对象.router:传入一个函数,该函数返回一个React节点,将来,应用启动后,会自动渲染该节点。我们也可以直接传入一个函数组件。
    import React from 'react';
    import { Router, Route, Switch } from 'dva/router';
    import IndexPage from './routes/IndexPage';
    
    function RouterConfig({ history }) {
      return (
        <Router history={history}>
          <Switch>
            <Route path="/" exact component={IndexPage} />
          </Switch>
        </Router>
      );
    }
    
    export default RouterConfig;
    
    
    • 3.dva对象.start:该方法用于启动dva应用程序,可以认为启动的就是react程序,该函数传入一个选择器,用于选中页面的某个dom元素,react会将该元素渲染到页面中去。
    // 5. Start
    app.start('#root');
    
    • 4.dva对象.model:该方法用于定义一个模型,该模型可以理解为redux的action,reducer,redux-saga副作用处理的整合,整合成一个对象,将该对象传入model方法中即可。
      • 1.该模型应该具有的属性:
        • 1 .namespace:命名空间(会作为仓库中的属性保存).
        • 2 .state:该模型的默认值.
        • 3 .subscriptions:配置为一个对象,该对象可以写任意数量的属性名称的属性,每个属性是一个函数,这些函数会在模型加入到仓库中后立即运行
        • 4 .effects:处理副作用,底层使用redux-sage实现的,该属性配置为一个对象,该对象中的每一个方法均处理一个副作用,方法名即使匹配的action类型。
        1. 第一个参数:action.
        2. 第二个参数:封装好的redux-saga/effects的处理方法.
        • 5 .reducers:该属性配置为一个对象,对象中的每一个方法就是一个reducer,dva约定,方法的名字就是匹配的action类型.
    
    export default {
    
     namespace: 'example',
    
     state: {},
    
     subscriptions: {
       setup({ dispatch, history }) {  
       },
     },
    
     effects: {
       *fetch({ payload }, { call, put }) {  
         yield put({ type: 'save' });
       },
     },
    
     reducers: {
       save(state, action) {
         return { ...state, ...action.payload };
       },
     },
    
    };
    
    

    在dva中同步路由到仓库

    • 调用dva是函数时,配置history对象
    • 使用ConnectedRounter提供路由上下文

    new dva(opts) opts 包含:

    • history: 指定给路由用的历史,默认为 hashHistory
    • initialState: 指定初始数据,优先级高于模型中的状态,默认为 {}
    • onError: effect执行错误或subscription通过done主动抛错时触发,可用于管理中断错误状态。
    • onAction: 在动作被调度时触发,用于注册redux中间件
    • onStateChange: state更改时触发,可用于同步state到localStorage,服务器端等。
    • onReducer:封装reducer执行。
    • onEffect: 封装效果执行。比如DVA加载基于此实现了自动处理负载状态
    • onHmr: 热替换相关,目前用于babel-plugin-dva-hmr
    • extraReducers: 指定额外的reducer,某种redux-form需要指定额外的formreducer:
    • extraEnhancers:指定额外的StoreEnhancer,某些结合redux-persist的使用:
    展开全文
  • 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-源码

    2021-03-08 18:36:01
    DVA
  • 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(基础 + 进阶) dva 是 React 的国产最佳实践框架,本套课程是讲解 dva 的最全入门指引教程,从入门,到进阶,讲解 dva 的方方面面的知识。 视频请看: 联系我们 qq群:697272886
  • umi-dva-demo:umi dva演示
  • dva上手附件

    2019-01-09 20:29:55
    dva入门上手的附件
  • dva框架入门

    2018-06-13 10:05:38
    reactjs框架dva之入门,简单描述了dva的构成,语法结构
  • dva快速入门附件

    2019-01-09 18:09:12
    dva入门
  • dva-管理员 目的 期望打造一套基于, , 于一体的,企业级后台管理系统 期望可以单纯由前端来解决用户权限,并提供权限数据支持的一套完善的权限管理功能后台管理系统 期望可以在antd与dva的基础上,再次封装简单且...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,569
精华内容 3,427
关键字:

dva