-
dva
2020-04-23 22:51:14dva的用法术 1.安装 npm install -g dva-cli dva -v查看版本号 2.创建项目 dva new app 3.启动项目 cd app //启动项目 npm start 一。定义路由 方法1 在router.js里面添加 import React from 'react'...dva的用法术
1.安装
npm install -g dva-cli
dva -v查看版本号
2.创建项目
dva new app
3.启动项目
cd app //启动项目 npm start
一。定义路由
方法1
在router.js里面添加 import React from 'react'; import { Router, Route, Switch } from 'dva/router'; import Home from './page/home/home'; import Car from "./page/car/car" function RouterConfig({ history }) { return ( <Router history={history}> <Switch> ++<Route path="/" exact component={Home} /> ++<Route path="/car" exact component={Car} /> </Switch> </Router> ); } export default RouterConfig;
方法二
app.router(require('./router').default);
二,定义状态
1.在modol层定义index.js文件 export default { namespace:"indextext", state:{ name:"张三" } }
.在入口index.js文件中写入 import dva from 'dva'; // 引入css // 1. Initialize const app = dva(); // 2. 加载插件用的 // app.use({}); // 3. 接收自己发过来的action请求用的 ++app.model(require('./models/indextext').default); // 4. Router app.router(require('./router').default); // 5. Start app.start('#root');
3.在home组件中加引用
import {connect} from "dva" @connect((state,home)=>({ state, home }) )
const mapStateToProps = state => { console.log(state) return { name: "weiwei", mage:"我喜欢你" } } export default connect(mapStateToProps)(home) ;
三dva的属性 1.namespace 数据状态的名字 2.reducers 数据的静态方法 3.effects 数据请求的异步方法 里面有两个方法为put和call 4.subscriptions 数据监听的方法
1.新建一个home文件夹在home文件夹里新建一个module文件夹和index.js在module里新建一个index.js代码如下 export default { namespace:"homeData", state:{ name:"张三" }, reducers:{ setName(state,old){ console.log(state) return state } }, subscriptions:{ Haha({dispatch,history}){ // console.log(99999) history.listen((pasName)=>{ if(pasName==="/#/"){ console.log(55555555) } }) } } }; 然后home里的index文件代码如下 import React, { Component } from 'react'; import {connect} from "dva"; @connect((state,Home)=>({ state, Home })) class Home extends Component { render() { return ( <div> <button onClick={ ()=>{ this.props.dispatch({ type:"homeData/setName", }) } }>点击</button> </div> ); } } export default Home ; 最后需要在src文件夹里面index.js加入 import dva from 'dva'; // 1. Initialize const app = dva(); // 2. Plugins // app.use({}); // 3. Model +++app.model(require('./page/home/mod/index').default); // 4. Router app.router(require('./router').default); // 5. Start app.start('#root'); dva的解绍 dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架
官网
https://dvajs.com/guide/
-
Dva
2020-06-06 17:56:05使用:安装 dva-cli npm install dva-cli -g 全局安装 dva new 项目名 ,创建 npm start 目录简介: mock:模拟数据, service:请求 routers:根pages,定义一些路由中使用的组件,对应起来。 router.js:...定义:集成了react-router,fetch,readux,redux-saga等,轻量级框架。作用:简化开发体验,相对于saga
使用:安装 dva-cli
npm install dva-cli -g 全局安装 dva new 项目名 ,创建 npm start
目录简介:
mock:模拟数据,
service:请求
routers:根pages,定义一些路由中使用的组件,对应起来。
router.js:路由,其中像
import { Router, Route, Switch } from 'dva/router'; 等还有Link,withRouter export default withRouter(Child);//注入路由,
index.js:入口
import dva from 'dva'; // import createHistory from 'history/'; import {createBrowserHistory as createHistory} from 'history' import './index.css'; // 1. Initialize // const app = dva(); //由history改为browserHistory(特点,无#,和浏览器API类似,react官方推荐), const app = dva({ history: createHistory(), }); // 2. Plugins // app.use({}); // 3. Model // app.model(require('./models/example').default); // 4. Router app.router(require('./router').default); // 5. Start app.start('#root');
model
- 简介:模型,dva通过model,更新state(reducer,同步),异步effect,订阅subscriptions
- 定义一个,新建model
model下 export default { namespace:'test',//命名空间,唯一,全局state的key state:{//初始值 name:'cy' } } index.js // 3. Model // app.model(require('./models/example').default); app.model(require('./models/test').default);//载入,使用 页面:转为props的属性, import {connect} from 'dva' componentDidMount() { console.log(this.props) } const mapStateToProps = state =>{ console.log(state) return{ name:state.test.name//从命名空间拿到 } } export default connect(mapStateToProps)(UserPage);
- reducer:等同redux的reducer,接收action,更新state(同步)
model reducers: { setName(state,payload){ console.log(state,payload)//payload,就是 dispatch传入的那个对象{type:'',name:'zq'} let _state=JSON.parse(JSON.stringify(state));//多一步,是因为react中state不允许直接修改,新建个常量 _state.name=payload.name; return _state//必须返回奥,不然看报错 } } 页面:通过this.props.上的dispatch方法 handlerSetName =()=>{ this.props.dispatch({ type:'test/setName', name:'zq' }) }
- effect
effects:{ *setNameAsync(payload,{put,call}){ yield put({ type:'setName', name:payload.name }) } } 页面 handlerSetNameAsync =()=>{ this.props.dispatch({ type:'test/setNameAsync', name:'bb' }) }
call
state:{ name:'cy', topPicList:[]//初始化,接收数据 }, reducers: { getTopicListR(state,payload) {拿到数据更新到state let _state=JSON.parse(JSON.stringify(state));//多一步,是因为react中state不允许直接修改 _state.topPicList=payload.topPicList; return _state; } }, effects:{ *getTopicList(payload,{put,call}){ let res=yield call(cNodeTopic);//拿到数据,放到state上,state更新用的reducer console.log(res) if(res.data){//啥时候拿到,去用put yield put({//一个action type:'getTopicListR',//reducer topPicList:res.data }) } } } 页面 getTopicList=()=>{ this.props.dispatch({ type:'test/getTopicList', params }) } const mapStateToProps = state =>{ console.log(state) return{ name:state.test.name, topPicList:state.test.topPicList//这里可以转换为props } } 异步,一般用if,啥时候有数据,后做某事。
-
subscriptions:订阅数据源:如路由,当前时间,websocket,keyboard等
- dva-loading:https://www.jianshu.com/p/61fe7a57fad4
-
DVA
2018-07-19 08:48:29DVA 通过dva-cli脚手架搭建一个dva项目,具体做法参考dva github dva-cli相关内容。 ignore *.iml 文件,此为是intellij idea的工程配置文件,不需要push到git中,被git管理 + ...DVA
- 通过dva-cli脚手架搭建一个dva项目,具体做法参考dva github dva-cli相关内容。
- ignore *.iml 文件,此为是intellij idea的工程配置文件,不需要push到git中,被git管理
- 搭建router,url 和 页面的对应关系
- 搭建layout,所有的页面都是基于layout 页面,包括左边框,下面的footer等。
- HMR(Hot Module Replacement)模块热替换, webpack 提供的功能
"env": {
"development": {
"extraBabelPlugins": [
"dva-hmr" ]}}
-
dva Lightweight front-end framework based on redux, redux-saga and react-router. (Inspired by elm and choo) Features Easy to learn, easy to use: only 6 apis, very friendly to redux users, ...
-
创建Dva项目的方法(dva-cli,umi)
2019-08-04 22:19:58一共有俩种方式创建DvaJS项目,一种是通过dva-cli创建,另一种是通过umi。 通过dva-cli创建项目 先安装dva-cli。 $ npm install dva-cli -g 然后创建项目 $ dva new myapp 最后,进入目录并启动 $ cd myapp $ npm ... -
剖析Dva原理: 手写Dva
2020-09-24 11:28:10关于Dva: dva 是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架,或者可以理解为react框架插件处理的全家桶. ... -
Dva教程
2020-05-07 04:59:08Dva教程 2019千锋DvaJS视频精讲,全网首发!【Web前端】 千锋Web前端教程:01_dva_初始化 (01_dva_初始化&) 01_dva_初始化& 暴露request对象发送请求 其他地方调用query 千锋Web前端教程:02_dva... -
dva上手
2019-07-16 16:03:00安装dva-cli用户初始化项目 npm install -g dva-cli # 或 yarn global add dva-cli dva -v dva-cli version 0.9.1 创建新应用 安装完dva-cli之后,可以在命令行里访问到dva命令。现在,可以通过dva new ... -
Dva学习笔记
2020-02-13 11:35:29Dva学习笔记 本文是基于Windows 10系统环境,学习和使用Dva: Windows 10 一、dva状态管理state (1) 定义一个model文件 zufang.js // zufang.js export default { // 命名空间,全局唯一 namespace: '... -
dva入门
2020-11-10 12:56:02一、dva 介绍 dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个轻量级的应用框架。dva = React-Router + Redux + Redux... -
dva处理_dva.js初探
2021-01-04 12:21:53dva是一个在redux和redux-saga的基础上封装的一个轻型框架,能辅助更好的组织代码进行开发。同时提供了react-router和fetch,基本上具备了开发web前端应用所需的主要工具,省下开发者自己进行配置安装的工作。开始...
收藏数
3,460
精华内容
1,384
-
量化高频交易系统tick数据采集
-
计算机网络基础
-
常用类库之Java.text.SimpleDateFormat
-
[Java]-会话技术与cookie
-
ConcurrentHashMap底层原理
-
CPU缓存行学习笔记
-
【2021】Python3+Selenium3自动化测试(不含框架)
-
单元测试UnitTest+Pytest【Selenium3】
-
CMVS-PMVS-master
-
Qt and Qt Charts
-
单片机完全学习课程全五季套餐
-
最长上升子序列 I(LIS)
-
FolderMove
-
Hibernate延迟加载机制.zip
-
转行做IT-第7章 数组
-
废物利用系列 之 塑料瓶改装机器猫
-
从零开始学习jQuery教程_c#.net版.zip
-
Linux与数据库基础
-
系统架构设计师软考复盘
-
美国犯罪数据可用于研究犯罪