前言
如果文章中有錯誤的地方的話 可以直接加我QQ：469373256
自己針對一些問題做的優(yōu)化版本 目前剛啟動 還不是很成熟
https://github.com/fangkyi03/fastkit-dva.git
麻煩大家加星鼓勵一下 謝謝
原有的項目從碼云移植到了github
新的地址:https://github.com/fangkyi03/react-demo
本人自己修改后的dva版本 增加了對網絡處理的控制
https://github.com/fangkyi03/dvajs
詳細的具體說明在github上 覺得好的麻煩加星鼓勵一下
GitHub - fangkyi03/nextjs-antd-dva-template: 最優(yōu)的nextjs antd dva 服務端解決方案
自己修改的最優(yōu)ssr nextjs 服務端渲染例子 開箱即用 解決了你可能遇到的所有問題
技術資料
react + dva + redux + react-router + redux-sage + antd + antd動畫
總的來說dva是一個很簡單的項目 一步步跟大家來說一下把
效果圖
初始化環(huán)境配置
因為項目中使用了antd的關系 所以 這邊需要做一下設置 才可以正常使用
文件名稱是:.roadhogrc
目錄結構
初始化dva
初始化部分 非常簡單 首先一個個來說明一下
1.const app = dva()
這部分是用來做dva初始化的部分 先給大家看一下完整的接口
在這里 你可以設置全局state 全部error 還有包括router的事件 state的事件 等等?
都可以直接統(tǒng)一的在這邊進行設置與管理
還有history這個參數是從react-router中來的
相關地址:react-router?dva初始化
2.app.use
這個是用來加載插件的 因為我這個項目沒用到什么其他的redux第三方中間件 所以這邊直接忽略
3.app.model
這個是用來接收你發(fā)送的action的
相關鏈接:model
4.app.router
在這里面 進行你所有頁面的初始化路由設置
這里有兩種寫法
寫法1：
寫法2:
下面這種是按需加載的 所有 性能會比上面的那種 要高很多 尤其是你的頁面比較重的時候
ok初始化部分全部講完了 現在來看看ui部分
UI代碼
這個是我的一個完全簡化版 不含里面的內容 因為UI部分 我想搞前端的人 應該都會 所以就來講點跟dva有關系的
我想 如果沒有接觸過這種寫法的人 肯定會感覺很納悶吧 這是啥招 不知道在干嗎啊 來看看 說明
首先說一下 這個寫法的優(yōu)點跟缺點
優(yōu)點：
因為這樣寫的話 就是一個function 所以react在判斷的時候 會直接省略生命周期的部分 從而 可以大大的加快加載速度
缺點：
缺點就是 你無法使用this,也沒有辦法使用生命周期?
所以 如果你的頁面 必須要使用生命周期的話 還是用class吧?
connect
這個其實很好理解
如果說你的ui里面需要用到model里面的數據的話 那么就可以直接用這個 將model里面的元素 當做props的方式 傳遞進來
如果你只想接管一個app的model的話
connect(({app}) => ({app})
如果你想接管多個 直接在app后面添加即可
至于另外的form.create部分 因為這里使用到了一個antd的表單組件
所以需要用form.create的方式 將里面的內容以props的方式 傳遞進去
相關文章:antd表單組件
登錄
因為我們是一個表單登錄頁面 所以 當我們點擊登錄的時候 需要發(fā)送一條dispatch給model那邊 然后通過他來實現頁面的跳轉
先來看看如何發(fā)送數據
因為使用了antd的關系 所以表單部分 可以說是被無限的弱化了 你現在 不需要關心任何事情 他都會幫你搞定 具體相關的api 可以看上面發(fā)的那個鏈接
來看看消息發(fā)送的部分
這里其實 很簡單 因為antd已經幫我們做了處理 我們可以在他們提供的表單組件中 進行相關的配置 而所有的數據 他都會通過這個來直接返回過來
所以我們只需要在這邊進行一下判斷即可 如果產生了錯誤就直接返回?
否則執(zhí)行dispatch 發(fā)送一條action給對應的model那邊 然后在那邊做出相應的判斷
model部分
首先 一般介紹的文章都會寫的很詳細 但是對于新手來說 有可能會無從下手?
所以 我們在接觸到我們不熟悉的東西的時候 最好能用自己習慣的一種語言去解釋他 這樣也方便學習 按功能 我們依次下來
reducers 處理數據
effects ? 接收數據
subscriptions 監(jiān)聽數據
通過這樣的解釋是不是稍微能對其有個大概的了解 每個都是按照功能分類的 所以 盡量 不要在不歸他管的地方 做其他的事情
還記得 我們剛才發(fā)送數據的那個命令嗎 我們在來看一下
dispatch 是根據你里面設置的type內容 然后轉發(fā)到指定的model的 所以你這邊 要設置正確以后 在model那邊才能接收到你發(fā)送的這條action
login就是我們處理接收消息的地方
在這里 又遇見了幾個新的單詞 put call
其實 不止這幾個?
一般常用的有put call select take?
當然 在這個上面 還有一些基于這些函數 封裝的高階函數
相關文章:github.com/dvajs/dva/blob/master/test/effects-test.js
簡單來說一下 這幾個函數的大概內容
put ?用來發(fā)起一條action
call 以異步的方式調用函數
select 從state中獲取相關的數據
take 獲取發(fā)送的數據
當我們使用put發(fā)送一條action的時候 與之對于的reducers就會接收到這個消息 然后在里面返回state等數據
這里有一點 reducers中盡量只做state的數據返回 而不要在這里寫相關的邏輯
對于路由跳轉的部分 我們使用這樣來實現
當我們執(zhí)行這個命令的時候 因為我們的router已經相互綁定起來了 所以他會自動調用router中的數據來進行展示
ok 總體就這么多吧 是不是感覺很簡單
我自己個人覺得 毫無難點 入門簡直 不要太方便
我相信 只要仔細看完我所有寫的 dva的所有功能都將可以掌握
如果有問題的話 可以加我QQ：469373256
