前言

技術(shù)資料

react + dva + redux + react-router + redux-sage + antd + antd動(dòng)畫(huà)

總的來(lái)說(shuō)dva是一個(gè)很簡(jiǎn)單的項(xiàng)目 一步步跟大家來(lái)說(shuō)一下把

效果圖

?

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

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

文件名稱是:.roadhogrc

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

?

初始化dva

初始化部分 非常簡(jiǎn)單 首先一個(gè)個(gè)來(lái)說(shuō)明一下

1.const app = dva()

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

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

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

還有history這個(gè)參數(shù)是從react-router中來(lái)的

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

2.app.use

這個(gè)是用來(lái)加載插件的 因?yàn)槲疫@個(gè)項(xiàng)目沒(méi)用到什么其他的redux第三方中間件 所以這邊直接忽略

?

3.app.model

這個(gè)是用來(lái)接收你發(fā)送的action的

相關(guān)鏈接:model

4.app.router

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

這里有兩種寫(xiě)法

寫(xiě)法1：

寫(xiě)法2:

下面這種是按需加載的 所有 性能會(huì)比上面的那種 要高很多 尤其是你的頁(yè)面比較重的時(shí)候

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

UI代碼

?

這個(gè)是我的一個(gè)完全簡(jiǎn)化版 不含里面的內(nèi)容 因?yàn)閁I部分 我想搞前端的人 應(yīng)該都會(huì) 所以就來(lái)講點(diǎn)跟dva有關(guān)系的

我想 如果沒(méi)有接觸過(guò)這種寫(xiě)法的人 肯定會(huì)感覺(jué)很納悶吧 這是啥招 不知道在干嗎啊 來(lái)看看 說(shuō)明

首先說(shuō)一下 這個(gè)寫(xiě)法的優(yōu)點(diǎn)跟缺點(diǎn)

優(yōu)點(diǎn)：

因?yàn)檫@樣寫(xiě)的話 就是一個(gè)function 所以react在判斷的時(shí)候 會(huì)直接省略生命周期的部分 從而 可以大大的加快加載速度

缺點(diǎn)：

缺點(diǎn)就是 你無(wú)法使用this,也沒(méi)有辦法使用生命周期?

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

connect

這個(gè)其實(shí)很好理解

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

如果你只想接管一個(gè)app的model的話

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

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

至于另外的form.create部分 因?yàn)檫@里使用到了一個(gè)antd的表單組件

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

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

?

登錄

因?yàn)槲覀兪且粋€(gè)表單登錄頁(yè)面 所以 當(dāng)我們點(diǎn)擊登錄的時(shí)候 需要發(fā)送一條dispatch給model那邊 然后通過(guò)他來(lái)實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)

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

因?yàn)槭褂昧薬ntd的關(guān)系 所以表單部分 可以說(shuō)是被無(wú)限的弱化了 你現(xiàn)在 不需要關(guān)心任何事情 他都會(huì)幫你搞定 具體相關(guān)的api 可以看上面發(fā)的那個(gè)鏈接

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

這里其實(shí) 很簡(jiǎn)單 因?yàn)閍ntd已經(jīng)幫我們做了處理 我們可以在他們提供的表單組件中 進(jìn)行相關(guān)的配置 而所有的數(shù)據(jù) 他都會(huì)通過(guò)這個(gè)來(lái)直接返回過(guò)來(lái)

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

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

model部分

?

首先 一般介紹的文章都會(huì)寫(xiě)的很詳細(xì) 但是對(duì)于新手來(lái)說(shuō) 有可能會(huì)無(wú)從下手?

所以 我們?cè)诮佑|到我們不熟悉的東西的時(shí)候 最好能用自己習(xí)慣的一種語(yǔ)言去解釋他 這樣也方便學(xué)習(xí) 按功能 我們依次下來(lái)

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

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

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

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

還記得 我們剛才發(fā)送數(shù)據(jù)的那個(gè)命令嗎 我們?cè)趤?lái)看一下

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

?

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

在這里 又遇見(jiàn)了幾個(gè)新的單詞 put call

其實(shí) 不止這幾個(gè)?

一般常用的有put call select take?

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

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

簡(jiǎn)單來(lái)說(shuō)一下 這幾個(gè)函數(shù)的大概內(nèi)容

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

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

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

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

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

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

對(duì)于路由跳轉(zhuǎn)的部分 我們使用這樣來(lái)實(shí)現(xiàn)

當(dāng)我們執(zhí)行這個(gè)命令的時(shí)候 因?yàn)槲覀兊膔outer已經(jīng)相互綁定起來(lái)了 所以他會(huì)自動(dòng)調(diào)用router中的數(shù)據(jù)來(lái)進(jìn)行展示

?

ok 總體就這么多吧 是不是感覺(jué)很簡(jiǎn)單

我自己個(gè)人覺(jué)得 毫無(wú)難點(diǎn) 入門(mén)簡(jiǎn)直 不要太方便

我相信 只要仔細(xì)看完我所有寫(xiě)的 dva的所有功能都將可以掌握

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

總結(jié)

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

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