• react之dva框架的使用

    2019-02-27 11:35:31
    dva框架的中文官网dva中文教程 在介绍dva之前,推荐一款网页编程工具,codesandbox,在线编写工具,前提要网速要快,这样就不用在内存中下载模块了,随用随时下载模块,缺点就是网速慢时界面不好 ...

    dva框架的中文官网dva中文教程

    在介绍dva之前,推荐一款网页编程工具,codesandbox,在线编写工具,前提要网速要快,这样就不用在内存中下载模块了,随用随时下载模块,缺点就是网速慢时界面不好

    使用

    $ npm install dva-cli -g//下载全局脚手架
    $ dva -v //脚手架版本
    dva-cli version 0.9.2
    $ dva new dva-demo &&cd dva-demo &&npm start //初始化dva项目

    初始化之后的基本结构

    其实真正起作用,即比较重要的就只有public和src这两个文件夹,其他的知识一些配置项而已,而主入口也就是src下的index.js ,而且src下一些内容也需要架构师搭起来,如图所示则是基本的一些功能而已

    .webpackrc是用来配置打包,可以配置less变量,打包路径等等,详见.webpackrc配置文档

    index.js的内容:(dva五部曲)

    import dva from "dva";
    import { history } from "dva/router";
    import router from "./router";
    import model from "./models/common";
    //1,创建dva实例
    const app = dva();
    //2,装载插件
    app.use({})
    //3,注册model
    app.model(model);
    //4,配置路由
    app.router(router);
    //5,启动应用
    app.start("#root");

    如果不需要插件、模型、路由中的一个或多个可以相应注释掉2,3,4步,也就是说1、5步骤是必不可少的

    2、插件,一个dva-loading插件,使用方法https://www.npmjs.com/package/dva-loading

    即给路由组件的props添加一个loading对象,可以控制,loading加载,没有用过,一般都是自定义loading样式

    3、model,说实话就是redux的各个功能集合,可以说dva的精华所在,而且dva的model感觉十分新颖,简洁,model也有5部分,namespce、state、reducers、effects、subscriptions,通过命名即可访问到

    import delay from "../utils/delay";
    import key from "keymaster";
    export default {
      //model总共五部分组成
      namespace: "common",
      state: {
        //初始化的数据
      },
      reducers: {
        //相当于redux的reducer
        
      },
      effects: {
        //redux进行异步处理的中间件(redux-saga原理)
      },
      subscriptions: {
        //订阅器(例如某个键盘键按下执行dispatch),管理所有的组件,不是单一组件
      }
    };

    4、router,路由,就是配置一个路由表,用的是react-router-dom,即router4,二级路由在组件中配置即可

    import { Router, Route, Switch } from "dva/router";
    import React from "react";
    import index from "./components/index";
    import age from "./components/age";
    export default ({ history }) => {
      return (
        <Router history={history}>
          <Switch>
            <Route path="/" exact component={index} />
            <Route path="/age" component={age} />
          </Switch>
        </Router>
      );
    };

    另外,dva还封装了一些方法,dva-fetch就是fetch,发起ajax请求的方法;

    dva-dynamic是用于动态加载路由组件的,优化性能,本来我们路由组件在路由表中是一开始就加载的,而dynamic是用来动态加载的,即在配置路由的时候加载

    import { Router, Switch, Route } from 'dva/router'
    import dynamic from 'dva/dynamic'
    
    function RouterConfig({ history, app }) {
      const IndexPage = dynamic({
        app,
        component: () => import('./routes/IndexPage'),
      })
    
      const Users = dynamic({
        app,
        models: () => [import('./models/users')],
        component: () => import('./routes/Users'),
      })
    
      return (
        <Router history={history}>
          <Switch>
            <Route exact path="/" component={IndexPage} />
            <Route exact path="/users" component={Users} />
          </Switch>
        </Router>
      )
    }
    
    export default RouterConfig

    opts

    • app: dva 实例,加载 models 时需要
    • models: 返回 Promise 数组的函数,Promise 返回 dva model
    • component:返回 Promise 的函数,Promise 返回 React Component

    dva-saga,主要用于model中effects的使用,其实就是基于redux-saga中间件的封装 ,而redux-saga是基于generator函数的,所以比redux-thunk更难理解一些,基本使用:https://redux-saga-in-chinese.js.org/docs/api/index.html

    *add1(action, { call, put }) {
        yield put({ type: "add" });
        yield call(delay, 1000);
        yield put({ type: "reduce" });
    }

    Generator 函数的作用是可以暂停执行,再次执行的时候从上次暂停的地方继续执行。Effect 是一个简单的对象,该对象包含了一些给 middleware 解释执行的信息。你可以通过使用 effects APIforkcalltakeputcancel 等来创建 Effect。其实主要用到的也就使yield,call,put这三个,yield是generator函数中的,意思思,暂停执行,put是用来传到reducer当中的,相当于dispatch,type对应reducers中的type另外要想要阻塞执行,不使用回调函数,必须使用yield!!!!

    而call则是调用其他异步方法,第一个是方法名,第二个是传的参数,而yield是自动dva封装之后执行完上一步自动执行的,即相当于es8新提供async函数中的await,这种比redux-thunk好处就是没有许多大括号的回调函数,待上一次promise结束后再执行该函数!

     

    展开全文
  • React之Dva的学习

    2019-09-11 09:09:29
    我们前两篇都是用create-react-app创建工程的,但是它只能创建一个最基本的空程序。在前两篇中,我们自己用npm装上了router,redux等依赖包,并自己手动写了很多操作。 Dva将上述一切进行了简化,它是一个封装好很多...

    一、创建Dva工程

    我们前两篇都是用create-react-app创建工程的,但是它只能创建一个最基本的空程序。在前两篇中,我们自己用npm装上了router,redux等依赖包,并自己手动写了很多操作。
    Dva将上述一切进行了简化,它是一个封装好很多模块的框架,并且拥有自己的脚手架。用Dva创建的工程,从目录结构起就非常清晰。(虽然框架这种东西可以简化很多操作,但在使用框架前还是不能忘记本源,所以建议前两篇也粗略的看一看。)

    先安装dva-cli脚手架

    npm install dva-cli -g
    

    dva -v可以查看版本号
    在这里插入图片描述
    跟create-react-app一样,用dva在命令行创建app。

    dva new dva-app   //这里的dva new 是创建项目的命令   dva-app是我们新建的项目名
    

    其后进入工程文件并启动工程。

    cd dva-app
    npm start
    

    在这里插入图片描述
    Dva工程的目录结构如下:
    在这里插入图片描述
    可以看出,比create-react是多了很多东西的。
    除了index.js的入口文件,和router.js的初始路由,上面那些文件夹里大致意义如下:

    • asserts 用于存放静态资源,跟以往正常的java工程一样,里面扔图片视频之类的。
    • components 用于存放公共组件,比如页面头尾导航条。
    • routes 用于存放路由组件,可以通俗的理解成页面。与component的区别在于一般是非公共的并且会跟model里的数据模型联系起来。
    • models 用于存放模型文件,(个人认为model才是react-redux体系里最重要的部分),我们之前说的state以及reducer都会写在里面,同时,通过connect跟routes里面的组件进行绑定。routes中的组件通过connect拿到model中的数据,model也能通过connect接收到组件中dispatch的action。
    • services 用于存放跟后台交互的服务文件,一般都需要调用后台的接口。
    • utils 用于存放工具类库。

    其他的配置文件暂时不管啦。

    整体的流程大致(数据流向)是:
    从index入口进入 => 通过url匹配routes里的组件(顺便看看components里有没有啥公共组件要加载过来) => routes里的组件dispatch action => model通过action改变state(中途可能会通过services跟后台交互) => 通过connect重新渲染routes中的组件
    在这里插入图片描述

    二、实践出真知

    理论不如实践,那么,我们用Dva搞一个前两篇中的例子试一试,路由切换并且做个表格。(其实具体各个函数的写法跟前两篇中基本一样,只是写的位置不一样。下面详解。)
    在这里插入图片描述

    在这里插入图片描述
    首页

    入口文件:

    首先,在入口文件index.js中,能看到已经给我们留了model模型和router路由的位置。在开发中,所有的model模型文件都需要在这里注册,这样才能用connect跟组件联系起来。

    // 1. Initialize
    const app = dva();
    
    // 2. Plugins
    // app.use({});
    
    // 3. Model   //先暂时不管Model
    // app.model(require('./models/example').default);
    
    // 4. Router
    app.router(require('./router').default);
    
    // 5. Start
    app.start('#root');
    
    

    先不管Model,Router告诉我们引用了router.js,打开router.js文件看一眼如下。 下面有代码讲解

    import IndexPage from './routes/IndexPage';
    ……
        <Router history={history}>
          <Switch>
            <Route path="/" exact component={IndexPage} />
          </Switch>
        </Router>
    

    讲解:通俗易懂,在路径为/的时候匹配到IndexPage。(说明:不用我们自己装Router,我们建立router.js以后,框架自动给我们配置了Router,是不是很方便~)注意这里加了exact,表示精确匹配,如果不加则/aaa, /bbb, /whatever都会匹配到IndexPage,精确匹配的话只有输入/的时候才会匹配。
    IndexPage里能看到欢迎信息,那个小丑图片和提示文字,这里就不贴过来了。

    路由切换:

    下面我们自己做个路由切换的效果。

    Step1: 装Antd!

    虽然Dva很贴心的封装了很多工具包但是并没有封装样式库,所以Antd还是需要自己装的。

    npm install antd
    npm install babel-plugin-import
    

    并编辑.webpackrc文件。如下所示

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

    这样就可以使用Antd了。

    Step2: 新增组件

    下一步我们需要新建一些组件:
    在这里插入图片描述
    我们在routes里面新建aaa.jsbbb.js两个组件。内容随便写点啥,反正只是为了切换用。
    ① aaa.js

    // aaa.js
    import React, { Component } from 'react'
    import { connect } from 'dva'
    
    class AAA extends Component { //BBB同理
        render() {
            return (
                <div>
                   <h1>AAA</h1>
                </div>
            )
        }
    }
    
    AAA.propsTypes = {}
    export default connect()(AAA)  //connect函数将store对象与本组件联系在一起
    

    Step3: 定义导航栏

    然后,在components里建立两个公共组件header.jslayout.js
    header.js用作页面上方的导航栏,理想效果如下,通过点击不同导航切换地址栏url。
    在这里插入图片描述
    header.js需要引入antd的Menu模块,以及dva封装好的LinkLink的作用即匹配相应的路径,在爬坑之路二里我们也用到过。

    // header.js
    ……
    import { Menu } from 'antd';
    import { Link } from 'dva/router'
    
    class Header extends Component {
        render() {
            return (
                <Menu
                  theme="dark"
                  mode="horizontal"
                  defaultSelectedKeys={['1']}
                  style={{ lineHeight: '64px' }}
                >
                  <Menu.Item key="1">
                        <Link to="/">Index</Link>
                  </Menu.Item>
                  <Menu.Item key="2">
                        <Link to="/aaa">AAA</Link>
                  </Menu.Item>
                  <Menu.Item key="3">
                        <Link to="/bbb">BBB</Link>
                  </Menu.Item>
                </Menu>
            )
        }
    }
    ……
    

    Step4: 定义布局

    layout.js用来当整体页面布局,我们想把页面分成两部分,上面放导航条下面放子内容。头部需要引入刚刚的header组件,然后以<Header />的方式插入到节点中。props是layout.js组件的属性(解释:就是其他组件向Layout组件传值的时候,Layout组件用props来接收),用于传递数据,每个组件都有自己的props。props.children表示该组件的所有子节点。

    // layout.js
    import React, { Component } from 'react'
    import { connect } from 'dva';
    import Header from '../components/header'
    
    class Layout extends Component {
        render() {
            const { children } = this.props
            return (
                <div>
                    <Header />
                    <div style={{ background: '#fff', padding: 24 }}>{children}</div>
                </div>
            )
        }
    }
    
    export default Layout;
    

    Step5: 连接路由

    此时还差最后一步,就是把路由跟刚刚的这些组件联系起来。我们回到router.js,修改如下。

    // router.js
    import React from 'react';
    import { Router, Route, Switch } from 'dva/router';
    import Layout from './components/layout'
    import IndexPage from './routes/IndexPage';
    import AAA from './routes/aaa';
    import BBB from './routes/bbb';
    
    function RouterConfig({ history }) {  //这里的history是存储历史浏览记录的栈
      return (
        <Router history={history}>  //{history}固定写法
            <Layout>   //下面有代码讲解
                  <Switch>
                    <Route path="/" exact component={IndexPage} />
                    <Route path="/aaa" exact component={AAA} />
                    <Route path="/bbb" exact component={BBB} />
                  </Switch>
            </Layout>
        </Router>
      );
    }
    
    export default RouterConfig;
    

    讲解:
    <Layout></Layout>标签括起来的那部分就是父组件传给 Layout组件的值。然后在Layout组件内部,通过props属性做接收,从而展示在Layout组件中

    以上操作的流程是,在header.js中,我们通过点击不同导航栏,更换地址栏的url;接下来在router.js中,通过匹配地址栏的url,选择加载的子组件呈现到页面上。
    最终的效果应如下所示:
    在这里插入图片描述
    在这里插入图片描述
    路由到此结束,接下来加上列表。

    列表操作:

    Step1:创建routes页面组件

    routes/IndexPage.js页面组件里,我们把爬坑之路二的那个列表拿过来。

    在这里插入图片描述

    //IndexPage.js部分代码如下
      <div>
            <Button type="primary" onClick={this.changeData}>修改数据</Button>
            <div>
                <Table columns={columns} dataSource={data}/>
            </div>
        </div>
    

    Table标签有两个属性,columns是表头,dataSource是数据,均绑定到state。只是这一次,state和action都不是直接写在页面组件下的了,而是定义到对应的模型文件中。

    Step2:创建models模型

    我们新建models/indexpage.js作为模型文件。可以参考项目自带的example.js,里面已经给出了state,effects和reducers的地方。

    //models/indexpage.js   //下面有代码讲解
    export default {    
      namespace: 'indexpage',
      state: {
        columns: [{
              title: '姓名',
              dataIndex: 'name',
            }, {
              title: '性别',
              dataIndex: 'gender',
            }],
        data: [{
            "key": "1",
            "name": "王大斌",
            "gender": "男"
          },{
            "key": "2",
            "name": "刘小洋",
            "gender": "男"
          }]
      },
    
      subscriptions: {
      ……
      },
    
      effects: {
      ……
      },
    
      reducers: {
      ……
      },
    };
    

    讲解namespace是该模型文件的命名空间,也是在全局state上的属性,在routes组件中,我们可以用this.props.某命名空间获取state(根节点)中某命名空间的数据。

    Step3:通过connect关联数据

    回到routes/IndexPage.js页面组件,如果我们在routes中想要用model里面的数据的话,我们需要通过connect工具来传递,其基本用法是connect(从model中获取数据)(绑定到routes组件)

    //routes/IndexPage.js
    import { connect } from 'dva';
    
    class IndexPage extends Component{
        changeData = () => {
            console.log("Change Data");
        };
    
        render() {     //因为在下面的export default connect已经把model层里的indexpage中的state绑     定到本组件了
            const { columns, data } = this.props.indexpage; //获取indexpage中的state
            console.log(this.props);
            return (
                <div>
                    <Button type="primary" onClick={this.changeData}>修改数据</Button>
                    <div>
                        <Table columns={columns} dataSource={data}/>
                    </div>
                </div>
            )
        }
    }
    //这样models/indexpage.js的state数据就被绑定到routes/IndexPage.js的table节点上啦,列表被赋予了两行值。
    export default connect(({ indexpage }) => ({  /connect()里面的函数体为什么这样写????
      indexpage,
    }))(IndexPage);
    

    Step4:创建services获取数据

    假设我们有个json数据是这样的,放在8080端口,我们想把它当做一行添加到上面的列表里。
    在这里插入图片描述
    在services中我们同后台进行交互,新建services/user.js文件。

    //services/user.js
    import request from '../utils/request';
    
    export function getUser() {     //request方法用于向后台发送请求  
      return request('http://localhost:8080/data');
    }
    

    utils/request.js里面已经贴心的自带了request方法用于请求url,直接拿来用就可以。
    这样,在我们调用getUser()方法时,就会得到请求数据啦。
    友情提示,以往我们一直习惯直接在model里调用getUser()然后用setstate改变state的值,但这是不符合Dva的规则的,Dva规定我们必须通过触发action才可以改变state,也就是下一步。

    Step5:触发action

    对于这个列表,我们希望点击按钮添加一行。根据前面的讲述我们知道了,改变state的值需要dispatch(action),再调用reducer改变state,进而重新渲染,这是Dva规定的数据流传输方式。
    这里的action有两种走向,对于同步行为(比如我就改变个按钮颜色),可以直接调用model中的reducer。而对于异步行为(比如从服务器请求数据),需要先触发effects然后调用reducer。
    下面我们在routes/IndexPage.js里,通过onClick={this.changeData}按钮事件,触发一个action给模型文件。

    //点击按钮触发
        changeData = () => {
            const { dispatch } = this.props;
            dispatch({   //通过dispatch向models层发送一个请求
              type: 'indexpage/addUser',  //这表示我们要调用models/indexpage.js的addUser方法。
              payload: {},
            });
        };
    

    这表示我们要调用models/indexpage.jsaddUser方法。
    models/indexpage.js里,我们需要在effects中定义好这个方法。
    effects 属性的语法可以参考Redux-saga 中文文档,它可以获取全局state,也可以触发action。effects内部使用 yield 关键字标识每一步的操作,call表示调用异步函数,put表示dispatch(action)。

    effects: {    //因为该函数里面有yield处理异步函数,所以函数名前面有*,这里的*是ES6里generator function的一种语法,     函数的第一个参数是payload,这是默认约定俗成的参数名,我们应该也可以改成其他的参数名,参数名叫什么都可以,无所谓的。函数的第二个参数对象是 effect 原语集,其中 call, put 最为常用
        *addUser({ payload }, { call, put }) {  // eslint-disable-line
          const myuser = yield call(userService.getUser, {});
          yield put({  
            type: 'ADD_USER',
            payload: {
                  myuser:myuser.data
            },
          });
        },
      },
    

    这表明,我们先读取service中的getUser()方法,得到返回结果,然后将它放到payload里,然后调用了model层里面的reducer里面名为ADD_USER的action,告诉它要改变state。

    Step5:调用reducer

    我们说过,reducer是纯函数,当输入相同时输出也必然相同,其输入参数是当前的state和收到的action,他会返回一个新的 state。
    ...三点运算符在爬坑二中说过了哦,作用是把数组打开进行操作。我们把payload中的信息加在state的原有data之后。

     reducers: {
        ADD_USER(state, action) {
          return { ...state, 
            data:state.data.concat(action.payload.myuser) }; //把payload中的信息加在state的原有data之后
        },
      },
    

    点击一下按钮,是不是已经添加成功了~ 还记得在爬坑之路二中,我们需要手动去创建监听重新渲染页面才能看到更新效果,而在Dva中,由于使用了connect,会在内部自动更新,并不用手动刷新了呢。

    最终的成果如下所示:
    在这里插入图片描述
    这样,就完成了一个简单的页面切换和修改state的例子。

    本文转载自:https://www.jianshu.com/p/513c5eab17c1

    展开全文
  • 学习react前端框架dva

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

     dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:“dva 是 react 和 redux 的最佳实践”。


    一.介绍

    1.What's dva ?

    dva 是基于现有应用架构 (redux + react-router + redux-saga 等)的一层轻量封装。dva 是 react 和 redux 的最佳实践。最核心的是提供了 app.model 方法,用于把 reducer, initialState, action, saga 封装到一起。官网    dva = React-Router + Redux + Redux-saga

    2.安装

    1.安装 dva-cli
    npm install dva-cli -g
    2.扎到安装项目的目录
    cd ylz_project/my_reactdemo
    3.创建项目:Dva-test项目名
    dva new Dva-test
    4.进入项目
    cd Dva-test
    5.启动项目
    npm  start

     成功。

    3.项目结构

    二.概念

    下面都是官网的知识点

    (1).数据流向

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

    (2).Model

    model 是 dva 中最重要的概念,Model 非 MVC 中的 M,而是领域模型,用于把数据相关的逻辑聚合到一起,几乎所有的数据,逻辑都在这边进行处理分发

    1.State

    State 表示 Model 的状态数据,通常表现为一个 javascript 对象(当然它可以是任何值);操作的时候每次都要当作不可变数据(immutable data)来对待,保证每次都是全新对象,没有引用关系,这样才能保证 State 的独立性,便于测试和追踪变化。

    // dva()初始化
    const app = dva({
      initialState: { count: 1 },
    });
    
    // modal()定义事件
    app.model({
      namespace: 'count',
      state: 0,
    });
    
    //初始值,我们在 dva() 初始化的时候和在 modal 里面的 state 对其两处进行定义,其中  modal 中的优先级低于传给  dva() 的  opts.initialState

    2.Action   :type dispatch = (a: Action) => Action

    Action 是一个普通 javascript 对象,它是改变 State 的唯一途径。表示操作事件,可以是同步,也可以是异步
    action 的格式如下,它需要有一个 type ,表示这个 action 要触发什么操作;payload 则表示这个 action 将要传递的数据

    我们通过 dispatch 方法来发送一个 action

    /*Action
    Action 表示操作事件,可以是同步,也可以是异步
     {
      type: String,
      payload: data
    }
    */
    dispatch(Action);
    dispatch({ type: 'todos/add', payload: 'Learn Dva' });
    

    其实我们可以构建一个Action 创建函数,如下 

    const  USER-LIST  = 'USER-LIST'//用户列表
    //action 函数
    function  user(data){
    	return {type:MSG_READ ,payload:data}
    }
    
    dispatch(user(data))

    3.dispatch 函数: type dispatch = (a: Action) => Action

    dispatching function 是一个用于触发 action 的函数,action 是改变 State 的唯一途径,但是它只描述了一个行为,而 dipatch 可以看作是触发这个行为的方式,而 Reducer 则是描述如何改变数据的。
    在 dva 中,connect Model 的组件通过 props 可以访问到 dispatch,可以调用 Model 中的 Reducer 或者 Effects,常见的形式如:

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

    4.reducer:   type Reducer<S, A> = (state: S, action: A) => S

    Reducer(也称为 reducing function)函数接受两个参数:之前已经累积运算的结果和当前要被累积的值,返回的是一个新的累积结果。该函数把一个集合归并成一个单值。

    //state的值
    const initState = {
    	users:{},//用户信息
    }
    
    //1 reducer 函数
    export function chat(state=initState, action){
    	switch(action.type){
    		case USER_LIST:
    			return {...state,users:action.payload.users}
    		default:
    		 	return state
    	}
    }

    Reducer 的概念来自于是函数式编程,很多语言中都有 reduce API。如在 javascript 中: 

    [{x:1},{y:2},{z:3}].reduce(function(prev, next){
        return Object.assign(prev, next);
    })
    //return {x:1, y:2, z:3}

    在 dva 中,reducers 聚合积累的结果是当前 model 的 state 对象。通过 actions 中传入的值,与当前 reducers 中的值进行运算获得新的值(也就是新的 state)。需要注意的是 Reducer 必须是纯函数,所以同样的输入必然得到同样的输出,它们不应该产生任何副作用。并且,每一次的计算都应该使用immutable data,这种特性简单理解就是每次操作都是返回一个全新的数据(独立,纯净),所以热重载和时间旅行这些功能才能够使用。 

    5.Effect

    用于处理异步操作和业务逻辑,不直接修改 state,简单的来说,就是获取从服务端获取数据,并且发起一个 action 交给 reducer 的地方。基于 Redux-saga 实现。Effect 指的是副作用。根据函数式编程,计算以外的操作都属于 Effect,典型的就是 I/O 操作、数据库读写。

    常见的操作:

    1.put
    用于触发 action 。
    yield put({ type: 'todos/add', payload: 'Learn Dva' });
     
    2.call
    用于调用异步逻辑,支持 promise 。
    const result = yield call(fetch, '/todos');
     
    3.select
    用于从 state 里获取数据。
    const todos = yield select(state => state.todos);
    

    简单的理解Redux-Saga

    6.subscription

    subscription 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。在 app.start() 时被执行,数据源可以是当前的时间、当前页面的url、服务器的 websocket 连接、history 路由变化等等。

    一般格式是:

    subscriptions: {
        setup({ dispatch, history }) { 
    		
        },
    },

    异步数据初始化
    比如:当用户进入 /users 页面时,触发 action users/fetch 加载用户数据。 

    app.model({
      subscriptions: {
        setup({ dispatch, history }) {
          history.listen(({ pathname }) => {
            if (pathname === '/users') {
              dispatch({
                type: 'users/fetch',
              });
            }
          });
        },
      },
    });

     键盘事件

    import key from 'keymaster';
    ...
    app.model({
      namespace: 'count',
      subscriptions: {
        keyEvent({dispatch}) {
          key('⌘+up, ctrl+up', () => { dispatch({type:'add'}) });
        },
      }
    });

    (3).Router   表示路由配置信息

    项目中的 router.js。

    这里的路由通常指的是前端路由,由于我们的应用现在通常是单页应用,所以需要前端代码来控制路由逻辑,通过浏览器提供的 History API 可以监听浏览器url的变化,从而控制路由相关操作。

    Route Component 表示 Router 里匹配路径的 Component,通常会绑定 model 的数据

    import { connect } from 'dva';
    
    function App() {
      return <div>App</div>;
    }
    
    function mapStateToProps(state) {
      return { todos: state.todos };
    }
    
    export default connect(mapStateToProps)(App);
    

    三.Dva API

    官网.

    1.app = dva(Opts):创建应用,返回 dva 实例。(注:dva 支持多实例)​

    opts 包含:
        history:指定给路由用的 history,默认是 hashHistory      关于react-router中的hashHistorybrowserHistory的区别大家可以看:react-router
        initialState:指定初始数据,优先级高于 model 中的 state,默认是 {},但是基本上都在modal里面设置相应的state。
    如果要配置 history 为 browserHistory,可以这样:

    import createHistory from 'history/createBrowserHistory';
    const app = dva({
      history: createHistory(),
    });

    另外,出于易用性的考虑,opts 里也可以配所有的 hooks ,下面包含全部的可配属性:

    const app = dva({
      history,
      initialState,
      onError,
      onAction,
      onStateChange,
      onReducer,
      onEffect,
      onHmr,
      extraReducers,
      extraEnhancers,
    });

     2.app.use(Hooks):配置 hooks 或者注册插件。  

    这里最常见的就是dva-loading插件的配置,就是引入第三方插件的时候使用

    import createLoading from 'dva-loading';
    ...
    app.use(createLoading(opts));

    3.app.model()

    model 是 dva 中最重要的概念。 这个是你数据逻辑处理,数据流动的地方。

    (1).5个属性

    A.namespace
    model 的命名空间,同时也是他在全局 state 上的属性,只能用字符串,不支持通过 . 的方式创建多层命名空间。
    B.state
    初始值,优先级低于传给 dva() 的 opts.initialState。

    const app = dva({
      initialState: { count: 1 },
    });
    app.model({
      namespace: 'count',
      state: 0,
    });
    此时,在 app.start() 后 state.count 为 1 。

    同上面
    C.reducer
    D.Effect
    E.subscription

    总结:

    Model 对象的属性

    1. namespace: 当前 Model 的名称。整个应用的 State,由多个小的 Model 的 State 以 namespace 为 key 合成
    2. state: 该 Model 当前的状态。数据保存在这里,直接决定了视图层的输出
    3. reducers: Action 处理器,处理同步动作,用来算出最新的 State
    4. effects:Action 处理器,处理异步动作

    4.app.unmodel(namespace)   取消 model 注册

    5.app.router(({ history, app }) => RouterConfig)
    注册路由表,我们做路由跳转的地方。一般是这样写:

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

    推荐把路由信息抽成一个单独的文件,这样结合 babel-plugin-dva-hmr 可实现路由和组件的热加载。

    比如:app.router(require('./router'));

    但是如果你的项目特别的庞大,我们就要考虑到相应的性能的问题,就要router按需加载的写法。 

    6.app.start(selector)

    启动应用,项目跑起来
    app.start('#root');

    四.安装插件

    1.使用 antd

    A.antd 和 babel-plugin-import 。babel-plugin-import 是用来按需加载 antd 的脚本和样式的,

    npm install antd babel-plugin-import --save

    B.编辑 .webpackrc,使 babel-plugin-import 插件生效。

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

    2.安装antd-mobile

    npm install antd-mobile --save 

    直接引用css就好:import 'antd-mobile/dist/antd-mobile.css'

    按需加载:

    安装babel-plugin-import:   cnpm install babel-plugin-import --save

    找到根目录下的.webpackrc文件,并在该文件中添加以下代码

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

    五.操作

    官网:操作         上手快速

    一.路由定义:router.js
    	import React from 'react';
    	import { Router, Route, Switch } from 'dva/router';
    	import User from './routes/user';
    
    	function RouterConfig({ history }) {
    		return (
    			<Router history={history}>
    			  	<Switch>
    			    	<Route path="/user" exact component={User} />
    			  	</Switch>
    			</Router>
    		);
    	}
    
    	export default RouterConfig;
    	浏览器访问:http://localhost:8000/#/user
    
    
    二.定义 model/user:设置state的值
    
       export default {
    	  	namespace: 'user',
    	  	state: {
    		    list: [],
    		    total: null,
    		    loading: false, // 控制加载状态
    			current: null, // 当前分页信息
    			currentItem: {}, // 当前操作的用户对象
    		},
    	}
    
    三.页面组件定义:
    1. routes/user
    	import React from 'react';
    	import { connect } from 'dva';
    	import styles from './user.css';
    	import UserList from '../components/users/userList';
    	import UserSearch from '../components/users/userSearch';
    	import UserModal from '../components/users/userModal';
    
    	function User() {
    		const userSearchProps = {};
    		const userListProps = {};
    		const userModalProps = {};
    
    		return (
    			<div className={styles.normal}>
    			   {/* 用户筛选搜索框 */}
    				<UserSearch {...userSearchProps} />
    				{/* 用户信息展示列表 */ }
    				<UserList {...userListProps} />
    				{/* 添加用户 & 修改用户弹出的浮层 */ }
    				<UserModal {...userModalProps} />
    			</div>
    		);
    	}
    
    
    	export default connect()(User);
    
    2.完成component页面:userList  userSearch userModal
    	import React, { PropTypes } from 'react';
    	import { Table, message, Popconfirm } from 'antd';
    
    	const UserList = ({total,current,loading,dataSource}) => {
    		const columns=[{}];
    		const pagination = {};
    		return (
    			<div>
    		      	<Table  columns={columns}
    			        dataSource={dataSource}
    			        loading={loading}
    			        rowKey={record => record.id}
    			        pagination={pagination} />
    		    </div>
    		);
    	}
    
    	export default userList;
    
    
    注意:routes可以简单的理解是页面组件   components可以理解是模块组件, 
     routes里面引用多个components的组件
    
    
    四.更新state:—》model/user里面完成 reducers  计算新的state
    
    	export default {
    	  	namespace: 'user',
    		reducers: {
    		     // 使用静态数据返回
    		    querySuccess(state){
    		      	const mock = {
    			        total: 3,
    			        current: 1,
    			        loading: false,
    			        list: [
    						{
    							id: 1,
    							name: '张三',
    							age: 23,
    							address: '成都',
    						},
    			        ]
    			    };
    		      	return {...state, ...mock, loading: false};
    		    },
    		    createSuccess(){},
    	    	deleteSuccess(){},
    	    	updateSuccess(){},
    		}
    	}
    
    五.关联Model数据:把model中计算的新state的值  关联到组件 
        =》返回routes/user 
    
    	import { connect } from 'dva';
    	function User({ location, dispatch, user }) {
    		//Model中state 赋值到 { loading, list, total, current,currentItem, modalVisible, modalType}
    		const {
    		    loading, list, total, current,
    		    currentItem, modalVisible, modalType
    		} = user;
    
    		const userListProps = {
    			dataSource: list,
    			total,
    			loading,
    			current,
    		};		
    		const userSearchProps = {};
    		const userModalProps = {};
    
    		return (
    			<div className={styles.normal}>
    			   {/* 用户筛选搜索框 */}
    				<UserSearch {...userSearchProps} />
    				{/* 用户信息展示列表 */ }
    				<UserList {...userListProps} />
    				{/* 添加用户 & 修改用户弹出的浮层 */ }
    				<UserModal {...userModalProps} />
    			</div>
    		);
    	}
        //指定订阅数据,这里关联了model中 user
    	function mapStateToProps({ user }) {
    	  return {user};
    	}
    	//建立数据关联关系
    	const User = connect(mapStateToProps)(User);
    	export default  User;
    
    注意:1.记得 index.js 入口文件处要要关联model :app.model(require('./models/user')); 否则获取不到数据
    
    2.数据关联以后,就可以通过 props 访问到 model 的数据了,
    而 UserList 展示组件的数据,也是 routes/user 组件 通过 props 传递的过来的。
    
    六.数据关联后,就要更新reducer的数据 :model/user
    调用 reducers呢,就是需要发起一个 action。  这边可以使用Subscription 订阅 监听路由的改变
    subscriptions: {
    	    setup({ dispatch, history }) {
    		    history.listen(location => {
    		        if (location.pathname === '/user') {
    		          	dispatch({
    		            	type: 'querySuccess',
    		            	payload: {}
    		          	});
    		        }
    		    });
    	    },
      	},
    
    
    七.异步处理:返回model  effects: {...}的操作
    
        	import { hashHistory } from 'dva/router';
    	import { query } from '../services/user';
    	export default {
    		namespace: 'user',
    		reducers: {
    			showLoading(state, action){
    				return { ...state, loading: true };
    			},// 控制加载状态的 reducer
    			showModal(){}, // 控制 Modal 显示状态的 reducer
    			hideModal(){},
    			// 使用服务器数据返回
    			querySuccess(state, action){
    			  return {...state, ...action.payload, loading: false};
    			},
    		},
    		effects: {
    			*query({ payload }, { select, call, put }) {
    				yield put({ type: 'showLoading' });
    				const { data } = yield call(query);
    				if (data) {
    					yield put({
    						type: 'querySuccess',
    						payload: {
    							list: data.data,
    							total: data.page.total,
    							current: data.page.current
    						}
    					});
    				}
    			},
    		}
    	}
    
    八.后端数据请求
    1.代理 
     在.webpackrc 文件里面加
    "proxy": {
    	  	"/api": {
    	    	"target": "http://localhost:8080",
    	    	"changeOrigin": true,
    	    	"pathRewrite": { 
    	    		"^/api" : "" 
    	    	}
    	  	}
    	},
    
    或是  安装  roadhorg    在.roadhogrc.js里面做代理
    
    2.在services/user 做交互   
    
    	/*与后台系统的交互)
    	request 是我们封装的一个网络请求库
    	qs是一个npm仓库所管理的包  对请求返回的数据进行处理
    */
    	import request from '../utils/request';
    	import qs from 'qs';
    
    	export async function query(params) {
    	  return request(`/api/user?${qs.stringify(params)}`);
    	}

    执行上面8步骤就差不多

    六.补充

    (一).dva 2.0中如何使用代码进行路由跳转

    react-router@4.0 让路由变得更简单,最大特点就是可以路由嵌套。由于 dva 将react-router-domreact-router-redux都封装到了 dva/router 中,在使用 react-router@4.0 和 redux 里面的东西时只需引入 dva/router 这个包即可。react-router@4.0 文档 API

    dva 中使用 router4.0

    router.js:

    import React from 'react';
    import { Router, Route, Switch,routerRedux } from 'dva/router';
    import BasicLayout from '../layouts/BasicLayout'
    
    
    const { ConnectedRouter } = routerRedux;
    function RouterConfig({ history }) {
    	return (
    		<ConnectedRouter history={history}>
            	<Route path="/" component={BasicLayout} />
          	</ConnectedRouter>
    	);
    }
    
    export default RouterConfig;
    

    Route 为 react-router-dom 内的标签
    ConnectedRouter 为 react-router-redux 内的对象 routerRedux 的标签,作用相当于 react-router-dom 中的 BrowserRouter 标签,作用为连接 redux 使用
     

    1.路由跳转

    引入 dva/router,使用 routerReux 对象的 push 方法控制,值为要跳转的路由地址,与根目录下 router.js 中配置的路由地址是相同的。routerReux 就是上面 dva/router 第二个导出的 react-router-redux 包对象。

    此处示例为跳转到 /user 路由。

    // models > app.js
    import { routerRedux } from 'dva/router';
    
    export default {
      // ...
      effects: {
          // 路由跳转
          * redirect ({ payload }, { put }) {
            yield put(routerRedux.push('/user'));
          },
      }
      // ...
    }
    

    2.携带参数
    有时路由的跳转还需要携带参数。

    3.传参:
    routerRedux.push 方法的第二个参数填写参数对象。此处示例表示跳转到 /user 路由,并携带参数 {name: 'dkvirus', age: 20}。

    // models > app.js
    import { routerRedux } from 'dva/router';
    
    export default {
      // ...
      effects: {
          // 路由跳转
          * redirect ({ payload }, { put }) {
            yield put(routerRedux.push('/user', {name: 'dkvirus', age: 20}));
          },
      }
      // ...
    }
    

    接收参数: 

    // models > user.js
    export default {
      subscriptions: {
        /**
         * 监听浏览器地址,当跳转到 /user 时进入该方法
         * @param dispatch 触发器,用于触发 effects 中的 query 方法
         * @param history 浏览器历史记录,主要用到它的 location 属性以获取地址栏地址
         */
        setup ({ dispatch, history }) {
          history.listen((location) => {
            console.log('location is: %o', location);
            console.log('重定向接收参数:%o', location.state)
            // 调用 effects 属性中的 query 方法,并将 location.state 作为参数传递 
            dispatch({
              type: 'query',
              payload: location.state,
            })
          });
        },
      },
      effects: {
        *query ({ payload }, { call, put }) {
           console.log('payload is: %o', payload);
        }
      }
      // ...
    }
    

    在 user.js 中 subscriptions 属性会监听路由。当 app.js 中通过代码跳转到 /user 路由,models>user.js>subscriptions 属性中的 setup 方法会被触发,location 记录着相关信息。打印如下:

    location is: Object
        hash: ""
        key: "kss7as"
        pathname: "/user"
        search: ""
        state: {name: "bob", age: 21}
    重定向接收参数:Object
        age:21
        name:"bob"

     可以看到 location.state 就是传递过来的参数。在 subscriptions 中可以使用 dispatch 触发 effects 中的方法同时传递参数。

    (三). 解决组件动态加载问题的 util 方法

    import dynamic from 'dva/dynamic';

    opts 包含:

    • app: dva 实例,加载 models 时需要
    • models: 返回 Promise 数组的函数,Promise 返回 dva model
    • component:返回 Promise 的函数,Promise 返回 React Component

    使用如下:

    mport dynamic from 'dva/dynamic'
    
    {
    routeArr.map((item, key) => {
    	return <Route key={key} exact path={item.path} component={dynamic({ //保证路由的唯一性 exact key
    		app,
    		model: item.models,
    		component: item.component,
    	})} />
    })
    
    }

    (四).React.Component与React.PureComponent的区别


    React15.3中新加了一个 PureComponent 类,顾名思义, pure 是纯的意思, PureComponent 也就是纯组件,取代其前身 PureRenderMixin , PureComponent 是优化 React 应用程序最重要的方法之一,易于实施,只要把继承类从 Component 换成 PureComponent 即可,可以减少不必要的 render操作的次数,从而提高性能,而且可以少写 shouldComponentUpdate 函数,节省了点代码。

        React.PureComponent 与 React.Component 几乎完全相同,但 React.PureComponent 通过prop和state的浅对比来实现 shouldComponentUpate()
    如果React组件的 render() 函数在给定相同的props和state下渲染为相同的结果,在某些场景下你可以使用 React.PureComponent 来提升性能

    七.参考

    1. Dva-React 应用框架在蚂蚁金服的实践
    2.   dva.js 知识导图     
    3. redux-saga   
    4.  UMI       
    5. dva理论到实践——帮你扫清dva的知识盲点      
    6. History API   
    7. redux docs 中文
    8. roadhog介绍
    9. 基于dva-cli&antd的react项目实战
    10. 10分钟 让你dva从入门到精通
    11. 上手快速
    12. async 函数的含义和用法
    13. 基于 dva 创建 antd-mobile 的项目

    八.案例

    1.后台管理系统

    展开全文
  • 记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记。之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程。 先了解下概念 React 不多说,3大框架之一; Dva 是由阿里架构师 sorrycc 带领 ...

    记录一下最近项目所用到的技术React + Dva + Antd + umi ,以免忘记。之前没有用过它们其中一个,也是慢慢摸索,了解数据整个流程。

    先了解下概念

    React 不多说,3大框架之一;

    Dva 是由阿里架构师 sorrycc 带领 team 完成的一套前端框架,在作者的 github 里是这么描述它的:“dva 是 react 和 redux 的最佳实践”。现在已经有了自己的官网 https://dvajs.com;

    Antd 是阿里的一套开箱即用的中台前端/设计解决方案,UI框架,官网 http://ant-design.gitee.io/index-cn;

    umi 是 dva 作者 sorrycc 最近整的新玩意,2018.2.26 发布的 1.0 版本。sorrycc 认为之前 dva 固然好,但还要用户自己引入 UI 工具 antd,打包工具 roadhog,路由 react-router,状态管理器 dva,这些很麻烦,所以弄了这个,官网 https://umijs.org;

     

    在dva中主要分3层,models,services,components,其中models是最重要概念,这里放的是各种数据,与数据交互的应该都是在这里。services是请求后台接口的方法。components是组件了。

    services层:

    复制代码

    export function doit (body) {
        return request({
            method: "post",
            url: `${wechatApi}/doit`,
            data: JSON.stringify(body),
        })
    }
    
    这里就是请求后台接口的方法,其中这里的request是封装了axios的函数,所以它是返回的是一个promise对象,url就是要请求的地址,body就是请求参数了。
    
    那个request如下
    
    import axios from "axios"
    
    export default async function request (options) {
        let response
        try {
            response = await axios(options)
            return response
        } catch (err) {
            return response
        }
    }

    复制代码

    models层:

    复制代码

    //model里面这些"namespace,state,reducers,effects,subscriptions"是一个整体,不能缺少,不然会报错
    export default {
        namespace: "test", //命名空间名字,必填  
        state: { num: 0 },//state就是用来放初始值的
        // 能改变界面的action应该放这里,这里按官方意思不应该做数据处理,只是用来return state 从而改变界面
        reducers:{
         addNum ( // addNum可以理解为一个方法名 
            // 这里state就是上面初始的state,这里理解是旧state
            state, { payload: { num }}// num 是传过来的,名字随便起,不是state中的num,这接收一个action       )         { //return新的state,这样页面就会更新 es6语法,就是把state全部展开,然后把num:num重新赋值,这样后面赋值的num就会覆盖前面的。也是es6语法,相同名字可以写成一个,所以上面接收处写了num
            return { ...state, num} 
          },
          },
        // 与后台交互,处理数据逻辑的地方
          effects:{
    

          * fetchNum({ payload2 }, { call, put,select }) {//fetchNum方法名,payload2是传来的参数,是个对象,如果没参数可以写成{_,{call,put,select}}

            const { data } = yield call(myService.doit, {anum:payload2.numCount}) // myService是引入service层那个js的一个名字,anum是后台要求传的参数,data就是后台返回来的数据

            //const m = yield select((state) => state.test.num) //select就是用来选择上面state里的,这里没用上

            yield put({

              type: "addNum",// 这就是reducer中addNum方法, put就是用来触发上面reducer的方法,payload里就是传过去的参数。 同时它也能触发同等级effects中其他方法。

              payload: {

                num: data, // 把后台返回的数据赋值给了num,假如那个reducer中方法是由这里effects去触发的,那个num名必须是这里名字num,如果reducer中方法不是这触发,那名字可随便起

              },

            })

          },
         * fetchUser(_,{call,put}) {
          // XXXXXXX代码
        }
        },
          subscriptions:{
          // 订阅监听,比如我们监听路由,进入页面就如何,可以在这写
    

            setup ({ dispatch, history, query }) {

              return history.listen(async ({ pathname, search, query}) => {

                if (pathname==="/testdemo") {// 当进入testdemo这路由,就会触发fetchUser方法

                  dispatch({ type: "fetchUser" })

                  }

              })

          }
    )

    复制代码

    components层:

    复制代码

    clickHandler = () => {
            dispatch({
                            type: "test/fetchNum",// 这里就会触发models层里面effects中fetchNum方法(也可以直接触发reducer中方法,看具体情况) ,test就是models里的命名空间名字
                            payload: {
                                numCount: ++1,
                            },
                        })
    }

    复制代码

     

    所以整体流程是:

    点击页面按钮,会触发clickHandler,——>触发models层effect的fetchNum——>触发services层doit,获取到后台返回数据——>触发models层的addNum,把返回数据传给addNum,再去更新models里的state,components应用了models层中的state的num的话,就会触发页面render方法重新渲染,界面就会更新。

    render方法什么时候会触发

    当state或props变化时就会触发render,我们一般在render里只获取props和state,尽量不做逻辑处理(数据逻辑处理基本在render上面的函数或者models中处理)。当父组件给子组件传递props时,子组件那个props最好不要在render里面做逻辑计算赋值,不然传递过去,子

    组件有可能拿不到最新的值。比如传了个数组arr,arr在render里做了数据处理,赋值,render会运行多次(这里举例3次)所以结果可能是[1,2,3] [1,2,3] [1,2],子组件拿到的值是[1,2,3]而不是最终的[1,2],所以当你出现

    子组件无法获取父组件传递过来最后正确的值,看看是不是值在render做了运算赋值,解决方法就是把数据逻辑放在models层处理,然后再返回,这样就没问题了。

     

    页面要应用models层的数据要用connect

    复制代码

    import { Component } from "react"
    import { connect } from "dva"
    
    
    class TheDemo  extends Component {
        clickHandler = () =>{xxxx}
       render () {
        const {num} = this.props //获取下面的num
            return (
            <div>
                <button onClick={this.clickHandler}><button>
                <p>{num}</p>
            </div>
    )
        }
    }
    
    //字面意思就是,把models的state变成组件的props
    function mapStateToProps (state) {
        const { num} = state.test // test就是models命名空间名字 
        return {
            num, // 在这return,上面才能获取到
        }
    }
    
    export default connect(mapStateToProps)(TheDemo)    
                
    展开全文
  • 本项目环境:(在该环境下测试通过,默认使用cnpm) dva 0.9.2 node 8.10.0 安装 dva-cli 确保版本在 0.9.1 及以上 $ npm install dva-cli -g $ dva -v dva-cli version 0.9.2 创建新应用 $ dva new dva-demo ...

    效果展示

    本项目搭建过程参考 Dva官方快速上手教程
    项目环境:(在该环境下测试通过,默认使用cnpm)
    dva 0.9.2
    node 8.10.0

    安装 dva-cli

    确保版本在 0.9.1 及以上

    $ npm install dva-cli -g
    $ dva -v
    dva-cli version 0.9.2
    

    创建新应用

    $ dva new dva-demo
    

    完成之后进入生成的项目文件夹并启动项目

    $ cd dva-demo
    $ npm start
    

    在浏览器里打开 http://localhost:8000
    项目文件组织结构

    使用 antd

    antd 是淘宝前端团队开源的一个UI库

    安装 antd 和 babel-plugin-import(babel-plugin-import 用来按需加载 antd 的脚本和样式)

    $ cnpm install antd babel-plugin-import --save
    

    编辑 .webpackrc,使 babel-plugin-import 插件生效(代码每行首个字符为 + 表示该行为新增内容,下同)

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

    定义路由

    创建一个数据列表页面,实现增删改查

    新建路由组件routes/Products.js

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

    添加路由信息到路由表 router.js

    + import Products from './routes/Products';
    ...
    + <Route path="/products" exact component={Products} />
    

    然后在浏览器里打开 http://localhost:8000/#/products

    编写 UI 组件

    新建 components/ProductList.js 文件

    import React from 'react';
    import PropTypes from 'prop-types';
    import { Table, Popconfirm, Button } from 'antd';
    
    const ProductList = ({ products }) => {
      const columns = [{
        title: '名称',
        dataIndex: 'name',
      }, {
        title: '描述',
        dataIndex: 'desc'
      }];
      return (
        <Table
          dataSource={products}
          columns={columns}
        />
      );
    };
    
    ProductList.propTypes = {
      products: PropTypes.array.isRequired,
    };
    
    export default ProductList;
    

    定义 Model

    现在开始处理数据和逻辑:dva 通过 model 的概念把一个领域的模型管理起来,包含同步更新 state 的 reducers,处理异步逻辑的 effects,订阅数据源的 subscriptions 。

    • namespace 表示在全局 state 上的 key
    • state 是初始值,在这里是空数组
    • reducers 等同于 redux 里的 reducer,接收action,同步更新 state
      新建 model models/products.js
    export default {
      namespace: 'products',
      state: [],
      reducers: {},
    };
    

    index.js 里载入model

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

    connect 起来

    dva 提供了 connect 方法将 model 和 component 串联起来
    编辑 routes/Products.js

    import React from 'react';
    import { connect } from 'dva';
    import ProductList from '../components/ProductList';
    
    const Products = ({ dispatch, products }) => {
      return (
        <div>
          <h2>List of Products</h2>
          <ProductList products={products} />
        </div>
      );
    };
    
    // export default Products;
    export default connect(({ products }) => ({
      products,
    }))(Products);
    

    在 model 里面添加初始数据 models/products.js

    export default {
      namespace: 'products',
      state: [
        {
          id: 1,
          name: 'dva',
          desc: 'dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。'
        },
        {
          id: 2,
          name: 'antd',
          desc: '服务于企业级产品的设计体系,基于确定和自然的设计价值观上的模块化解决方案,让设计者和开发者专注于更好的用户体验。'
        },
      ],
      reducers: {},
    };
    

    刷新浏览器看到以下效果
    数据列表

    添加删除等功能

    编辑 components/ProductList.js

    + import { Table, Popconfirm, Button } from 'antd';
    
    + const ProductList = ({ onDelete, products }) => {
    ...
    +   }, {
    +     title: 'Actions',
    +     render: (text, record) => {
    +       return (
    +         <Popconfirm title="Delete?" onConfirm={() => onDelete(record.id)}>
    +            <Button>Delete</Button>
    +         </Popconfirm>
    +       );
    +     },
    +   }];
    ... 
    ProductList.propTypes = {
    +   onDelete: PropTypes.func.isRequired,
      products: PropTypes.array.isRequired,
    };
    ...
    

    编辑 models/products.js

    reducers: {
    +    'delete'(state, { payload: id }) {
    +       return state.filter(item => item.id !== id);
    +     },
      },
    

    编辑 routes/Products.js

    + const Products = ({ dispatch, products }) => {
    +   function handleDelete(id) {
    +     dispatch({
    +       type: 'products/delete',
    +       payload: id,
    +     });
    +   }
      return (
        <div>
          <h2>List of Products</h2>
    +       <ProductList onDelete={handleDelete} products={products} />
        </div>
      );
    };
    

    刷新浏览器看到以下效果
    数据列表删除功能
    项目文件组织结构(可 查看,删除 数据列表页面)

    使用 Class 语法创建拥有 增/删/改/查 功能的数据列表页面

    定义路由

    新建路由组件routes/Users.js

    import React, { Component } from 'react';
    import { connect } from 'dva';
    import styles from './Users.less';
    import { LocaleProvider } from 'antd';
    import zhCN from 'antd/lib/locale-provider/zh_CN';
    
    import { Table, Popconfirm, Button } from 'antd';
    import * as lodash from 'lodash';
    import EditModal from '../components/EditModal';
    
    
    class Users extends Component {
      constructor(props) {
        super(props);
        this.state = {
          editModalVisible: false, // 修改弹框显示状态
          selectedRecord: null, // 当前选中的记录
        };
        this.columns = [{
          title: 'ID',
          dataIndex: 'id',
          }, {
            title: '名称',
            dataIndex: 'name',
          }, {
            title: '性别',
            dataIndex: 'sex',
            render: (text) => {
              return (
                text === 'F' ? '女' : '男'
              );
            },
          }, {
            title: '年龄',
            dataIndex: 'age'
          }, {
            title: '操作',
            render: (text, record) => {
              return (
                <div>
                  <Button onClick={()=> this.onShowEidtModal(record)}>Edit</Button>
                  <Popconfirm title="Delete?" onConfirm={() => this.onDelete(record.id)}>
                    <Button>Delete</Button>
                  </Popconfirm>
                </div>
              );
            },
          }
        ];
      }
    
    
      componentWillMount() {
        this.props.dispatch({ type: 'users/init'});
      }
    
      componentDidMount() {
      }
    
      componentWillReceiveProps(nextProps) {
    
      }
    
      handleAdd = () => {
        this.setState({
          editModalVisible: true,
        })
      }
    
      onDelete = (id) => {
        let { dispatch, userList } = this.props;
        let newUserList =  userList.filter(user => user.id != id);
        dispatch({
          type: 'users/saveUserList',
          payload: newUserList
        })
      }
    
      onShowEidtModal = (record) => {
        console.log('onShowEditModal(), record:', record);
        this.setState({
          editModalVisible: true,
          selectedRecord: record,
        });
      }
    
      handleOk = (newUser, type) => {
        console.log('handleOk(), newUser:', newUser);
        const { dispatch, userList } = this.props;
        let newUserList = userList || [];
        if (type == 0) {
          newUserList.push(newUser);
        } else if (type == 1 && !!newUserList) {
          for(let i = 0; i < newUserList.length; i ++) {
            if (newUserList[i].id == newUser.id) {
              newUserList[i] = newUser;
            }
          }
        }
    
        dispatch({
          type: 'users/saveUserList',
          payload: newUserList,
        })
        this.setState({
          editModalVisible: false,
          selectedRecord: null,
        })
      }
    
      handleCancel = (e) => {
        console.log('handleCancel:', e);
        this.setState({
          editModalVisible: false,
          selectedRecord: null,
        })
      }
    
      render() {
        const { userList } = this.props;
        console.log('users => render(), userList:', userList);
        const {
          editModalVisible, selectedRecord } = this.state;
    
        console.log('render(), editModalVisible:', editModalVisible, 'selectedRecord:', selectedRecord);
        return (
          <LocaleProvider locale={zhCN}>
            <div className={styles.container}>
              <Button onClick={() => this.handleAdd()}>添加</Button>
              <Table
                dataSource={userList}
                columns={this.columns}
              />
              {
                editModalVisible &&
                <EditModal
                  type={lodash.isEmpty(selectedRecord) ? 0 : 1}
                  data={selectedRecord}
                  handleOk={this.handleOk}
                  handleCancel={this.handleCancel}
                />
              }
            </div>
          </LocaleProvider>
        );
      }
    }
    
    function mapStateToProps(state) {
      const { userList } = state.users;
      return {
        userList,
      };
    }
    
    export default connect(mapStateToProps)(Users);
    
    

    新建 users/Users.less

    .container {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: 0;
      background-color: antiquewhite;
    }
    

    添加路由信息到路由表 router.js

    + import Users from './routes/Users';
    ...
    + <Route path="/users" exact component={Users} />
    

    然后在浏览器里打开 http://localhost:8000/#/users

    编写 UI 组件

    新建 components/EditModal.js 文件

    import React, { Component } from 'react';
    import styles from './EditModal.less';
    import {
      Modal,
      Form,
      Input,
      DatePicker,
      TimePicker,
      Select,
      Cascader,
      InputNumber,
    }
    from 'antd';
    const uuidv1 = require('uuid/v1');
    
    const { Option } = Select;
    
    class EditModal extends Component {
      constructor(props) {
        super(props);
        this.state = {
          id: !!props.data && props.data.id || null,
          name: !!props.data && props.data.name || null, // 当前选中的记录
          sex: !!props.data && props.data.sex || null, // 当前选中的记录
          age: !!props.data && props.data.age || null, // 当前选中的记录
        };
      }
    
      handleOk = (e) => {
        console.log(e);
        const { id, name, age, sex } = this.state;
        let user = {
          id,
          name,
          age,
          sex,
        };
        if (!id || id === 'undefined' || id === '') {
          user.id = uuidv1();
          this.props.handleOk(user, 0);
        } else {
          this.props.handleOk(user, 1);
        }
      }
    
      handleCancel = (e) => {
        console.log(e);
        this.props.handleCancel(e);
      }
    
      handleChangeName = (e) => {
        this.setState({
          name: e.target.value,
        })
      }
    
      handleChangeSex = (sex) => {
        console.log('handleChangeSex(), sex:', sex);
        this.setState({
          sex,
        })
      }
    
      handleChangeAge = (e) => {
        this.setState({
          age: e.target.value,
        })
      }
    
      getFormDom() {
        const { name, age, sex } = this.state;
        return (
          <div className={styles.form}>
            <div>
              <lable>姓名</lable><Input value={name} onChange={this.handleChangeName} />
            </div>
            <div>
              <lable>性别</lable>
              <Select defaultValue={sex || "F"} style={{width: '100%'}} onChange={this.handleChangeSex} >
                <Option value="M">男</Option>
                <Option value="F">女</Option>
              </Select>
            </div>
            <div>
              <lable>年龄</lable><Input value={age} onChange={this.handleChangeAge} />
            </div>
          </div>
        )
      }
    
      render() {
        return (
          <div>
            <Modal
              title={this.props.type === 0 ? '添加' : '修改'}
              onOk={this.handleOk}
              onCancel={this.handleCancel}
              visible={true}
            >
              {this.getFormDom()}
            </Modal>
          </div>
        );
      }
    }
    
    export default EditModal;
    
    

    新建 components/EditModal.less 文件

    .form {
      > div {
        display: flex;
        margin: 10px 0;
        text-align: center;
        align-items: center;
        justify-content: flex-start;
    
        > lable {
          width: 80px;
        }
      }
    }
    

    定义 Model

    新建 model models/users.js

    export default {
      namespace: 'users',
      state: {
        userList: [],
      },
      reducers: {
        saveUserList(state, { payload }) {
          console.log('model users => reducers/saveUserList(), payload:', payload);
          return { ...state, userList: Object.assign([], payload || []) };
        }
      },
      effects: {
        *init(_, { call, put, select }) {
          //获取后台数据
          const userList = [{
            id: 1,
            name: '张三',
            age: 13,
            sex: 'F'
          }, {
            id: 2,
            name: '张四',
            age: 14,
            sex: 'M'
          }, {
            id: 3,
            name: '张五',
            age: 15,
            sex: 'F'
          }, {
            id: 4,
            name: '张六',
            age: 16,
            sex: 'M'
          }, {
            id: 5,
            name: '张七',
            age: 16,
            sex: 'F'
          }];
          yield put({
            type: 'saveUserList',
            payload: userList
          });
        }
      },
      subscriptions: {
        setup({ dispatch, history }) {
          return history.listen(({ pathname, query }) => {
          });
        }
      },
    };
    
    

    index.js 里载入model

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

    然后在浏览器里打开 http://localhost:8000/#/users
    看到如下效果
    用户列表增删改查
    用户添加/修改数据
    用户增删改查功能
    到此完成基本功能,详见源码 github
    文中若有错误或者需要改进的地方,欢迎大家留言指正,或到github提交issues

    展开全文
  • 门槛React 技术栈二. Hello World三. 一个简单H5功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...
  • 1、react主要是函数式组件,首字母大写,一般返回一个jsx对象 纯函数组件的特点: 组件不会被实例化,整体渲染性能得到提升 组件不能访问this对象 组件无法访问生命周期的方法 无状态组件只能访问输入的props,无副作用...
  • react环境搭建(基于dva)
  • 最近在学习dva,这个让人头疼,学会了超级好用的状态管理框架,但是发现在真正实践中还遇到了很多问题,通过耐心的寻找度娘,终于解决了这个让我困惑了一阵问题。所以记录一下,希望能够帮助后期入坑的小伙伴们。这...
  • react+dva+antd的骚操作

    2019-08-06 14:25:29
    原谅我直接跳过react的基础,直接就讲react+dva的实际应用,因为直接从项目结构来讲,我觉得学习的成本更低,开发的速度更快,当然有时间的话还是建议冲react的基础学起。 react的参考资料: 建议先从React 入门...
  • 最近一个项目用了React + Dva + Antd + Umi技术栈,现处于慢慢摸索过程中,分享出来与大家共同学习进步。 基础框架概念先知道 React 前端三大框架之一。 Dva 由阿里架构师 sorrycc 带领 team 完成的一套前端...
  • react 生态圈的开放、自由、繁荣,也导致开发配置繁琐、选择迷茫。react-coat 放弃某些灵活性、以...试试简单到几乎不用学习就能上手的react-coat吧: 项目地址:https://github.com/wooline/react-coat 4.0 发...
  • React+DVA开发实践

    2018-01-09 17:27:01
    本文档在前面章节简单的介绍了React和其相关的一系列技术,最后章节介绍了React+Dva开发的整套过程和基本原理,也就是将一系列框架整合的结果。 文档结构 本文档划分为以下章节,前面几个章节是知识储备,最后...
  • react项目打包优化

    2019-08-03 16:19:09
    本文分享react项目的打包优化, 项目使用create-react-app创建。不做任何优化时打包体积过大,首页渲染十分缓慢。 使用webpack-bundle-analyzer查看打包chunck的内容,使用方式如下: yarn add webpack-bundle-...
  • 前言: 用react 来做了很多小项目 一直都没结合router来使用更别说redux ,今天就尝试了下使用react的全家桶,试着装环境下包什么的太... 然后又发现 umi 又是集成了 dav+ant +react全家桶的 ,但是dav是个什么鬼,不知...
  • react笔记汇总

    2019-09-28 02:14:25
    1.什么是React? a.React 是一个用于构建用户界面的 JAVASCRIPT 库。 b.React主要用于构建UI,很多人认为 React 是 MVC 中的 V。 c.React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年...
  • Dva整体理解 前言 README.md 欢迎阅读,本文档将带你了解dva的整体思路。 ...应用 dva 框架搭建平台,dva 是基于 redux 最佳实践实现的framework,简化使用 redux 和redux-saga 时很多繁杂的操作。...
  • 后来查询到是我未知的es6的语法,@connect实质上就是react-redux中的connect 因为对function component的形式不熟悉, 即使换成了export default(mapStateToProps)(Demo)后还是报了props not definite的错误,结果...
  • npm install -g create-react-app # 构建一个my-app的项目 npx create-react-app my-app cd my-app # 启动编译当前的React项目,并自动打开 http://localhost:3000/ npm start fetch 集成 //方式一:安装fetch...
1 2 3 4 5 ... 7
收藏数 133
精华内容 53
热门标签