資訊專欄INFORMATION COLUMN
在近期的工作中有些知識(shí)總結(jié)分享就是使用 uniapp 的 Vue3 版進(jìn)行開發(fā)。這樣可以在開發(fā)中遇到業(yè)務(wù)場(chǎng)景相同的，就分裝了一個(gè)hook 來減少代碼，易于維護(hù)。
hook的場(chǎng)景
上圖中已經(jīng)很詳細(xì)為我們展示3處使用到了獲取列表的功能。分別是： 我的收藏、已投遞崗位、未投遞崗位?，F(xiàn)在我們就來詳細(xì)說說。
假如： 我的收藏、已投遞崗位、未投遞崗位 都各自獲取列表，就會(huì)出現(xiàn)重復(fù)性的定義以下代碼
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個(gè)頁面都要寫上: 定義變量 -> 初始獲取 -> 獲取的代碼判斷 -> 底部觸發(fā)的代碼。因此就直接分裝了一個(gè) 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(),
};
}已上代碼就是簡(jiǎn)單的獲取到崗位的 list 還未進(jìn)行操作。
總結(jié)思路，
首頁有城市的選擇、崗位的搜索等功能。
我在這里有一些錯(cuò)誤的想法，也可以分享給大家。
就是在getJobParameter 的參數(shù)全部暴露出去，再對(duì)這些參數(shù)進(jìn)行操作，你是否也感覺這樣跟不分裝好像區(qū)別也不大，又思考要不在 useGetJobList 加一個(gè)參數(shù)用來傳遞 參數(shù)的變化，這條路也不通。那要怎么辦？
后面看了別人分裝的 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();
// 這個(gè)后面的代表異步了
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(),
};
}這里為 重新定兩個(gè)函數(shù) 分別是 queryList、codeChange，用來搜索和城市code 改變?cè)佾@取 崗位列表。
queryList: (searchValue: string | null) => queryList(searchValue), codeChange: (code: string | null) => codeChange(code),
在寫上面代碼過程中我有一個(gè)疑問就是在 return 是可以直接把函數(shù)寫為什么要再分裝一個(gè)函數(shù)出來？
緣由
我們知道，在定義了一個(gè) hook , 當(dāng)外部使用想改變 hook 內(nèi)部的變量，內(nèi)部寫個(gè)函數(shù)暴露出去，函數(shù)的內(nèi)部是對(duì)變量的修改，外部只需要使用暴露函數(shù)。這樣代碼十分的清晰易懂。
這時(shí)候return 再分裝一個(gè)函數(shù) 是為了后期別人看代碼是可以一眼就知道返回哪些是變量，哪些是函數(shù)，函數(shù)有哪些參數(shù)，參數(shù)的類型等之類的，不用一個(gè)的去查找。
utils 和 hook 的區(qū)別
之前我一直搞不清楚 hook 和 utils 的區(qū)別，我感覺差不多都是分裝一個(gè)函數(shù)出來。
區(qū)別: utils 是一個(gè)簡(jiǎn)單的參數(shù)傳入，然后返回，返回的變量不具有響應(yīng)式。沒有使用到 Vue 的 reactive、ref等鉤子函數(shù), 我認(rèn)為當(dāng)你使用了這些鉤子函數(shù)就可以說它是一個(gè) hook。
總結(jié)小tips
先說說hook ，它有點(diǎn)想面向?qū)ο蟮恼Z言的 class, 內(nèi)部定義的變量，這樣可以內(nèi)部解決，僅僅只需暴露出一個(gè)函數(shù)。
當(dāng)定義了一個(gè) hook , 當(dāng)外部使用想改變 hook 內(nèi)部的變量就因此寫一個(gè)函數(shù)暴露出去，進(jìn)行變量的更改
在說回return ，當(dāng)再分裝一個(gè)函數(shù)，就只看得見數(shù)據(jù)，這不是很好嘛。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/128234.html
摘要：前言自推出之后，收到了不少追捧，很多問題也隨之而來。在出現(xiàn)之前，可以使用保存狀態(tài)和更新狀態(tài)用以應(yīng)對(duì)這種情況。為了在這個(gè)用例上追趕的腳步，的需要提供副作用隔離功能。提供了一個(gè)，可以用它接入你的風(fēng)格的。 showImg(https://segmentfault.com/img/remote/1460000019913697?w=1280&h=853); 前言 React Hooks 自推出...
摘要：圖層信息第一層動(dòng)畫圖層圖層類型動(dòng)畫該圖層起始關(guān)鍵幀該圖層結(jié)束關(guān)鍵幀開始第層動(dòng)畫如何動(dòng)起來時(shí)序圖利用屬性動(dòng)畫控制進(jìn)度，每次進(jìn)度改變通知到每一層，觸發(fā)重繪。對(duì)于簡(jiǎn)單的動(dòng)畫，在實(shí)際使用時(shí)性能不太明顯。 本文由云+社區(qū)發(fā)表作者:paulzeng 導(dǎo)語：Lottie是Airbnb開源的一個(gè)面向 iOS、Android、React Native 的動(dòng)畫庫，可實(shí)現(xiàn)非常復(fù)雜的動(dòng)畫，使用也及其簡(jiǎn)單，極大...
起因 社會(huì)在不斷的向前，技術(shù)也在不斷的完善進(jìn)步。從 React Hooks 正式發(fā)布到現(xiàn)在，越來越多的項(xiàng)目正在使用 Function Component 替代 Class Component，Hooks 這一新特性也逐漸被廣泛的使用。 這樣的解析是不是很熟悉，在日常中時(shí)常都有用到，但也有一個(gè)可以解決這樣重復(fù)的就是對(duì)數(shù)據(jù)請(qǐng)求的邏輯處理，對(duì)防抖節(jié)流的邏輯處理等。 另一方面，由于 Hoo...
摘要：可以看到，這樣不僅沒有占用組件自己的，也不需要手寫回調(diào)函數(shù)進(jìn)行處理，這些處理都?jí)嚎s成了一行。效果通過拿到周期才執(zhí)行的回調(diào)函數(shù)。實(shí)現(xiàn)等價(jià)于的回調(diào)僅執(zhí)行一次時(shí)，因此直接把回調(diào)函數(shù)拋出來即可。 1 引言 上周的 精讀《React Hooks》 已經(jīng)實(shí)現(xiàn)了對(duì) React Hooks 的基本認(rèn)知，也許你也看了 React Hooks 基本實(shí)現(xiàn)剖析（就是數(shù)組），但理解實(shí)現(xiàn)原理就可以用好了嗎？學(xué)的是...
摘要：起飛指南作者元瀟方凳雅集出品目前放出來了個(gè)內(nèi)置，但僅僅基于以下兩個(gè)，就能做很多事情。行代碼實(shí)現(xiàn)一個(gè)全局元瀟根組件掛上即可子組件調(diào)用隨時(shí)隨地實(shí)現(xiàn)一個(gè)局部元瀟的本質(zhì)是的一個(gè)語法糖，感興趣可以閱讀一下的類型定義和實(shí)現(xiàn)。 React Hook起飛指南 作者：元瀟 方凳雅集出品 16.8目前放出來了10個(gè)內(nèi)置hook，但僅僅基于以下兩個(gè)API，就能做很多事情。所以這篇文章不會(huì)講很多API，...
閱讀 685·2023-03-27 18:33
閱讀 887·2023-03-26 17:27
閱讀 752·2023-03-26 17:14
閱讀 736·2023-03-17 21:13
閱讀 665·2023-03-17 08:28
閱讀 2083·2023-02-27 22:32
閱讀 1517·2023-02-27 22:27
閱讀 2430·2023-01-20 08:28
