UMI.js開發知識總結

時間 2019-11-12

原文原文鏈接

五分鐘掌握最小知識體系

本文閱讀時間大概爲5分鐘，可是能讓你瞭解基於UMI和DVA構建項目的最小知識體系，你能夠粗略的瀏覽一下本文所提到的知識，在後續的講解中都會屢次重複提起，保證學習效率。
因爲如今前端工程化的流行，因此在學習一個新的框架時，可能會面臨一些疑惑。css

好比拿react舉例：html

es6特性好多啊(es5我都還沒學完呢) component有三種寫法(茴字的四種寫法瞭解一下) webpack是什麼(前端構建工具，而後呢，webpack是什麼？) 什麼同步異步數據流(我callback都理不清楚) ...前端

ECMAScript 6

變量聲明react

const用於聲明常量，let用於聲明變量，他們都是塊級做用域。webpack

1 2	`const a = 1;` `let b = 1;`

模板字符串es6

用於拼接字符串web

 
        let a =  
        "hello" 
        ; 
       
        let b =  
        "world" 
        ; 
       
        console.log( 
        "print:" 
        +a+b); 
       
        let c = `print:${a}${b}` 
       
        // 注意這個不是引號，鍵盤esc下面那個按鍵

默認參數sql

 
        function 
        test(a= 
        "world" 
        ){ 
       
        console.log(`print:hello,${a}`); 
       
        } 
       
        test()//print:hello,world

箭頭函數前端工程化

函數的簡化寫法數組

 
        function 
        test(a= 
        "world" 
        ){ 
       
        console.log(`print:hello,${a}`); 
       
        } 
       
        const test = (a= 
        "world" 
        )=>{console.log(`print:hello,${a}`);}

塊的導入和導出

 
        //從antd中導入按鈕 
       
        import { Button }  
        from 
        'antd' 
        ; 
       
        //導出一個方法，這樣就能使用import導入使用了 
       
        const test = (a= 
        "world" 
        )=>{console.log(`print:hello,${a}`);} 
       
        export  
        default 
        test

析構賦值

 
        const obj = {  
        key 
        : 
        'umi' 
        ,author: 
        'sorrycc' 
        }; 
       
        console.log(obj. 
        key 
        ); 
       
        // 這裏至關於把 
        key 
        取出來了。 
       
        // const  
        key 
        = obj. 
        key 
        ; 
       
        const {  
        key 
        } = obj; 
       
        console.log( 
        key 
        ); 
       
        //反向使用也能夠 
       
        const obj2 = {  
        key 
        }; 
       
        //數組裏面也能夠這麼用 
       
        const arr = [1,2]; 
       
        const [foo,bar]=arr; 
       
        console.log(foo);//1

展開運算符

用於數組組裝

1 2	`const arr = [` `'umi'` `];` `const texts = [...arr,` `'dva'` `];`

用於取出數組部分屬性

 
        const arr = [ 
        'umi' 
        , 
        'dva' 
        , 
        'antd' 
        ]; 
       
 
        const [umi,...other]=arr; 
       
 
        //前面已經提過析構賦值 因此第一項會賦值給umi，剩下的會被組合成一個other數組 
       
 
        console.log(umi);//umi 
       
 
        console.log(other);// (2)[ 
        'dva' 
        , 
        'antd' 
        ]; 
       

用於組合新的對象，注意key相同，會被覆蓋。

 
        const obj = {a:1,b:2}; 
       
        const obj2 = {b:3,c:4}; 
       
        const obj3 = {...obj,...obj2} 
       
        //{a:1,b:3,c:4}

JSX

組件嵌套

相似html

1	`<header><footer> </footer></header></app>`

className

class 是保留詞，因此添加樣式時，需用 className 代替 class 。

Hello Umi

JavaScript 表達式

JavaScript 表達式須要用 {} 括起來，會執行並返回結果。
好比：

{ this.props.title }

註釋

儘可能別用 // 作單行註釋。

{/* multiline comment /} {/ multi line comment */} { // single line } Hello

理解 CSS Modules

其實你能夠沒必要理解CSS Modules，只要知道button class 在構建以後會被重命名爲 ProductList_button_1FU0u 。button 是 local name，而 ProductList_button_1FU0u 是 global name 。你能夠用簡短的描述性名字，而不須要關心命名衝突問題。
你要作的所有事情就是在樣式文件裏寫 .button {...}，並在組件裏經過 styles.button 來引用他。

Dva

(model中)

Reducer

reducer 是一個函數，接受 state 和 action，返回老的或新的 state 。即：(state, action) => state。能夠理解爲更新數據刷新頁面，你能夠不須要知道什麼reducer的增刪改，像下面這樣寫一個通用方法。

 
        reducers:{ 
       
        save(state, {payload}) { 
       
        return 
        { ...state,...payload} 
       
        }, 
       
        },

Effect

這個能夠理解爲一個接收事件的中間件，你在這裏接受頁面拋過來的事件，而後處理，好比請求服務器數據，而後，再拋個事件到Reducer，更新頁面。
示例：

 
        state:{ 
       
        assets:{}, 
       
        }, 
       
        *changeAssets({ payload }, { call, put,  
        select 
        }) { 
       
        const data = yield call(doSomethingFunc, parameter); 
       
        yield put({ type:  
        'save' 
        , payload: { assets:data } }); 
       
        },

1	`const data =yield call(doSomethingFunc, parameter);`

call方法用於調用邏輯，能夠理解爲等待這個函數執行的結果，把值賦給data，項目中經常使用於，返送http請求，等待服務端響應數據。

1	`const data = yield` `select` `(state => state.namespace);`

select方法用於查找當前state的狀態，好比此刻data = {assets:{}}

1	`yield put({ type:` `'fetch'` `, payload: { page } });`

put方法用於觸發事件，能夠是Reducer也能夠是Effects。

Subscription

subscriptions 是訂閱，用於訂閱一個數據源，而後根據須要 dispatch 相應的 action。數據源能夠是當前的時間、服務器的 websocket 鏈接、keyboard 輸入、geolocation 變化、history 路由變化等等。格式爲 ({ dispatch, history }) => unsubscribe 。
項目中經常使用於頁面初始化數據的自動請求，如：

 
        setup({ dispatch, history }) { 
       
        return 
        history.listen(({ pathname, query }) => { 
       
        if (pathname ===  
        '/home' 
        ) { 
       
        // 進入首頁了，自動作一些什麼事情，好比發起一個Effects 
       
        dispatch({ 
       
        type:  
        'query' 
       
        }) 
       
        } 
       
        }); 
       
        }

(model,page和其餘)

dispatch

和Effects中的put方法等同，用於不在Effects中要發起事件的狀況下，好比從頁面點擊按鈕發起請求。(page中)

connect

經過connect綁定數據,好比：

 
        import {  
        connect 
        }  
        from 
        'dva' 
        ; 
       
        import styles  
        from 
        './page.less' 
        ; 
       
        function 
        App({home,dispatch}) { 
       
        const { assets } = home; 
       
        return 
        (