Composition Api封裝業務hook思路示例分享

3403771864 發布于2022-10-30 10:45 / 615人閱讀

　　在近期的工作中有些知識總結分享就是使用 uniapp 的 Vue3 版進行開發。這樣可以在開發中遇到業務場景相同的，就分裝了一個hook 來減少代碼，易于維護。

　　hook的場景

　　上圖中已經很詳細為我們展示3處使用到了獲取列表的功能。分別是：我的收藏、已投遞崗位、未投遞崗位。現在我們就來詳細說說。

　　假如：我的收藏、已投遞崗位、未投遞崗位都各自獲取列表，就會出現重復性的定義以下代碼

　　const getJobParameter = reactive<paramsType>({
　　page: 1,
　　pageSize: 10,
　　code: null,
　　releaseJobName: null,
　　});
　　const jobList = ref([] as Array<jobType>);
　　const total = ref(0);
　　onLoad(() => {
　　getlist();
　　});
　　onReachBottom(() => {
　　if (jobList.value.length < total.value) {
　　getJobParameter.page++;
　　getlist();
　　}
　　});
　　async function getlist() {
　　const res: any = await fn(getJobParameter);
　　jobList.value = await [...jobList.value, ...res.data.data.dataList];
　　total.value = res.data.data.total;
　　}

　　3個頁面都要寫上: 定義變量 -> 初始獲取 -> 獲取的代碼判斷 -> 底部觸發的代碼。因此就直接分裝了一個 hook。

　　useGetJobList

　　共同

　　import { onLoad, onReachBottom } from '@dcloudio/uni-app';
　　import { ref, reactive } from 'vue';
　　import { jobType } from '@/types/job-hunting';
　　interface paramsType {
　　page: number;
　　pageSize: number;
　　code: string | null;
　　releaseJobName: string | null;
　　}
　　export function useGetJobList(fn) {
　　const getJobParameter = reactive<paramsType>({
　　page: 1,
　　pageSize: 10,
　　code: null,
　　releaseJobName: null,
　　});
　　const jobList = ref([] as Array<jobType>);
　　const total = ref(0);
　　onLoad(() => {
　　getlist();
　　});
　　onReachBottom(() => {
　　if (jobList.value.length < total.value) {
　　getJobParameter.page++;
　　getlist();
　　}
　　});
　　async function getlist() {
　　const res: any = await fn(getJobParameter);
　　jobList.value = await [...jobList.value, ...res.data.data.dataList];
　　total.value = res.data.data.total;
　　}
　　async function refresh() {
　　getJobParameter.page = 1;
　　jobList.value = [];
　　await getlist();
　　return true;
　　}
　　return {
　　jobList,
　　refresh: () => refresh(),
　　};
　　}

　　已上代碼就是簡單的獲取到崗位的 list 還未進行操作。

　　總結思路，

　　首頁有城市的選擇、崗位的搜索等功能。

　　我在這里有一些錯誤的想法，也可以分享給大家。

　　就是在getJobParameter 的參數全部暴露出去，再對這些參數進行操作，你是否也感覺這樣跟不分裝好像區別也不大，又思考要不在 useGetJobList 加一個參數用來傳遞參數的變化，這條路也不通。那要怎么辦？

　　后面看了別人分裝的 hook。就有了以下代碼。

　　import { onLoad, onReachBottom } from '@dcloudio/uni-app';
　　import { ref, reactive } from 'vue';
　　import { jobType } from '@/types/job-hunting';
　　interface paramsType {
　　page: number;
　　pageSize: number;
　　code: string | null;
　　releaseJobName: string | null;
　　}
　　export function useGetJobList(fn) {
　　const getJobParameter = reactive<paramsType>({
　　page: 1,
　　pageSize: 10,
　　code: null,
　　releaseJobName: null,
　　});
　　const jobList = ref([] as Array<jobType>);
　　const total = ref(0);
　　onLoad(() => {
　　getlist();
　　});
　　onReachBottom(() => {
　　if (jobList.value.length < total.value) {
　　getJobParameter.page++;
　　getlist();
　　}
　　});
　　async function getlist() {
　　const res: any = await fn(getJobParameter);
　　jobList.value = await [...jobList.value, ...res.data.data.dataList];
　　total.value = res.data.data.total;
　　}
　　async function refresh() {
　　getJobParameter.page = 1;
　　jobList.value = [];
　　await getlist();
　　// 這個后面的代表異步了
　　return true;
　　}
　　function reset () {
　　getJobParameter.page = 1;
　　getJobParameter.code = null;
　　getJobParameter.releaseJobName = null;
　　}
　　function queryList(searchValue: string | null) {
　　reset();
　　getJobParameter.releaseJobName = searchValue;
　　getlist();
　　}
　　function codeChange(code: string | null) {
　　reset();
　　getJobParameter.code = code;
　　getlist();
　　}
　　return {
　　jobList,
　　queryList: (searchValue: string | null) => queryList(searchValue),
　　codeChange: (code: string | null) => codeChange(code),
　　refresh: () => refresh(),
　　};
　　}

　　這里為重新定兩個函數分別是 queryList、codeChange，用來搜索和城市code 改變再獲取崗位列表。

　　queryList: (searchValue: string | null) => queryList(searchValue),
　　codeChange: (code: string | null) => codeChange(code),

　　在寫上面代碼過程中我有一個疑問就是在 return 是可以直接把函數寫為什么要再分裝一個函數出來？

　　緣由

　　我們知道，在定義了一個 hook , 當外部使用想改變 hook 內部的變量，內部寫個函數暴露出去，函數的內部是對變量的修改，外部只需要使用暴露函數。這樣代碼十分的清晰易懂。

　　這時候return 再分裝一個函數是為了后期別人看代碼是可以一眼就知道返回哪些是變量，哪些是函數，函數有哪些參數，參數的類型等之類的，不用一個的去查找。

　　utils 和 hook 的區別

　　之前我一直搞不清楚 hook 和 utils 的區別，我感覺差不多都是分裝一個函數出來。

　　區別: utils 是一個簡單的參數傳入，然后返回，返回的變量不具有響應式。沒有使用到 Vue 的 reactive、ref等鉤子函數, 我認為當你使用了這些鉤子函數就可以說它是一個 hook。

　　總結小tips

　　先說說hook ，它有點想面向對象的語言的 class, 內部定義的變量，這樣可以內部解決，僅僅只需暴露出一個函數。

　　當定義了一個 hook , 當外部使用想改變 hook 內部的變量就因此寫一個函數暴露出去，進行變量的更改

　　在說回return ，當再分裝一個函數，就只看得見數據，這不是很好嘛。

云服務器 GPU云服務器 api調用示例 webrtc中api接口封裝 Composition Hooking

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/128234.html

React Hooks 越來越火了，它會取代傳統的 Redux 嗎？

摘要：前言自推出之后，收到了不少追捧，很多問題也隨之而來。在出現之前，可以使用保存狀態和更新狀態用以應對這種情況。為了在這個用例上追趕的腳步，的需要提供副作用隔離功能。提供了一個，可以用它接入你的風格的。 showImg(https://segmentfault.com/img/remote/1460000019913697?w=1280&h=853); 前言 React Hooks 自推出...

Scliang 2019-08-26 10:26 評論0 收藏0
這樣做動畫交互，一點都不費力！

摘要：圖層信息第一層動畫圖層圖層類型動畫該圖層起始關鍵幀該圖層結束關鍵幀開始第層動畫如何動起來時序圖利用屬性動畫控制進度，每次進度改變通知到每一層，觸發重繪。對于簡單的動畫，在實際使用時性能不太明顯。本文由云+社區發表作者:paulzeng 導語：Lottie是Airbnb開源的一個面向 iOS、Android、React Native 的動畫庫，可實現非常復雜的動畫，使用也及其簡單，極大...

Meathill 2019-08-23 14:36 評論0 收藏0
ahooks正式發布React Hooks工具庫

　　起因　　社會在不斷的向前，技術也在不斷的完善進步。從 React Hooks 正式發布到現在，越來越多的項目正在使用 Function Component 替代 Class Component，Hooks 這一新特性也逐漸被廣泛的使用。這樣的解析是不是很熟悉，在日常中時常都有用到，但也有一個可以解決這樣重復的就是對數據請求的邏輯處理，對防抖節流的邏輯處理等。另一方面，由于 Hoo...

3403771864 2022-11-08 23:18 評論0 收藏0
精讀《怎么用 React Hooks 造輪子》

摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調函數進行處理，這些處理都壓縮成了一行。效果通過拿到周期才執行的回調函數。實現等價于的回調僅執行一次時，因此直接把回調函數拋出來即可。 1 引言上周的精讀《React Hooks》已經實現了對 React Hooks 的基本認知，也許你也看了 React Hooks 基本實現剖析（就是數組），但理解實現原理就可以用好了嗎？學的是...

Shihira 2019-08-26 13:22 評論0 收藏0
React Hook起飛指南

摘要：起飛指南作者元瀟方凳雅集出品目前放出來了個內置，但僅僅基于以下兩個，就能做很多事情。行代碼實現一個全局元瀟根組件掛上即可子組件調用隨時隨地實現一個局部元瀟的本質是的一個語法糖，感興趣可以閱讀一下的類型定義和實現。 React Hook起飛指南作者：元瀟方凳雅集出品 16.8目前放出來了10個內置hook，但僅僅基于以下兩個API，就能做很多事情。所以這篇文章不會講很多API，...

姘擱『 2019-08-26 10:47 評論0 收藏0