前言

技術資料

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

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

效果圖

?

初始化環境配置

因為項目中使用了antd的關系 所以 這邊需要做一下設置 才可以正常使用

文件名稱是:.roadhogrc

目錄結構

?

初始化dva

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

1.const app = dva()

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

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

都可以直接統一的在這邊進行設置與管理

還有history這個參數是從react-router中來的

相關地址:react-router?dva初始化

2.app.use

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

?

3.app.model

這個是用來接收你發送的action的

相關鏈接:model

4.app.router

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

這里有兩種寫法

寫法1：

寫法2:

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

ok初始化部分全部講完了 現在來看看ui部分

UI代碼

?

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

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

首先說一下 這個寫法的優點跟缺點

優點：

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

缺點：

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

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

connect

這個其實很好理解

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

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

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

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

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

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

相關文章:antd表單組件

?

登錄

因為我們是一個表單登錄頁面 所以 當我們點擊登錄的時候 需要發送一條dispatch給model那邊 然后通過他來實現頁面的跳轉

先來看看如何發送數據

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

來看看消息發送的部分

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

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

否則執行dispatch 發送一條action給對應的model那邊 然后在那邊做出相應的判斷

model部分

?

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

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

reducers 處理數據

effects ? 接收數據

subscriptions 監聽數據

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

還記得 我們剛才發送數據的那個命令嗎 我們在來看一下

dispatch 是根據你里面設置的type內容 然后轉發到指定的model的 所以你這邊 要設置正確以后 在model那邊才能接收到你發送的這條action

?

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

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

其實 不止這幾個?

一般常用的有put call select take?

當然 在這個上面 還有一些基于這些函數 封裝的高階函數

相關文章:github.com/dvajs/dva/blob/master/test/effects-test.js

簡單來說一下 這幾個函數的大概內容

put ?用來發起一條action

call 以異步的方式調用函數

select 從state中獲取相關的數據

take 獲取發送的數據

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

這里有一點 reducers中盡量只做state的數據返回 而不要在這里寫相關的邏輯

對于路由跳轉的部分 我們使用這樣來實現

當我們執行這個命令的時候 因為我們的router已經相互綁定起來了 所以他會自動調用router中的數據來進行展示

?

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

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

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

轉載于:https://www.cnblogs.com/zhangbob/p/7421527.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。