React爬坑之路三:Dva

前两篇写了react各种基本操作和主要概念
但其实没必要那么复杂直接用框架就好啦
这年头前端框架真是一睁眼就多出好几个
傻瓜级教程写的不合理的地方请批评指正

React官网:https://reactjs.org/
菜鸟教程:http://www.runoob.com/react/react-tutorial.html
ES6入门: http://es6.ruanyifeng.com/
Ant Design:https://ant.design/index-cn
Redux: https://www.redux.org.cn/
Dva:https://github.com/dvajs/dva

先附上上上篇的链接。React爬坑之路一:React+Antd+Axios
和上篇的链接。React爬坑之路二:Router+Redux
第一篇其实说过了,之所以在简书记录了一下React是因为工作培训时小哥给的Dva工程ST发现一行都看不懂 = =
原本想在研究Dva之前先简写下React的基本概念,没想到写太多直接更新了两篇博客。
那么现在终于可以来研究Dva啦。

Dva是守望先锋中一个热门英雄,拥有一部强大的机甲,同时具有两台全自动的近距离聚变机炮……
诶,不是这个Dva吗Σ(⊙▽⊙")

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

npm install dva-cli -g
用dva -v可以查看版本号。
dva版本.png

跟create-react-app一样,用dva在命令行创建app。
dva new dva-app
其后进入工程文件并启动工程。

cd dva-app
npm start
Dva工程.png
(Yay!…为什么是一个小丑啊눈_눈,这让有恐怖片小丑恐惧症的人情何以堪)

Dva工程的目录结构如下:

Dva目录结构.png
可以看出,比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中的组件
画的不对不要怪我.png
八. 实践出真知
理论不如实践,那么,我们用Dva搞一个前两篇中的例子试一试,路由切换并且做个表格。(其实具体各个函数的写法跟前两篇中基本一样,只是写的位置不一样。下面详解。)

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

// 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’);

先不管Model,Router告诉我们引用了router.js,打开看一眼。

import IndexPage from ‘./routes/IndexPage’;
……





只有一个,通俗易懂,在路径为/的时候匹配到IndexPage。(不用我们自己装Router自己建立router.js自己配置了是不是很方便~)注意这里加了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: 新增组件
下一步我们需要新建一些组件:

新建一些组件.png
我们在routes里面新建aaa.js和bbb.js两个组件。内容随便写点啥,反正只是为了切换用。

// aaa.js
import React, { Component } from ‘react’
import { connect } from ‘dva’

class AAA extends Component { //BBB同理
render() {
return (


AAA



)
}
}

AAA.propsTypes = {}
export default connect()(AAA)
Step3: 定义导航栏
然后,在components里建立两个公共组件header.js和layout.js。
header.js用作页面上方的导航栏,理想效果如下,通过点击不同导航切换地址栏url。

header.png
header.js需要引入antd的Menu模块,以及dva封装好的Link。Link的作用即匹配相应的路径,在爬坑之路二里我们也用到过。

// header.js
……
import { Menu } from ‘antd’;
import { Link } from ‘dva/router’

class Header extends Component {
render() {
return (
theme=“dark”
mode=“horizontal”
defaultSelectedKeys={[‘1’]}
style={{ lineHeight: ‘64px’ }}
>

Index


AAA


BBB


)
}
}
……
Step4: 定义布局
layout.js用来当整体页面布局,我们想把页面分成两部分,上面放导航条下面放子内容。头部需要引入刚刚的header组件,然后以

的方式插入到节点中。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 (



{children}


)
}
}

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 }) {
return (









);
}

export default RouterConfig;
看到return中的子节点了没有,这些就是会放到layout.js的props.children中的内容。

以上操作的流程是,在header.js中,我们通过点击不同导航栏,更换地址栏的url;接下来在router.js中,通过匹配地址栏的url,选择加载的子组件呈现到页面上。
最终的效果应如下所示:

点击AAA.png
点击BBB.png
路由到此结束,接下来加上列表。

列表操作:
Step1:创建routes页面组件
在routes/IndexPage.js页面组件里,我们把爬坑之路二的那个列表拿过来。
列表.png


修改数据




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() {
    const { columns, data } = this.props.indexpage; //获取indexpage中的state
    console.log(this.props);
    return (
        
) }

}

export default connect(({ indexpage }) => ({
indexpage,
}))(IndexPage);

注意最后的写法,这样,models/indexpage.js的state数据就被绑定到routes/IndexPage.js的table节点上啦,列表被赋予了两行值。

Step4:创建services获取数据
假设我们有个json数据是这样的,放在8080端口,我们想把它当做一行添加到上面的列表里。

json数据.png
在services中我们同后台进行交互,新建services/user.js文件。

//services/user.js
import request from ‘…/utils/request’;

export function getUser() {
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({
      type: 'indexpage/addUser',
      payload: {},
    });
};

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

effects: {
*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里,然后调用了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) };
},
},
点击一下按钮,是不是已经添加成功了~ 还记得在爬坑之路二种,我们需要手动去创建监听重新渲染页面才能看到更新效果,而在Dva中,由于使用了connect,会在内部自动更新,并不用手动刷新了呢。

最终的成果如下所示:

最终效果.png
这样,就完成了一个简单的页面切换和修改state的例子。

九. 总结
现在应该可以去看工作培训时小哥给的Dva工程了嗷,应该不至于一行都看不懂了。。。用三篇整理了一下React和Dva的基本知识及操作,现在觉得Dva还是挺方便的,um…虽然我好像还是更喜欢vue (´・ω・`)?
顺便Vue马上要出3.0了!为尤雨溪大大打call!
之前看了看springboot吓得我回来继续研究react,还是前端大陆好,反正全栈是不可能全栈的,这辈子都不可能全栈。

作者:saint37
链接:https://www.jianshu.com/p/513c5eab17c1
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

你可能感兴趣的:(java,前端,react.js)