前言

技術(shù)資料

react + dva + redux + react-router + redux-sage + antd + antd動畫

總的來說dva是一個很簡單的項目 一步步跟大家來說一下把

效果圖

?

初始化環(huán)境配置

因為項目中使用了antd的關(guān)系 所以 這邊需要做一下設(shè)置 才可以正常使用

文件名稱是:.roadhogrc

目錄結(jié)構(gòu)

?

初始化dva

初始化部分 非常簡單 首先一個個來說明一下

1.const app = dva()

這部分是用來做dva初始化的部分 先給大家看一下完整的接口

在這里 你可以設(shè)置全局state 全部error 還有包括router的事件 state的事件 等等?

都可以直接統(tǒng)一的在這邊進行設(shè)置與管理

還有history這個參數(shù)是從react-router中來的

相關(guān)地址:react-router?dva初始化

2.app.use

這個是用來加載插件的 因為我這個項目沒用到什么其他的redux第三方中間件 所以這邊直接忽略

?

3.app.model

這個是用來接收你發(fā)送的action的

相關(guān)鏈接:model

4.app.router

在這里面 進行你所有頁面的初始化路由設(shè)置

這里有兩種寫法

寫法1：

寫法2:

下面這種是按需加載的 所有 性能會比上面的那種 要高很多 尤其是你的頁面比較重的時候

ok初始化部分全部講完了 現(xiàn)在來看看ui部分

UI代碼

?

這個是我的一個完全簡化版 不含里面的內(nèi)容 因為UI部分 我想搞前端的人 應(yīng)該都會 所以就來講點跟dva有關(guān)系的

我想 如果沒有接觸過這種寫法的人 肯定會感覺很納悶吧 這是啥招 不知道在干嗎啊 來看看 說明

首先說一下 這個寫法的優(yōu)點跟缺點

優(yōu)點：

因為這樣寫的話 就是一個function 所以react在判斷的時候 會直接省略生命周期的部分 從而 可以大大的加快加載速度

缺點：

缺點就是 你無法使用this,也沒有辦法使用生命周期?

所以 如果你的頁面 必須要使用生命周期的話 還是用class吧?

connect

這個其實很好理解

如果說你的ui里面需要用到model里面的數(shù)據(jù)的話 那么就可以直接用這個 將model里面的元素 當(dāng)做props的方式 傳遞進來

如果你只想接管一個app的model的話

connect(({app}) => ({app})

如果你想接管多個 直接在app后面添加即可

至于另外的form.create部分 因為這里使用到了一個antd的表單組件

所以需要用form.create的方式 將里面的內(nèi)容以props的方式 傳遞進去

相關(guān)文章:antd表單組件

?

登錄

因為我們是一個表單登錄頁面 所以 當(dāng)我們點擊登錄的時候 需要發(fā)送一條dispatch給model那邊 然后通過他來實現(xiàn)頁面的跳轉(zhuǎn)

先來看看如何發(fā)送數(shù)據(jù)

因為使用了antd的關(guān)系 所以表單部分 可以說是被無限的弱化了 你現(xiàn)在 不需要關(guān)心任何事情 他都會幫你搞定 具體相關(guān)的api 可以看上面發(fā)的那個鏈接

來看看消息發(fā)送的部分

這里其實 很簡單 因為antd已經(jīng)幫我們做了處理 我們可以在他們提供的表單組件中 進行相關(guān)的配置 而所有的數(shù)據(jù) 他都會通過這個來直接返回過來

所以我們只需要在這邊進行一下判斷即可 如果產(chǎn)生了錯誤就直接返回?

否則執(zhí)行dispatch 發(fā)送一條action給對應(yīng)的model那邊 然后在那邊做出相應(yīng)的判斷

model部分

?

首先 一般介紹的文章都會寫的很詳細 但是對于新手來說 有可能會無從下手?

所以 我們在接觸到我們不熟悉的東西的時候 最好能用自己習(xí)慣的一種語言去解釋他 這樣也方便學(xué)習(xí) 按功能 我們依次下來

reducers 處理數(shù)據(jù)

effects ? 接收數(shù)據(jù)

subscriptions 監(jiān)聽數(shù)據(jù)

通過這樣的解釋是不是稍微能對其有個大概的了解 每個都是按照功能分類的 所以 盡量 不要在不歸他管的地方 做其他的事情

還記得 我們剛才發(fā)送數(shù)據(jù)的那個命令嗎 我們在來看一下

dispatch 是根據(jù)你里面設(shè)置的type內(nèi)容 然后轉(zhuǎn)發(fā)到指定的model的 所以你這邊 要設(shè)置正確以后 在model那邊才能接收到你發(fā)送的這條action

?

login就是我們處理接收消息的地方

在這里 又遇見了幾個新的單詞 put call

其實 不止這幾個?

一般常用的有put call select take?

當(dāng)然 在這個上面 還有一些基于這些函數(shù) 封裝的高階函數(shù)

相關(guān)文章:github.com/dvajs/dva/blob/master/test/effects-test.js

簡單來說一下 這幾個函數(shù)的大概內(nèi)容

put ?用來發(fā)起一條action

call 以異步的方式調(diào)用函數(shù)

select 從state中獲取相關(guān)的數(shù)據(jù)

take 獲取發(fā)送的數(shù)據(jù)

當(dāng)我們使用put發(fā)送一條action的時候 與之對于的reducers就會接收到這個消息 然后在里面返回state等數(shù)據(jù)

這里有一點 reducers中盡量只做state的數(shù)據(jù)返回 而不要在這里寫相關(guān)的邏輯

對于路由跳轉(zhuǎn)的部分 我們使用這樣來實現(xiàn)

當(dāng)我們執(zhí)行這個命令的時候 因為我們的router已經(jīng)相互綁定起來了 所以他會自動調(diào)用router中的數(shù)據(jù)來進行展示

?

ok 總體就這么多吧 是不是感覺很簡單

我自己個人覺得 毫無難點 入門簡直 不要太方便

我相信 只要仔細看完我所有寫的 dva的所有功能都將可以掌握

轉(zhuǎn)載于:https://www.cnblogs.com/zhangbob/p/7421527.html

總結(jié)

以上是生活随笔為你收集整理的React+dva+antd的运用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。