dva总结 react_react中 安装dva不使用dva cli - CSDN
  • <DvaJS>DvaJs的简单使用与文档总结

    千次阅读 2020-02-20 16:58:43
    内置了react-router和fetch是一个轻量级的框架。 特性 6个API,配合umi使用降为0API elm概念,通过reducers,effect和subscription组织model 插件机制,dva-loading 自动处理loading状态,不用重复写 show 、...

    DvaJS

    介绍

    ​ dva是基于reduxredux-saga的数据流方案,为了简化开发体验。内置了react-routerfetch是一个轻量级的框架。

    特性

    6个API,配合umi使用降为0API

    elm概念,通过reducerseffectsubscription组织model

    插件机制dva-loading 自动处理loading状态,不用重复写 show 、hideLoading

    HMR,基于 babel-plugin-dva-hmr实现 componentsroutesmodels的HMR

    安装

    dva-cli

    npm install dva-cli -g

    初始化

    dav new 项目名

    项目结构

    项目名称
    |
    |--mock
    |--public
    |--src
    |		|-assets 
    |		|-componets //UI组件
    |		|-models //管理修改状态
    |		|-routes //路由组件,切换路由展示的组件
    |		|-services //定义接口
    |		|-utils //使用fetch构建一个请求的工具
    |		|-index.js //要在这里载入model 
    |		|-router.js //在routes创建了组件后要在这里引入
    |
    |--.webpackrc //webpack配置
    

    使用antd

    Antd / 按需加载插件

    npm install antd babel-plugin-import --save

    npm install antd-mobile --save

    配置 .webpackrc 文件

    1.直接修改

    Antd

    {
     "extraBabelPlugins": [
       ["import", { "libraryName": "antd", "libraryDirectory": "es", "style": "css" }]
     ]
    }
    

    Antd-mobile

    {
     "extraBabelPlugins": [
       ["import", { "libraryName": "antd-mobile",  "style": "css" }]
     ]
    }
    

    2.拓展名改成.js

    const path = require('path')
    module.exports = {
      "extraBabelPlugins": [
        ["import", { "libraryName": "antd-mobile", "style": "css" }]
      ],
      alias:{
        '@':path.resolve(__dirname,'./src'),
        'components':path.resolve(__dirname,'./src/components'),
      }
    }
    

    定义路由

    路由使用histyory模式

    1) 终端中安装: npm install --save history
    2) 在入口的src/ index.js中 导入
    import {createBrowserHistory as createHistory} from "history"
    3) 修改dva初始化内容 src/index.js中
    const app =dva({history:createHistory()});

    在routes 文件夹下创建 Product 组件(route component)

    import React from 'react';
    const Products = (props) => (
      <h2>List of Products</h2>
    );
    export default Products;
    

    把路由信息添加到路由表,编辑router.js

    import React from 'react';
    import { Router, Route, Switch } from 'dva/router';
    import IndexPage from './routes/IndexPage';
    import ProductPage from './routes/ProductPage'
    function RouterConfig({ history }) {
      return (
        <Router history={history}>
          <Switch>
            <Route path="/" exact component={IndexPage} />
            <Route path="/product" exact component={ProductPage} />
          </Switch>
        </Router>
      );
    }
    export default RouterConfig;
    
    

    编写UI组件

    components 文件夹下创建js文件

    import React from 'react';
    import PropTypes from 'prop-types';
    import { Table, Popconfirm, Button } from 'antd';
    
    const ProductList = ({ onDelete, products }) => {
      const columns = [{
        title: 'Name',
        dataIndex: 'name',
      }, {
        title: 'Actions',
        render: (text, record) => {
          return (
            <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
              <Button>Delete</Button>
            </Popconfirm>
          );
        },
      }];
      return (
        <Table
          dataSource={products}
          columns={columns}
        />
      );
    };
    
    ProductList.propTypes = {
      onDelete: PropTypes.func.isRequired,
      products: PropTypes.array.isRequired,
    };
    
    export default ProductList;
    

    定义Model

    ​ Dva 通过model 的概念把一个领域的模型管理起来,包含同步更新 state和reducers ,处理异步逻辑effects,订阅数据源 subscription

    在model 文件夹中 创建文件 model/product.js

    export default {
      namespce:'product',  
      state:[],
      reducers:{
        'delete'(state,{payload:id}){
          	return state.filter(item => item.id !== id)
        }
      }
    }
    
    • namespace:表示在全局state上的key
    • state:是初始值,在这里是空数组
    • reducers:等同于redux中的reducer,接收action,同步更新 state

    要在 index.js中载入这个文件

    // 3. Model
    app.model(require('./models/products').default);
    

    把model和component -----connect 起来

    dva提供了和redux一样的 connect 方法

    import { connect } from 'dva';
    

    使用

    1. export default connect(({ products }) => ({
        products,
      }))(Products);
      
    2. 装饰器

      @connect(({ products }) => ({
        products,
      }))
      

    run起来

    index.js设置

     const app = dva({
       initialState: {
         products: [
           { name: 'dva', id: 1 },
           { name: 'antd', id: 2 },
         ],
       },
     });
    

    Dva 概念

    数据流向

    通常数据改变发生在用户交互行为,或者浏览器的行为(路由的跳转),当数据发生改变的时候,会dispatch一个action,如果是同步的就直接通过reducers 去改变State;如果是一个异步行为,就会通过触发effects,然后流向reducers ,最终改变State

    Model

    1. State : 表示Model的数据对象。在dva的实例属性上_store看到顶部的state数据。
    2. Action :改变State的唯一途径。通过dispatch一个actionaction必须带type,其他字段可以自定义。
    3. dispatch :在组件connect Model以后,通过props传入,用于触发一个action函数,调用到Model中的ReducerEffects,改变State的唯一方式。dispatch可以看做触发这个行为的方式。reducer看做描述如何改变数据的。
    4. Reducer: 聚合积累当前modelstate对象,通过action中的值,进行reducer中的运算,获取最新的state,每一次计算都是immutable data
    5. Effect :副作用,也就是异步操作。底层是redux-saga,是generator的语法,异步转成同步写法。
    6. Subscription :订阅。订阅一个数据源,依据条件dispatch需要的action。数据源可以是当前时间、websocket链接、keyboard输入、地理位置变化、路由变化等

    Router

    dva中提供了router的方法。使用的是react-router

    import { Router, Route } from 'dva/router';
    app.router(({history}) =>
      <Router history={history}>
        <Route path="/" component={HomePage} />
      </Router>
    );
    

    Route Component

    routes文件夹下

    其实就是Container Component

    入门 官网文档

    dva官方文档

    展开全文
  • dva版本从1.2.1=>2.1.0(内置react-router2=>react-router4) 其实react升级基本只更新一下包就可以了,主要是react-router升到4有很大的破坏性改动 ###升级总结### 1.react-router4不能嵌套<route>,现...

    升级目标:

    react和react-dom版本从15.4.2 => 16.8.0  

    dva版本从1.2.1 => 2.1.0(内置react-router2 => react-router4)

    其实react升级基本只更新一下包就可以了,主要是react-router升到4有很大的破坏性改动

    ### 升级总结 ###

    1. react-router4不能嵌套<route>,现在路由配置由一般会由原先的一个文件(router.js)的基础上又拆分到多个文件

    2. 新增跳转标签<NavLink>,activeClassName只能用在NavLink上面

    3. 跳转的参数传递和解析

       - query不是react-router4原生属性,不会显示在地址栏,但<link>的自定义属性还是会写到location属性里,但是刷新页面会丢失,所以正常情况还是直接拼在URL上,参数很多的情况可以用state传参(但是用新tab打开时,state属性会丢失)

       - this.context.router.push 改成 this.context.router.history.push(未来版本中有可能被抛弃)

       - 推荐直接用this.props.history.push({ pathname: '/' }, search: '?some=search-string', state: { })

       - 如果URL参数直接写到pathname上,当只改变参数页面不会自动刷新,需要在componentwillreceiveprops里面做判断然后是否重新获取数据之类,或者直接使用state

       - 以前通过location.query能拿到类似{ param: val }对象;现在只能通过location.search拿到类似 ?param=val 的字符自己解析参数

       - 解析动态路由参数:this.props.params改成this.props.match.params;还可以用useParams()

    4. redux里namespace routing里locationBeforeTransitions换成了location;

    5. 在非组件文件引用样式不生效

    基本route结构如下
    import { routerRedux, Route, Switch  } from 'dva/router';
    const { ConnectedRouter } = routerRedux;
          
    <ConnectedRouter history={history}>
       <Switch>
          <Route exact path="/" component={Login} />
          <Route path="/login" component={Login} />
          <Route path="/webConsole" component={WebConsole} />
          <Route path="/monitorChart" component={MonitorChartWrapper} />
          <Route path="/*" component={ConsoleFrameWrapper} />
       </Switch>
    </ConnectedRouter>

    react-router4 API : https://reacttraining.com/react-router/web/api/history

    展开全文
  • 1.如果你熟悉 HTML,那么 JSX 对于你来说是没有任何压力的,因为 HTML 中的所有标签,在 JSX 中都是支持的,基本上没有学习成本,只有如下几点略微的不同: class 属性变为 className tabindex 属性变为 ...

    1.如果你熟悉 HTML,那么 JSX 对于你来说是没有任何压力的,因为 HTML 中的所有标签,在 JSX 中都是支持的,基本上没有学习成本,只有如下几点略微的不同:
    class 属性变为 className
    tabindex 属性变为 tabIndex
    for 属性变为 htmlFor
    textarea 的值通过需要通过 value 属性来指定
    style 属性的值接收一个对象,css 的属性变为驼峰写法,如:backgroundColor。
    2.需要注意,不管那种方式,组件的名称首字母必须为大写。严格来说,是 JSX 要求用户自定义的组件名首字母必须为大写
    3.属性必须为只读的,这一点非常重要,请严格遵守。对应到上面说到的,如果把组件理解为一个函数,那么这个函数必须为一个纯函数(Pure function),在纯函数中不能修改其参数,确定的输入必须有确定的输出。
    虽然有些时候,你修改了组件的属性,貌似也能正常工作。没错,因为 JavaScript 语言特性的原因,没人能阻止你这么做。但是请先相信我,严格遵守这条规则不仅能让你少踩很多坑,而且能让你的应用稳定性更强、维护性更强。如果你直接修改组件的属性,React 并不会感知到此修改,从而不会重新渲染组件,就导致了当前组件的视图展示与数据不一致。
    4.React 提供了相应的机制可以设置组件属性的默认值,如下所示,你需要通过组件的静态字段 defaultProps 来设置组件属性的默认值。如下所示:
    import React, {Component} from ‘react’;
    class HelloMessage extends Component {
    render() {
    return

    ;
    }
    }HelloMessage.defaultProps = {
    name: ‘World’
    }
    这样就可以了, 这样不为组件设置任何属性,那么它就会在页面上展示Hello World.。
    5.我期望其 name 属性只能是字符串类型的,你要是给我一个 Object,我是没法正确展示的。为了在开发过程中尽快的发现这类问题,React 为组件添加了类型检查的机制,你需要给组件设置静态字段 propTypes 来设置组件各个属性的类型检查器。
    import React, {Component} from ‘react’;
    import PropTypes from ‘prop-types’;
    class HelloMessage extends Component {
    render() {
    return ;
    }
    }HelloMessage.defaultProps = {
    name: ‘World’
    }HelloMessage.propTypes = {
    name: PropTypes.string
    }
    6.下面是 React 提供的可用的数据类型检查器。
    PropTypes.array
    PropTypes.bool
    PropTypes.func
    PropTypes.number
    PropTypes.object
    PropTypes.string
    PropTypes.symbol
    PropTypes.element 元素,其实就是 JSX 表达式,上一篇文章有说过 JSX 是 React.createElement 的语法糖,一个 JSX 表达式实际上会生成一个 JS 对象,在 React 中称之为元素(Element)。
    PropTypes.node 所有可以被渲染的数据类型,包括:数值, 字符串, 元素或者这些类型的数组。
    PropTypes.instanceOf(Message) 某个类的实例
    PropTypes.oneOf([‘News’, ‘Photos’]) 枚举,属性值必须为其中的某一个值。
    PropTypes.oneOfType([PropTypes.string, PropTypes.number]) 类型枚举,属性必须为其中某一个类型。
    PropTypes.arrayOf(PropTypes.number) 属性为一个数组,且数组中的元素必须符合指定类型。
    PropTypes.objectOf(PropTypes.number) 属性为一个对象,且对象中的各个字段的值必须符合指定类型。
    PropTypes.any 任何类型
    如果你想指定某些属性为必需属性,你可以链式调动其 isRequired 来标识某个属性对于当前组件来说是必需的。
    7.设置组件的属性值
    属性的值可以用一对大括号 { } 来包围,其中可以指定任意的 JavaScript 表达式。如下所示:
    return (
    <User
    name=“Tom” // 字符串
    age={18} // 数值
    isActivated={true} // 布尔值
    interests={[‘basketball’, ‘music’]} // 数组
    address={{ city: ‘Beijing’, road: ‘BeiWuHuan’ }} // 对象
    />
    )
    8.ReactDOM.render 在一个单页面 web 应用中通常只调用一次。
    组件可以通过 setState 改变内部状态 state 来更新视图。
    setState 多数情况下是异步的。
    不要直接使用当前 state 的值生成下一个 state。
    不要直接通过 this.state 修改 state。

    9.扩展运算符
    扩展运算符用三个点号表示,功能是把数组或类数组对象展开成一系列用逗号隔开的值
    var foo = function(a, b, c) {
    console.log(a);
    console.log(b);
    console.log©;
    }
    var arr = [1, 2, 3];
    //传统写法
    foo(arr[0], arr[1], arr[2]);
    //使用扩展运算符foo(…arr);//1
    //2
    //3

    ES6 yield
    一、介绍
      yield 关键字用来暂停和继续一个生成器函数。我们可以在需要的时候控制函数的运行。
      yield 关键字使生成器函数暂停执行,并返回跟在它后面的表达式的当前值。与return类似,但是可以使用next方法让生成器函数继续执行函数yield后面内容,直到遇到yield暂停或return返回或函数执行结束。
    二、使用
    函数返回对象包括value和done。其中value值是yield后面表达式值或return后面表达式值。done用于表示函数运行
    function* ge() { //声明时需要添加*,普通函数内部不能使用yield关键字,否则会出错
    yield ‘1’;
    yield ‘2’;
    yield ‘3’;
    return ‘4’;
    }

    var a = ge(); //调用函数后不会运行,而是返回指向函数内部状态的指针
    a.next(); // { value: ‘1’, done: false } 遇到yield暂停
    a.next(); // { value: ‘2’, done: false }
    a.next(); // { value: ‘3’, done: false }
    a.next(); // { value: ‘4’, done: true} 函数执行完毕,返回done
    a.next(); // { value: undefined, done: true} 已经执行完毕,返回undefined
    如果next没有带有参数true,yield不能返回值,返回undefined;next函数带有参数true,即.next(true)时,那么yield就可以返回表达式的值,用于赋值。如果next带有其他参数,那么它就会将当前yield返回值置为该参数。如:
    var i = yield 1; // 将1赋值给i
    三、for…of
    for…of循环可以自动遍历Generator函数时生成的Iterator对象。
    function* ge() {
    yield ‘1’;
    yield ‘2’;
    yield ‘3’;
    return ‘4’;
    }for(let v of ge()){
    alert(V); // 1 2 3 4
    }

    四、yield与异步
    函数在遇到yield后暂停运行,我们可以在需要的地方使用next让它继续运行。并且必要时可以使用next传入参数。
    对于一些可能被多处引用的功能模块,建议提炼成业务组件统一管理。这些组件一般有以下特征:
    只负责一块相对独立,稳定的功能;
    没有单独的路由配置;
    可能是纯静态的,也可能包含自己的 state,但不涉及 dva 的数据流,仅受父组件(通常是一个页面)传递的参数控制。

    model里面包括以下五部分:namespace、state、reducers、effects、subscriptions,缺一不可。注意,这里也需要从service层导入相应的方法。
    namespace 命名空间
    namespace: ‘projects’
    state 相当于原生React中的state状态,用于存放数据的初始值。
    state: {
    projectsData: []}
    reducers 用于存放能够改变view的action,这里按照官方说明,不应该做数据的处理,只是用来return state,从而改变view层的展示。
    reducers: {
    getProjectAllData(state, action) {
    return { …state, …action.payload };
    },
    }
    effects 用于和后台交互,是处理异步数据逻辑的地方。
    effects: {
    *getAllProjects({ payload = {} }, { call, put }) {
    try {
    const res = yield call(projectsService.checkBranches, payload);
    yield put({
    type: ‘getProjectData’,
    payload: {
    projectsData: res.data
    }
    });
    } catch (e) {
    message.warning(e.message);
    }
    },
    }
    subscriptions 订阅监听,比如监听路由,进入页面如何如何,就可以在这里处理。相当于原生React中的componentWillMount方法。就比如上述代码,监听/project路由,进入该路由页面后,将发起getAllProjects aciton,获取页面数据。
    subscriptions: {
    setup({ dispatch, history }) {
    return history.listen(({ pathname }) => {
    if (pathname === ‘/projects’) {
    dispatch({
    type: ‘getAllProjects’
    });
    }
    });
    }
    }
    数据流向
    数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 然后流向 Reducers 最终改变 State。

    在react怎样引入jQuery
    安装jQuery
    npm i jquery -S
    在那个地方使用jQuery就在什么地方引入jQuery
    import $ from ‘jquery’
    类似

    使用Link,先引入Link
    import {
    BrowserRouter as Router,
    Route,
    Link
    } from ‘react-router-dom’
    有个很笨的办法可以出来效果:用menu的点击事件获取当前option的key存入state中,显示内容根据key值判断显示隐藏。方法虽然很笨,但是效果还行!

    展开全文
  • dva/React使用小结(一)

    千次阅读 2018-07-19 11:34:22
    目录 1、PureComponent组件 2、组件生命周期 3、关于箭头函数 4、path-to-regexp Package ...关于dva的基础知识框架,可以查看这里,毕竟国产的框架,阿里在里面详细、全面而通俗解释了dva整体的框架知识,...

    目录

    1、PureComponent组件

    2、组件生命周期

    3、关于箭头函数

    4、path-to-regexp Package

    5、classnames Package

    6、Injected Props (e.g. location)

    7、基于 action 进行页面跳转


    关于dva的基础知识框架,可以查看这里,毕竟国产的框架,阿里在里面详细、全面而通俗解释了dva整体的框架知识,对刚入门使用dva的同学有很大的帮助;另外一篇个人觉得写的也非常不错的文章,有兴趣也可以去拜读一下,初识dva。本文主要总结了我在使用过程中遇到的以及周围同学建议的比较好的技巧或方法。

    1、PureComponent组件

    PureComponent和Component都是React中的两种内置类。前者相对于后者,有一个比较突出的特点是:PureComponent只重新渲染组件props中变化的部分值所影响的元素,如果组件props没有变化,则不会触发render方法重新渲染组件。这个特点的一个好处是可以提高应用的性能,因为往往只是props中的部分成员发生变化,却要重新渲染整个组件,这是比较鸡肋的。但是坏处是,当我们想要使用有状态的组件时,setState方法是不能触发渲染的,因为组件的props没有变化,这时候就不得不舍弃PureComponent而使用Component了。反正各有利弊,不同场合下合理区别选择。

    2、组件生命周期

    React组件的生命周期,在官方网站上给了全面而详细的解释。

    这里比较强调的是,componentWillUpdate()和componentDidUpdate()。经过踩坑发现,这里的Update是指的Update组件的props而不是render,从这两个生命周期方法的参数也可以推测出这一点,切记切记。

    3、关于箭头函数

    在dva的实际工程开发中,常常用到箭头函数定义各种事件的回调函数。我目前碰到的情况一般有两种:

    一是回调函数没有自定义参数(事件对象除外),这种情况比较简单。直接将回调函数写到事件回调属性上去即可(最好使用箭头函数定义回调函数,这涉及到当前组件的成员方法/事件/属性的使用问题);

    二是回调函数有自己的参数,这种情况往往需要通过箭头函数将回调事件转移到自定义的回调函数上去,以便在事件发生时执行我们想要的操作。比较传统的就是在组件内重新定义一个方法,就是标准的箭头函数式定义,一般不会出问题;但是这样有一个麻烦:每次有事件回调都要单独定义一个方法,很不方便;为了偷懒,我们直接在事件回调属性上定义这个简单的回调方法,一开始我是这样的

    作为ECMAScript 6的菜鸟,并没有发现什么异常,但这样写的结果是【查询】按钮的点击事件是无效的,并不会乖乖去干我想让它干的事情。其实呢,从ES6 箭头函数的语法角度来看,this.onSearch("CIP")是一个方法块,有多行语句,对于有多行语句的,需要用{}括起来,因为js需要一个符号去识别这个方法体从而老老实实的去执行他们。因此,上面的写法应该改成这样

    按钮点击事件无效的问题就解决了

    【切记】不要直接将带参数的回调方法写在回调事件的属性上去,这会导致无限次调用该方法而使浏览器崩溃甚至是数据库服务器崩溃,这种写法是不需要事件触发的。

    【补充】有一个尚未完全解决的问题:本地运行没有问题,编译后发布在本地站点下按钮依然无效,原因正在挖掘中...

    4、path-to-regexp Package

    如果 url 规则比较复杂,比如 /users/:userId/search,那么匹配和 userId 的获取都会比较麻烦。这是推荐用 path-to-regexp简化这部分逻辑。

    import pathToRegexp from 'path-to-regexp';
    
    // in subscription
    const match = pathToRegexp('/users/:userId/search').exec(pathname);
    if (match) {
      const userId = match[1];
      // dispatch action with userId
    }

    5、classnames Package

    在一些复杂的场景中,一个元素可能对应多个 className,而每个 className 又基于一些条件来决定是否出现。这时,classnames 这个库就非常有用。

    import classnames from 'classnames';
    const App = (props) => {
      const cls = classnames({
        btn: true,
        btnLarge: props.type === 'submit',
        btnSmall: props.type === 'edit',
      });
      return <div className={ cls } />;
    }

    这样,传入不同的 type 给 App 组件,就会返回不同的 className 组合:

    <App type="submit" /> // btn btnLarge
    <App type="edit" />   // btn btnSmall

    6、Injected Props (e.g. location)

    Route Component 会有额外的 props 用以获取路由信息。

    • location
    • params
    • children

    更多详见:react-router

    7、基于 action 进行页面跳转

    import { routerRedux } from 'dva/router';
    
    // Inside Effects
    yield put(routerRedux.push('/logout'));
    
    // Outside Effects
    dispatch(routerRedux.push('/logout'));
    
    // With query
    routerRedux.push({
      pathname: '/logout',
      query: {
        page: 2,
      },
    });

    除 push(location) 外还有更多方法,详见 react-router-redux

    8、dva重要概念之订阅Subscription

    订阅方法接收的参数对象是谁?

    这个对象属性只有dispatch和history,也就是用的最多的路由监听。

    9、加载中处理小技巧——dva‐loading插件

    可以自动处理 loading 状态,不用一遍遍地写 showLoading 和 hideLoading

     

    【待续...】

     

     

    展开全文
  • 集成dvareact native和react-navigation

    千次阅读 2019-05-29 19:17:26
    先初始化一个react native的项目 npm install -g yarn react-native-cli react-native init AwesomeProject 准备安装dvareact-navigation 1.yarn add dva-core 2.yarn addreact-redux 3.yarn add react-...
  • 学习react前端框架dva

    千次阅读 2019-03-18 13:18:40
    dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:“dvareact 和 redux 的最佳实践”。 一.介绍 1.What's dva ? dva 是基于现有应用架构 (redux + react-router...
  • dva + react hooks实战Demo

    千次阅读 2020-06-21 16:16:52
    dva 是一款轻量级的应用框架,是阿里旗下的开源产品.dva是基于redux和redux-saga的数据流方案,然后为了简化开发体验,dva 还额外内置了react-router和fetch.写过原生redux代码的同学应该体会的到,redux里面充斥着大量...
  • dvareact hooks的第一个demo

    千次阅读 2019-09-18 21:50:43
    刚开始使用dva最陌生的就是像@connect…等这样的装饰器语法, 后来查询到是我未知的es6的语法,@connect实质上就是react-redux中的connect 因为对function component的形式不熟悉, 即使换成了export default...
  • 使用dva创建react项目

    2020-03-23 22:43:48
    1.安装dav npm install dva-cli -g 2.使用dav创建一个自己的项目 dva new react-web 3.安装antd npm i antd --save 4.安装babel npm i babel-plugin-import --save-dev 5.启动项目 npm start
  • dva+react中的CDN缓存

    2019-12-26 16:05:01
    所谓CDN缓存 已经放在服务器的项目,如果做了调整重新打包上传之后发现,不会...调整配置文件:此处是使用dva+react,使用的打包工具是roadhog,所以调整.webpackrc文件 1.添加配置: "hash": true, "html": { ...
  • React-Native集成dva.js

    2019-08-15 10:20:23
    dvajs作为一个基于redux的状态管理框架,在react中的表现还是很不错的,如果我们想要在react-native应用中使用dvajs该怎么做呢? 首先安装dva-core和react-redux: npm i -S dva-core react-redux dva-core...
  • dva+react+ant.design

    千次阅读 2017-09-27 14:45:07
    之前在工作中使用了了react+redux。近来发现有个叫dva的东西出来。所以用自己能理解的解释下dva是什么东东基于 redux、redux-saga 和 react-router 的轻量级前端框架特性 易学易用:仅有 6 个 api,对 redux 用户...
  • dva+react 设置启动端口

    2019-12-18 11:28:16
    dva+react 设置启动端口 根据需要,一个电脑会同时运行多个项目,如果不设置默认端口的话,都是8000,那么如果有一个项目正在运行,重新启动一个的话,会提示是否需要重新开启一个,选择yes之后就没有下文了。所以...
  • React + Dva + Antd + Umi 快速入门

    万次阅读 多人点赞 2018-09-10 13:39:10
    最近一个项目用了React + Dva + Antd + Umi技术栈,现处于慢慢摸索过程中,分享出来与大家共同学习进步。 基础框架概念先知道 React 前端三大框架之一。 Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端...
  • Dva框架开发react项目理解

    千次阅读 2018-08-06 18:26:30
    Dva整体理解 前言 README.md 欢迎阅读,本文档将带你了解dva的整体思路。 介绍 应用 dva 框架搭建平台,dva 是基于 redux 最佳实践实现的framework,简化使用 redux 和redux-saga 时很多繁杂的操作...
  • react+dva+antd的骚操作

    千次阅读 2019-08-06 14:25:29
    原谅我直接跳过react的基础,直接就讲react+dva的实际应用,因为直接从项目结构来讲,我觉得学习的成本更低,开发的速度更快,当然有时间的话还是建议冲react的基础学起。 react的参考资料: 建议先从React 入门...
  • React技术3-集成dva

    2020-05-23 22:52:17
    React技术3-集成dvaReact技术3-集成dva一、引入 dva二、`src/index.js` 文件编写三、编写 model 模版四、在页面中引入 model五、改变 state 数据六、effects 异步请求七、获取其他model 的数据 React技术3-集成dva ...
  • Dva_react使用问题总结

    2019-10-06 08:45:49
    1.. npm install dva-cli -g  dva -v //需要在0.9.1以上  // dva-cli version 0.10.1 2.. 创建初始化应用 dva new dva_react_init     3.. 提示 require("history").createHashHist...
  • react+umi+dva背景创建一个umi应用umi应用的路由配置路由路由配置工程化约定式路由路由跳转安装插件集@umijs/preset-reactumi+antdumi+dva 背景 React 前端三大框架之一。 Dva 由阿里架构师 sorrycc 带领 team 完成...
  • dva构建react应用程序

    千次阅读 2017-07-10 14:47:44
    昨天才用create-react-app创建了react的开发环境,以为今后就用它来创建开发环境咯,谁知道才用了一天,才发下dva也是用来创建react开发环境的。 dva是淘宝团队弄的,为了支持国货,赶紧试试看咋用吧 第一步:安装...
1 2 3 4 5 ... 20
收藏数 3,454
精华内容 1,381
关键字:

dva总结 react