在上周,自己在教程的帮助下,进行了一个小小的dva项目页面制作,现进行整理。
一、什么是dva
dva是基于react而生成的一个轻巧的小型框架,它将react及redux中比较复杂的操作进行了合理的封装,提供6个api供使用。因此,在学习dva之前,要对es6及react,redux有一定的了解。
二、前提知识
ES6
- let与const声明变量,在es6中,不再使用var.
- 模板语法。字符串的合并方式由以前的
+
号,变为`${parameter}string
` 的形式. - 默认参数。
function logActivity(activity = 'skiing') {
console.log(activity);
}
logActivity(); // skiing
- 箭头函数。
(parame)=>{console.log('...')}
展开运算符(…something),常用于展开数组或对象。
展开数组。
let arr1=[1,2,3]; let arr2=[...arr1,4,5] //[1,2,3,4,5]
展开对象。
let obj1={ a:1, b:2 }; let obj2={ ...obj1, c:3 } //a:1,b:2,c:3
用于解析结构。常常在react中组合组件时使用。
//常用于react const props={ size:1, url:somewhere, mode:something } const {size,...others}=props; <button {...others} size={size}/>
展开运算符还用在函数的参数中,来表示函数的不定参。只有放在最后才能作为函数的不定参,否则会报错。
模块的import和export
- 数组及对象的析构赋值
- promise函数及Generqtors
React
- 组件生成,有React.createClass,extent语法及 State Function Component.
JSX语法。
- component 嵌套。类似html,组件之间也可以相互嵌套。
- className。由于class为js的关键字,所以为jsx元素添加class属性时使用className代替class.
- js表达式。在jsx中,js表达式要写在
{ }
内。 - spread Attributes.从es6中借鉴的语法。
const props={ name:aa, url:/location/ }; <a {...props}></a> //等同于<a name={props.name} url={props.url}>
Props,这是dva中比较重要的一个概念,在项目中,组件之间数据的传递大都是使用props来实现。
- css modules
认识dva
dva中的数据流向
首先,上一张图。
接下来是我项目的目录结构。
Tables | Are |
---|---|
在我们输入url时,我们首先通过路由里面设置的路径,正确进入到不同的页面。
我们来到的每个容器组件,它是组成整个应用的基本部分,相当于一个网站的一个页面。
每个容器组件中,会包含多个展示组件,这是构成容器组件的基本单位。比如我们项目中的list.js、filter.js、modal.js。他们分别代表构成整个页面的搜索框,列表和弹出层。
models是应用的核心部分,因为我们将在model中定义组件,包括namespace,state,subsciption,effect,reduser等,而页面的方法,都会在后三者之中定义。**
Service是数据与后台进行交互的窗口,我们所有异步请求的数据,都要通过它来获取。
Effect
- call用于调用异步逻辑。
- put,用于触发action.
- select,用于从state中获取数据。
Subscription
subscriptions 是订阅,用于订阅一个数据源,然后根据需要 dispatch 相应的 action。数据源可以是当前的时间、服务器的 websocket 连接、keyboard 输入、geolocation 变化、history 路由变化等等。格式为 ({ dispatch, history }) => unsubscribe
Reducer
reducer 是一个函数,接受 state 和 action,返回老的或新的 state 。即:(state, action) => state