React useRequest解读

源码结构:

可以看到虽然是一个hooks(具有一定功能且具备状态的单一函数) 但是各种文件功能分得也是很细的,方便抽离和复用

useRequest.ts

抽离的原则还是单一功能原则

可以看出 真正的hooks实现是在Implement里

对于类型type的引入 我们需要显示声明这是import type

useRequestImplement.ts

入参:

不明确类型的参数都可以用泛型占位定义  泛型可以用在interface/type/class/fn作为参数传入

出参:

学习体会:

从useRequest源码中我们可以学到哪些东西?

1.非常清晰的功能划分,比如纯入口文件,很明确的参数配置(useRequest.ts)只有入参和出参

2.各个功能都单独抽离成了Plugin并结合各种钩子函数处理数据和返回数据

3.很巧妙是使用了setState({})来手动刷新视图

4.借助了后台AOP切面思想设计onBefore等生命周期函数来变更请求状态,处理请求前和请求后数据

5.借助class类来承载各种属性和方法 并通过state和setState来串联模拟class的响应式。尤其是状态的更新

6.充分利用了函数式组件的生命周期特征来实现具体逻辑 并借助useEffect,useMemo来模拟组件生命周期

最终返回类似Hooks的类

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/140954.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【前端面试题】浏览器面试题

文章目录 前言一、浏览器面试问题1.cookie sessionStorage localStorage 区别2.如何写一个会过期的localStorage,说说想法2.如何定时删除localstorage数据2.localStorage 能跨域吗2.memory cache 如何开启2.localstorage的限制2.浏览器输入URL发生了什么2.浏览器如何…

孙哥Spring源码第25集

第25集、处理代理中获取代理进行方法调用 0、问题所在 1、实现ApplicationContextAware接口实现代理 它的处理是在ApplicationContextAware中处理的 2、ExposeProxy分析 整体 分析 如何设置成了false就会有下面的问题 3、使用EnableAspectJAutoProxy解决代理问题 4、到底如何…

WEB使用VUE3实现地图导航跳转

我们在用手机查看网页时可以通过传入经纬度去设置目的地然后跳转到对应的地图导航软件,如果没有下载软件则会跳转到下载界面 注意: 高德地图是一定会跳转到一个新网页然后去询问用户是否需要打开软件百度和腾讯地图是直接调用软件的这个方法有缺陷&…

JavaScript中的代理对象(proxy)

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 创建代理对象⭐ 使用代理对象⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友…

【车载开发系列】ECU Application Software程序刷新步骤

【车载开发系列】ECU Application Software程序刷新步骤 ECU Application Software程序刷新步骤 【车载开发系列】ECU Application Software程序刷新步骤一. Boot Software(引导软件)1)boot manager(启动管理器)2&…

ElasticSearch(二)

1.DSL查询文档 elasticsearch的查询依然是基于JSON风格的DSL来实现的。 1.1.DSL查询分类 Elasticsearch提供了基于JSON的DSL(Domain Specific Language)来定义查询。常见的查询类型包括: 查询所有:查询出所有数据,…

挂件板死机刷固件

用ESP32-DevKitC_V4刷固件的工具flash_download_tool_3.9.5.exe 挂件板子端口接线依次为V(接3V3)、R(接TXD)、T(接RXD)、G(接GND)、L(悬空) 1.选择ESP8266&…

springboot 捕获数据库唯一索引导致的异常

在一些业务场景中,需要保证数据的唯一性,一般情况下,我们会先到数据库中去查询是否存在,再去判断是否可以插入新的数据.如果是在高并发的情况下,可能还是会出现重复的情况.这时候可能就需要用到锁.也可以在数据库中设置唯一索引. 如果使用唯一索引,在插入相同数据的情况下会抛出…

大二毕设.3-网盘系统

目录 技术选型: 功能概括: 基本演示: 实现讲解: 技术选型: 前端: Vue3 Element Plus后端: SpringBoot Mybatis-Plus MySQL Redis Caffeine FastDFS/OSS SpringCloud Stream RocketMQ Zookeeper 功能概括&…

【李沐深度学习笔记】基础优化方法

课程地址和说明 基础优化方法p2 本系列文章是我学习李沐老师深度学习系列课程的学习笔记,可能会对李沐老师上课没讲到的进行补充。 基础优化方法 在讲具体的线性回归实现之前,要先讲一下基础的优化模型的方法 梯度下降 当模型没有显示解&#xff08…

【操作系统笔记二】链接阶段ELF文件

链接阶段&#xff1a;符号解析 链接阶段主要包含&#xff1a; 符号解析重定位 一般情况下&#xff0c;每个 C 文件可以看成一个程序模块&#xff0c;比如下边的main.c就是一个程序模块 #include <stdio.h>extern int shared; int sum(int *a, int n); int array[2] …

三维模型轻量化引擎HOOPS纹理技术概览

随着计算机图形学和虚拟现实技术的飞速发展&#xff0c;大规模三维模型的应用领域不断扩展&#xff0c;如游戏开发、建筑设计、工程模拟等。然而&#xff0c;这些大规模模型往往具有复杂的几何结构和高分辨率的纹理&#xff0c;导致文件大小庞大&#xff0c;不利于在线传输和实…

Stellar Toolkit for MySQL 9.0 Crack 3in1

面向数据库管理员的 MySQL 工具包 Stellar Toolkit for MySQL是一款三合一软件套件&#xff0c;用于修复损坏的 MySQL 和 MariaDB 数据库、从 MySQL 数据库的 InnoDB 和 MyISAM 表恢复数据以及分析 MySQL 数据库日志文件。该软件还可以以最高的安全性和完整性相互转换 MySQL/Ma…

面试官:你了解axios的原理吗?有看过它的源码吗?

面试官&#xff1a;你了解axios的原理吗&#xff1f;有看过它的源码吗&#xff1f; 一、axios的基本使用 关于 axios 的基本使用&#xff0c;上篇文章已经有所涉及&#xff0c;这里再稍微回顾一下&#xff1a; 发送请求 import axios from axios;axios(config) // 直接传入…

Java内存模型介绍

文章目录 Java内存模型前言Java内存模型基本介绍指令重排相关概念主存和本地内存相关介绍JMM中的8种同步规则和8种同步操作happens-before 原则内存屏障总结 Java内存模型 前言 本文主要介绍一下JMM中的一些常见概念&#xff0c;通过本文让你能够快速的对JMM有一个大致的了解 …

如何看待Unity新的收费模式?

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

在uniapp中使用 秋云ucharts图表,运行到小程序

步骤一&#xff1a;通过使用 HBuilderX 直接导入项目&#xff08;uni_modules 版本&#xff09; 步骤二&#xff1a;在uCharts官网 - 秋云uCharts跨平台图表库 演示中&#xff0c;先弄个demo试着运行&#xff0c; 步骤三&#xff1a;查看自己需要的配置&#xff0c; 下面是我的…

保姆级 Keras 实现 Faster R-CNN 十三 (训练)

保姆级 Keras 实现 Faster R-CNN 十三 训练 一. 将 Faster R-CNN 包装成一个类二. 修改模型结构1. 修改 input_reader 函数2. 增加 RoiLabelLayer 层 三. 损失函数1. 自定义损失函数2. 自定义精度评价函数 四. 模型编译五. 模型训练六. 预训练模型七. 保存模型与参数八. 代码下…

MySQL高可用

目录 MySQL高可用方案 1、MHA架构&#xff08;单主&#xff09; MHA的工作原理 MHA 架构的优点 MHA 架构的缺点 2、MHA架构的部署 1&#xff09;关闭防火墙和selinux 2&#xff09;分别修改master和slave1&#xff0c;slave2的主机名 3&#xff09;修改master主库服务…

(09_22)【有奖体验】轻点鼠标,让古籍数字化“重生_

卷帙浩繁的古籍是古典文化的载体&#xff0c;珍贵的古籍往往很难轻易示人&#xff0c;数字化是解决古籍‘藏’与‘用’之间矛盾的最好方式&#xff0c;函数计算联合开发者宋杰开发“古籍识别“应用&#xff0c;希望更多开发者行动起来&#xff0c;用Serverless AI 让古籍“活”…