快速上手 DVA

首先是乙個基於 redux 和 redux-saga 的資料流方案，然後為了簡化開發體驗，dva 還額外內建了 react-router 和 fetch，所以也可以理解為乙個輕量級的應用框架。

擴充套件：什麼是redux

官方解釋：redux 是 js 應用的可**狀態的容器。可以理解為全域性資料狀態管理工具（狀態管理機），用來做元件通訊等。

注意是全域性資料狀態管理工具

為什麼使用redux

我們將上圖的乙個圓圈看做是乙個元件，可以看到他們都有頂級元件，元件之下還巢狀了元件，還有各種兄弟元件，他們之間都要進行資料的互動，

在沒有redux的時候，如果是左圖，我們現在的實現方式是什麼樣的呢，通過元件傳值，但這種方式，傳值會非常複雜，麻煩，而且**冗餘，尤其後期維護困難。基礎稍差的前端來維護，或者換乙個人來維護可能直接維護不了。

但如果使用了redux ，如右圖，不管有多少元件，使用的都是同乙個源，維護簡單，傳值方便，只需要稍有基礎的，都可以快速上手，維護簡單。而本文中所說的dvajs 就是在redux的基礎上擴充套件的乙個輕量級框架。

易學易用，僅有6個api，配合 umi 使用後更是降低為 0 api

elm 概念，通過 reducers, effects 和 subscriptions 組織 model

外掛程式機制，比如 dva-loading 可以自動處理 loading 狀態，不用一遍遍地寫 showloading 和 hideloading

支援 hmr，基於 babel-plugin-dva-hmr 實現 components、routes 和 models 的 hmr

我實際工作中使用的是阿里的andt框架這裡就直接安裝使用現成的了。

1 新增頁面

export default
class workplace extends purecomponent 
];return
(      
);  }
}

2 定義model

export default
,    effects: ,
reducers: ,
};

這個 model 裡：

connect方式有很多種說我們這裡都講下，因為我發現在實際工作中有人因為不會使用connect而放棄使用dva，使用原始的元件傳值。

第一種使用@connect

import  from 'dva';
@connect(() =>())
export 
default
class workplace extends purecomponent  from 'dva';
class workplace extends purecomponent ) =>())(workplace );

第三種

const testcomponent = connect(() =>())((props)=>)

model增加資料互動方法dvatestservice 是andt 與後台互動的，可以自行了解下或者用其他方式替代

import  from '@/services/dvatestservice.js';
export 
default
,    effects: , ) );}}
},reducers: ) }},
};

頁面使用dva

class workplace extends purecomponent  = this
.props.dvatest;
// 使用this.props.dispatch呼叫model方法
this
.props.dispatch(
});}  render() 
];console.log(
this
.props.dvatest)
const  = this
.props.dvatest;
return
(      
);  }
}export 
default connect(() =>())(workplace);

以上乙個完成的 dva使用流程就結束了

快速上手 DVA

dva上手簡單例子學習dva

ibatis 快速上手

Pro C快速上手

快速上手 DVA

dva上手 簡單例子學習dva

ibatis 快速上手

Pro C快速上手

相關推薦

dva上手簡單例子學習dva