dva项目初探

在上周，自己在教程的帮助下，进行了一个小小的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）,常用于展开数组或对象。

  1. 展开数组。

     let arr1=[1,2,3];
     let arr2=[...arr1,4,5]    //[1,2,3,4,5]

  2. 展开对象。

     let obj1={
     a:1,
     b:2
     };
     let obj2={
     ...obj1,
     c:3
     }    //a:1，b:2,c:3

  3. 用于解析结构。常常在react中组合组件时使用。

         //常用于react
         const props={
         size:1,
         url:somewhere,
         mode:something
         }
         const {size,...others}=props;
         <button {...others} size={size}/>

  4. 展开运算符还用在函数的参数中，来表示函数的不定参。只有放在最后才能作为函数的不定参，否则会报错。

• 模块的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

1. 在我们输入url时，我们首先通过路由里面设置的路径，正确进入到不同的页面。

2. 我们来到的每个容器组件，它是组成整个应用的基本部分，相当于一个网站的一个页面。

3. 每个容器组件中，会包含多个展示组件，这是构成容器组件的基本单位。比如我们项目中的list.js、filter.js、modal.js。他们分别代表构成整个页面的搜索框，列表和弹出层。

4. models是应用的核心部分，因为我们将在model中定义组件，包括namespace,state,subsciption,effect,reduser等，而页面的方法，都会在后三者之中定义。**

5. 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

Router