dva是干嘛用的 react_react dva是干嘛的 - CSDN
  • react前端框架dva(一)

    2018-03-22 11:57:37
    react前端框架dva 最近正在看dva框架,发现这是一个很好应用于react的框架。 众所周知,react的学习成本是较高的,而antd推出的这款框架,大大的降低了react的学习成本。dva简化了 react-redux 的部署的文件复杂度...

    react前端框架dva

    最近正在看dva框架,发现这是一个很好应用于react的框架。
    众所周知,react的学习成本是较高的,而antd推出的这款框架,大大的降低了react的学习成本。dva简化了 react-redux 的部署的文件复杂度。使其清晰易懂。相信熟悉redux 的人,并不需要了解太多知识就能很快的上手。


    Dva的安装

    首先需要安装的是 dva-cli 。dva-cli 是 dva 的命令行工具,包含 init、new、generate 等功能,目前最重要的功能是可以快速生成项目以及你所需要的代码片段。
    npm install -g dva-cli
    安装完成后,可以通过 dva -v 查看版本,以及 dva -h 查看帮助信息。
    创建新应用
    安装完 dva-cli 后,我们用他来创建一个新应用,取名 myDome 。
    dva new myDome –demo
    注意: –demo 用于创建简单的 demo 级项目,正常项目初始化不加要这个参数。
    然后进入项目目录,并启动。
    cd myDome
    npm start
    几秒之后,会看到这样的输出:
    proxy: listened on 8989 livereload: listening on 35729 :package: 173/173 build modules webpack: bundle build is now finished.
    (如需关闭 server,请按 Ctrl-C.)

    在浏览器里打开 http://localhost:8989/ ,正常情况下,你会看到一个 “Hello Dva” 页面。

    开始进入我们正式的dva学习吧,点击进入:react前端框架dva(二)

    展开全文
  • Umi和Dva都是基于React的框架,Umi主要以路由为主,Dva主要管理数据流。 Antd pro(https://pro.ant.design/docs/getting-started-cn)集成了umi、dva、antd的完整前端脚手架 关于UmiJS框架 umi是一个可插拔的...

    前言

    react(https://react.docschina.org/

    umi--路由配置(https://umijs.org/
    dva--数据流方案(https://dvajs.com/guide/

    Umi和Dva都是基于React的框架,Umi主要以路由为主,Dva主要管理数据流。

    Antd pro(https://pro.ant.design/docs/getting-started-cn)集成了umi、dva、antd的完整前端脚手架

    关于UmiJS框架

    • umi是一个可插拔的企业级react应用框架。umi以路由为基础的,支持类next.js的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。

    Umi特性:

    • 可扩展,Umi 实现了完整的生命周期,并使其插件化,Umi 内部功能也全由插件完成。此外还支持插件和插件集,以满足功能和垂直域的分层需求。
    • 开箱即用,Umi 内置了路由、构建、部署、测试等,仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集,内涵丰富的功能,可满足日常 80% 的开发需求。
    • 大量自研,包含微前端、组件打包、文档工具、请求库、hooks 库、数据流等,满足日常项目的周边需求。
    • 完备路由,同时支持配置式路由和约定式路由,同时保持功能的完备性,比如动态路由、嵌套路由、权限路由等等。
    • 面向未来,在满足需求的同时,我们也不会停止对新技术的探索。比如 dll 提速、modern mode、webpack@5、自动化 external、bundler less 等等。

    注意:有很强的 webpack 自定义需求和主观意愿或者需要选择不同的路由方案

     

    关于Dva框架

    • dva首先是一个基于reduxredux-saga数据流方案,然后为了简化开发体验,dva还额外内置了 react-routerfetch,所以也可以理解为一个轻量级的应用框架。
    • dva = React-Router + Redux + Redux-saga

    Dva特性:

    • 易学易用,仅有 6 个 api,对 redux 用户尤其友好,配合 umi 使用后更是降低为 0 API
    • elm 概念,通过 reducers, effects 和 subscriptions 组织 model
    • 插件机制,比如 dva-loading 可以自动处理 loading 状态,不用一遍遍地写 showLoading 和 hideLoading
    • 支持 HMR,基于 babel-plugin-dva-hmr 实现 components、routes 和 models 的 HMR

    dva数据流向:

    数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State,所以在 dva 中,数据流向非常清晰简明,并且思路基本跟开源社区保持一致

     

    核心概念:

    • State:一个对象,保存整个应用状态
    • View:React 组件构成的视图层
    • Action:一个对象,描述事件
    • connect 方法:一个函数,绑定 State 到 View
    • dispatch 方法:一个函数,发送 Action 到 State

    State 和 View:

    State 是储存数据的地方,收到 Action 以后,会更新数据。

    View 就是 React 组件构成的 UI 层,从 State 取数据后,渲染成 HTML 代码。只要 State 有变化,View 就会自动更新。

    Action:

    Action 是用来描述 UI 层事件的一个对象。

    dispatch({
      type: 'add',
    });

    connect 方法:

    connect 是一个函数,绑定 State 到 View。

    connect 方法返回的也是一个 React 组件,通常称为容器组件。因为它是原始 UI 组件的容器,即在外面包了一层 State。

    connect 方法传入的第一个参数是 mapStateToProps 函数,mapStateToProps 函数会返回一个对象,用于建立 State 到 Props 的映射关系。

    dispatch 方法:

    dispatch 是一个函数方法,用来将 Action 发送给 State。

    dispatch({
      type: 'user/add', // 如果在 model 外调用,需要添加 namespace
      payload: {}, // 需要传递的信息
    });

     

    展开全文
  • 首先看 他的核心模块 也是经常用到的模块  1 module 模块  /** * Created by guangqiang on 2017/12/17. */ import queryString from 'query-string'; import * as todoService from '../services/todo' ...

    首先看 他的核心模块 也是经常用到的模块 

    1 module 模块  

    /**
     * Created by guangqiang on 2017/12/17.
     */
    import queryString from 'query-string';
    import * as todoService from '../services/todo'
    
    export default {
      namespace: 'todo', //model的命名空间,只能是命名空间。 也是全局state上的属性  
       state: {  //状态的初始值
         list: [],
         message:"ffff"
       },
    
      //类似于redux的 reducer 是一个纯函数用来处理同步函数。 是唯一一个可以修改 state的地方,由action触发
      //它有action和state两个参数 
      reducers: {   
        save(state, { payload: { list } }) {
          return { ...state, list }
        },
    
        saveq(state, { payload: { message } }) {     
          return { ...state, message }
        },
      },
    //用于处理异步操作,不能直接修改state 由action触发 也可触发action  只能是generator 函数
    //有两个参数 action ,effects 两个参数。第二个参数effect包括三个参数 (call,put,select)
    //put 用于触发action ,call用于调用异步处理逻辑,select用于从state获取数据
    
      effects: {
        *addTodo({ payload: value }, { call, put, select }) {
          // 模拟网络请求
          const data = yield call(todoService.query, value)
          console.log(data)
          let tempList = yield select(state => state.todo.list)
          let list = []
          list = list.concat(tempList)
          const tempObj = {}
          tempObj.title = value
          tempObj.id = list.length
          tempObj.finished = false
          list.push(tempObj)
          yield put({ type: 'save', payload: { list }}) //put 用于触发action ,
        },
        *toggle({ payload: index }, { call, put, select }) {
          // 模拟网络请求
          const data = yield call(todoService.query, index)
          let tempList = yield select(state => state.todo.list)
          let list = []
          list = list.concat(tempList)
          let obj = list[index]
          obj.finished = !obj.finished
          yield put({ type: 'save', payload: { list } })
        },
        *delete({ payload: index }, { call, put, select }) {
          const data = yield call(todoService.query, index)
          let tempList = yield select(state => state.todo.list)
          let list = []
          list = list.concat(tempList)
          list.splice(index, 1)
          yield put({ type: 'save', payload: { list } })//put 用于触发action ,
        },
    
        *modify({ payload: { value, index } }, { call, put, select }) {
          const data = yield call(todoService.query, value)
          let tempList = yield select(state => state.todo.list)
          let list = []
          list = list.concat(tempList)
          let obj = list[index]
          obj.title = value
          yield put({ type: 'save', payload: { list } })
        },
    
    
        *test({ payload: message }, { call, put, select }) {
          console.log(message);
          yield put({ type: 'saveq', payload: { message } })//put 用于触发action ,
        }
      },
    
      //用于订阅某些数据 并根据情况dsipatch某些action 格式为 ({ dispatch, history }, done) => unlistenFunction。
      //监听路由的变化,当路径为todolist时就调用 action
      subscriptions: {
        setup({ dispatch, history }) {
          // 监听路由的变化,请求页面数据
          return history.listen(({ pathname, search }) => {
            const query = queryString.parse(search)
            console.log(query);
            let list = []
            if (pathname === 'todoList') {
              dispatch({ type: 'save', payload: {list} }) //
            }
          })
        }
      }
        //  注意,在 model 中触发这个 model 中的 action 时不需要写命名空间,比如在 fetch 中触发 save 时是 { type: 'save' }。而在组件中触发 action 时就需要带上命名空间了,比如在某个组件中触发 fetch 时,应该是 { type: 'user/fetch' }。
        //例如 
        //  this.props.dispatch({
        //   type: 'todo/delete', 加上命名空间
        //   payload: index
        // })
    
    }

    如何调用 module里面的方法呢 看代码 

     

    /**
     * Created by guangqiang on 2017/12/17.
     */
    import React, {Component} from 'react'
    import styles from './TodoList.css'
    import {connect} from 'dva'
    
    class TodoList extends Component {
      constructor(props) {
        super(props)
        this.state = {
          value: ''
        }
      }
    
      componentDidMount() {
      }
    
      removeItem(index) {
        this.props.dispatch({
          type: 'todo/delete',
          payload: index
        })
      }
    
      toggleItem(index) {
        this.props.dispatch({
          type: 'todo/toggle',
          payload: index
        })
      }
    
      modify(value, index) {
        this.props.dispatch({
          type: 'todo/modify',
          payload: {value, index}
        })
      }
    
      addTodo(value) {
        this.props.dispatch({
          type: 'todo/addTodo',
          payload: value
        })
        this.setState({value: ''})
      }
    
      test(value){
        console.log(value);
         this.props.dispatch({
           type:"todo/test",
           payload:value
         })
      }
    
      Tex(value){  
        this.props.dispatch({
          type:"example/fetch",
          payload:value
        })
      }
    
      render() {
        const { list, message} = this.props
        let count = 0
        list.map(item => count = !item.finished ? count + 1 : count)
        return (
          <div className={styles.container}>
            <span>
              <h1 onClick={()=>this.Tex('fff')}>我的测试</h1>
              <h1>我的待办清单</h1>
              <h1 onClick={() => this.test("fffkkkk")}>点击事件{message}</h1>
              <h3>你有{count}项待办事项未处理</h3>
            </span>
            <input
              style={{borderWidth: 1, borderColor: 'red'}}
              placeholder="请输入代办事项"
              value={this.state.value}
              onChange={(e) => this.setState({value: e.target.value})}
              onKeyDown={(e) => {
                if (e.keyCode === 13){
                  let title = e.target.value
                  title.length > 0 ? this.addTodo(title) : null
                }
              }}
            />
            <span>
              <ul>
                {
                  list.map((item, index) => {
                    return (
                      <li
                        key={index}
                      >
                        <input
                          type="checkbox"
                          checked={item.finished}
                          onChange={() => this.toggleItem(index)}
                        />
                        <input
                          style={{width: 200,height: 20}}
                          defaultValue={item.title}
                          autoFocus={false}
                          onKeyDown={(e) => {
                            if (e.keyCode === 13){
                              let title = e.target.value
                              this.modify(title, index)
                            }
                          }}
                        />
                        <button onClick={() => this.removeItem(index)}>删除</button>
                      </li>
                    )
                  })
                }
              </ul>
            </span>
          </div>
        )
      }
    }
    
    function mapStateToProps(state) {
      return {
        list: state.todo.list,
        message:state.todo.message
    
      }
    }
    
    const _todoList = connect(mapStateToProps)(TodoList)
    
    export default _todoList

    这个dispatch 的方法就是用来调用 

    这个module 里面的方法的 

     

    这段代码就是把  module 里面的 state 与react 组件里面的state 关联起来。这个时候就可以用dva 里面的state了 。

    module 里面的state 与 react 里面的state 本身是没有关联的 。

    展开全文
  • dva和UmiJs的关系

    2019-02-04 22:21:53
    UmiJS和Dva的关系 一、UmiJS umi是一个可插拔的企业级react应用框架。umi以路由为基础的,支持类next.js的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载。 umi的特性: 二、...

    UmiJS和Dva的关系

    一、UmiJS

    umi是一个可插拔的企业级react应用框架。umi以路由为基础的,支持类next.js的约定式路由,以及各种进阶的路由功能,并以此进行功能扩展,比如支持路由级的按需加载

    umi的特性:

    在这里插入图片描述

    二、dva

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

    dva的特性

    在这里插入图片描述

    UmiJs和dva、roadhog是什么关系?

    • roadhog 是基于 webpack 的封装工具,目的是简化 webpack 的配置
    • umi 可以简单地理解为 roadhog + 路由,思路类似 next.js/nuxt.js,辅以一套插件机制,目的是通过框架的方式简化 React 开发
    • dva 目前是最纯粹的数据流,和 umi 和 roadhog 之间并没有相互的依赖关系,可以分开使用也可以一起使用。
    展开全文
  • dva 与 redux-saga应用

    2019-03-14 14:08:13
    dva是什么? dva是一个基于Redux与React-saga的数据流解决方案。 为了简化开发流程,另外内置React-Router与Redux。 如何使用? 下载dva-cli // 第一步 npm install dva-cli -g dva -v // 查版本 确认...
  • dva.js介绍

    2019-04-22 16:14:02
    数据流问题 目前流行的数据流方案有: Flux,单向数据流方案,以...到底哪一种架构最合适 React ? #目前最流行的数据流方案 截止 2017.1,最流行的社区 React 应用架构方案如下。 路由:React-Router 架...
  • registerServiceWorker就是为react项目注册了一个service worker,用来做资源的缓存,这样你下次访问时,就可以更快的获取资源。而且因为资源被缓存,所以即使在离线的情况下也可以访问应用(此时使用的资源是之前...
  • dva的简单使用(一)

    2019-07-22 20:59:20
    前言 ... 我们希望把数据逻辑(cardList 相关逻辑)和视图逻辑(PuzzleCardsPage)分开管理在不同的模块中,「关注分离」使得代码更加健壮,同时易于调试。...而 dva 就是用来满足这些需求的: ...
  • dva 脚手架目录分析

    2019-06-13 19:39:25
    2019独角兽企业重金招聘Python工程师标准>>> ...
  • dva框架的使用详解及Demo教程 在前段时间,我们也学习讲解过Redux框架的基本使用,但是有很多同学在交流群里给我的反馈信息说,redux框架理解上有难度,看了之后还是一脸懵逼不知道如何下手,很多同学就转向选择...
  • 使用 hashHistory,浏览器上看到的 url 会是这样的: /#/user/haishanh?_k=adseis 使用 browserHistory,浏览器上看到的 url 会是这样的:/user/haishanh 看起来当然 browserHistory 很好很理想,但 ...
  • 以前一开始学react时候,看的视频比较老,都没有讲hooks的,然后学出来只会写类组件,并且完全不知道咋运作的,都是按套路写。后来越学越深入后自然也就会了hooks。并且对类组件有了另一层理解。 以前我们写类组件,...
  • 最近,自己在摸索react的时候,遇到一个很奇葩的问题,大概是这样的: 我从列表页使用Link跳转到详情页面,列表页面的路由是'/list',详情页面的路由是'/list/detail',由于详情页面的路由里边也包含了'/list',所以...
  • 代码地址请在github查看,假设有新内容。我会定时更新。也欢迎您star,issue,共同进步 1.我们服务端渲染数据从何而来 1.1 怎样写出同构的组件 ...有时候不借助js是不行的。比方当我们的组件须要轮询服务器的数据...
  • react使用umi创建

    2019-10-05 21:56:40
    文章目录umi的创建:路由切换传参路由嵌套configumi和antd的合作使用:结合dva使用:dva的使用:        umi可插拔的企业级反应应用程序框架 umi的创建:    &...
  • React中使用esri-loader

    2019-02-15 15:20:47
     随着前端的发展,框架的选择也越来越多,arcgis js api 在集成到React 中也是提供了良好的适配通过esri-loader。 二、使用  首先要先引入 esri样式 &lt;!DOCTYPE html&gt; &lt;html lang="...
  • 1 在model中请求数据 改造页面逻辑 ...
  • children,child的复数形式,所以顾名思义,某个组件的children(this.props.children/props.children)其实就是这个组件的子组件,表现在代码中,无非就是(如下简易演示demo) <Parent> <Child1&...
  • React 一些小型项目,只使用 React 完全够用了,数据管理使用props、state即可,那什么时候需要引入Redux呢? 当渲染一个组件的数据是通过props从父组件中获取时,通常情况下是 A --&gt; B,但随着业务复杂度的...
  • 2019独角兽企业重金招聘Python工程师标准>>> ...
1 2 3
收藏数 58
精华内容 23
热门标签
关键字:

dva是干嘛用的 react