Composition Api封装业务hook思路示例分享

3403771864 发布于2022-10-30 10:45 / 614人阅读

　　在近期的工作中有些知识总结分享就是使用 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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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