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