当前位置: 首页 > news >正文

react18之08自定义hook (简单的axios-get、修改浏览器title、localStorage、获取滚动条位置、img转换为base64)

目录

  • react18之自定义hook ()
    • 01:自定义一个 简单的axios hook 发起get请求
      • useHttp.jsx
      • 使用useHttp hook
      • 效果
    • 02:自定义一个 修改浏览器title hook
    • 03:自定义一个 localStorage(获取、存储、移除) hook
      • useLocalStorage.jsx
      • 使用hook
      • 效果
    • 04:自定义一个 useScrollPosition(获取当前滚动条的位置) hook
      • useScrollPosition.jsx
      • 使用
      • 效果
    • 05:自定义一个 useImageToBase64(img转换为base64) hook
      • useImageToBase64.jsx
      • 使用
      • 效果

react18之自定义hook ()

  • hook的使用规则
    • 自定义hook本质而言就是一个函数,也就是抽离公共部门的代码,类似抽离组件或者说mixin(vue中的mixin)。
    • hook必须以use开头(不遵循的话,由于无法判断某个函数是否包含对其内部 Hook 的调用,React 将无法自动检查你的 Hook 是否违反了 Hook 的规则)
    • 内部正常使用useState useEffect或者其他hooks
    • 自定义返回结果,格式不限
    • 在两个组件中使用相同的 Hook 不会共享 state(自定义 Hook 是一种重用状态逻辑的机制(例如设置为订阅并存储当前值),所以每次使用自定义 Hook 时,其中的所有 state 和副作用都是完全隔离的。)
    • 每次调用 Hook,它都会获取独立的 state(从 React 的角度来看,我们的组件只是调用了 useState 和 useEffect,一个组件中可以调用多次useState和useEffect,它们都是完全独立的)

01:自定义一个 简单的axios hook 发起get请求

  • npm i axios

useHttp.jsx

import { useState, useEffect } from "react";
import axios from "axios";
export default function UseHttp(props) {const { url } = props;const [loading, setLoading] = useState(false);const [data, setData] = useState(null);const [error, setError] = useState(null);useEffect(() => {setLoading(true);axios.get(url).then((res) => {setData(res);}).catch((err) => {setError(err);}).finally(() => {setLoading(false);});}, [url]);return [loading, data, error];
}

使用useHttp hook

import React, { useState,useEffect } from 'react';
import UseHttp from './useHttp';
export default function Base(props) {const [list,setList] = useState([])const url = 'http://localhost:9999' + '/list'const [loading,data,error] = UseHttp({url})useEffect(()=>{if ( data && data.status === 200) {setList(data.data)}},[data])return (<div className='content'>{loading ? '加载中' : <>{ error ? <div>error</div> :<div>{list.map(item=>{return (<div key={item.id}>name-{ item.name};age- { item.age }</div>)})}</div>}</>}</div>)
}

效果

在这里插入图片描述

02:自定义一个 修改浏览器title hook

import { useEffect } from 'react';export default function useTitle(props) {const {title} = propsuseEffect(() => {document.title = title// 组件卸载时,恢复默认标题return () => {document.title = 'Original Title';};}, [title])return { title }
}

03:自定义一个 localStorage(获取、存储、移除) hook

useLocalStorage.jsx

import { useState, useEffect } from 'react';const useLocalStorage = (key, initialValue) => {// 根据key获取localStorage的数据,若是有数据则返回,没有则返回初始化设置的值const [data, setData] = useState(() => {let storageVal = localStorage.getItem(key);return (storageVal && storageVal !== 'undefined') ? JSON.parse(storageVal) : initialValue;});// 若是数据有变化 则存储数据useEffect(() => {localStorage.setItem(key, JSON.stringify(data));}, [key, data]);const removeLocalStorage = () => {setData(initialValue);localStorage.removeItem(key);};return [data, setData, removeLocalStorage];
};export default useLocalStorage;

使用hook

import React, { useState, useEffect } from 'react';
import useLocalStorage from './useLocalStorage';
export default function Base(props) {const [name,setName,removeLocalStorage]= useLocalStorage('name','')function getName(){console.log('name',name);}function setLocalName(){setName('我是setName')}function delLocalName(){removeLocalStorage('name')}return (<div className='content'><div><div>name-{name}</div><div>获取name数据 - <button onClick={getName}>getName</button></div><div>设置name数据 - <button onClick={setLocalName}>setName</button></div><div>移除name数据 - <button onClick={delLocalName}>delName</button></div></div></div>)
}

效果

在这里插入图片描述

04:自定义一个 useScrollPosition(获取当前滚动条的位置) hook

useScrollPosition.jsx

import { useState, useEffect } from 'react';
function useScrollPosition() {const [scrollPosition, setScrollPosition] = useState(0);useEffect(() => {const handleScroll = () => {let scrollY = window.scrollY ? Math.round(window.scrollY) : 0setScrollPosition(scrollY);}document.addEventListener("scroll", handleScroll);return () => {document.removeEventListener("scroll", handleScroll)}}, []);return scrollPosition;
}export default useScrollPosition;

使用

   const scrollPosition = useScrollPosition()console.log('scrollPosition', scrollPosition);

效果

在这里插入图片描述

05:自定义一个 useImageToBase64(img转换为base64) hook

useImageToBase64.jsx

import React, { useState } from 'react';const useImageToBase64 = () => {const [base64Image, setBase64Image] = useState(null);const imageToBase64 = (file) => {return new Promise((resolve, reject) => {const reader = new FileReader();reader.onload = () => {resolve(reader.result);};reader.onerror = (error) => {reject(error);};reader.readAsDataURL(file);});};const handleImageUpload = (event) => {const file = event.target.files[0];if (file) {imageToBase64(file).then((base64) => {setBase64Image(base64);}).catch((error) => {console.error('Error converting image to Base64:', error);});}};return { base64Image, handleImageUpload };
};export default useImageToBase64;

使用

import React from 'react';
import useImageToBase64 from "../自定义hook/useImageToBase64 "
export default function Test(props) {const { base64Image, handleImageUpload } = useImageToBase64();console.log('base64Image',base64Image);return (<div className='content' style={{marginTop:'40px'}}>Test<div><input type="file" accept="image/*" onChange={handleImageUpload} />{base64Image && <img src={base64Image} alt="Uploaded" />}</div></div>)
}

效果

在这里插入图片描述

相关文章:

react18之08自定义hook (简单的axios-get、修改浏览器title、localStorage、获取滚动条位置、img转换为base64)

目录 react18之自定义hook ()01&#xff1a;自定义一个 简单的axios hook 发起get请求useHttp.jsx使用useHttp hook效果 02&#xff1a;自定义一个 修改浏览器title hook03&#xff1a;自定义一个 localStorage(获取、存储、移除) hookuseLocalStorage.jsx使用hook效果 04&…...

对CommonJS、AMD、CMD、ES Module的理解

CommonJS 常用于&#xff1a;服务器端&#xff0c;node&#xff0c;webpack 特点&#xff1a;同步/运行时加载&#xff0c;磁盘读取速度快 语法&#xff1a; // 1. 导出&#xff1a;通过module.exports或exports来暴露模块 module.exports { attr1, attr2 } ex…...

JVM之类加载与字节码(二)

3. 编译期处理 什么是语法糖 所谓的 语法糖 &#xff0c;其实就是指 java 编译器把 *.java 源码编译为 *.class 字节码的过程中&#xff0c;自动生成 和转换的一些代码&#xff0c;主要是为了减轻程序员的负担&#xff0c;算是 java 编译器给我们的一个额外福利&#xff08;给…...

安装linux操作系统

安装虚拟机的步骤&#xff1a; 安装linux系统 之后开启虚拟机 之后重启&#xff0c;打开虚拟机&#xff0c;登录root账号...

【SpringBoot】知识

.第一个程序HelloWorld 项目创建方式&#xff1a;使用 IDEA 直接创建项目 1、创建一个新项目 2、选择spring initalizr &#xff0c; 可以看到默认就是去官网的快速构建工具那里实现 3、填写项目信息 4、选择初始化的组件&#xff08;初学勾选 Web 即可&#xff09; 5、填…...

react ant add/change created_at

1.引入ant的 Table import { Table, Space, Button, message } from antd; 2.获得接口的数据的时候增加上创建时间 const response await axios.get(${Config.BASE_URL}/api/v1/calculation_plans?token${getToken()});if (response.data.message ok) {const data respon…...

OSPF 动态路由协议 路由传递

影响OSPF路由选择的因素&#xff1a; 1.OSPF路由的开销值&#xff1a;宽带参考值默认为100. COST1000/接口带宽。此时接口 带宽的值可更改&#xff0c;更改后只改变参考数值&#xff0c;带宽仍然为初始值。 注意&#xff1a;更改COST需要 在路由的入方向&#xff0c;数据的出方…...

5.kubeadm安装

文章目录 kubeadm部署环境初始化所有的节点安装Docker所有节点安装kubeadm&#xff0c;kubelet和kubectl初始化方法一&#xff0c;配置文件初始化方法二&#xff0c;命令初始化 网络插件node节点总结 证书过期方法一方法二总结 部署Dashboard kubeadm部署 环境初始化 ###所有…...

【雕爷学编程】Arduino动手做(180)---Seeeduino Lotus开发板2

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…...

6.5 池化层

是什么&#xff1a;池化层跟卷积层类似有个滑动窗口&#xff0c;用来取一个区域内的最大值或者平均值。 作用&#xff1a;卷积神经网络的最后的部分应该要看到整个图像的全局&#xff0c;通过池化(汇聚)操作&#xff0c;逐渐汇聚要取的像素&#xff0c;最终实现学习全局表示的…...

etcd

文章目录 etcd单机安装设置键值对watch操作读取键过往版本的值压缩修订版本lease租约&#xff08;过期机制&#xff09;授予租约撤销租约keepAlive续约获取租约信息 事务基于etcd实现分布式锁原生实现官方 concurrency 包实现 服务注册与发现Go 操作 Etcd 参考 etcd etcd 是一…...

W5500-EVB-PICO做DNS Client进行域名解析(四)

前言 在上一章节中我们用W5500-EVB-PICO通过dhcp获取ip地址&#xff08;网关&#xff0c;子网掩码&#xff0c;dns服务器&#xff09;等信息&#xff0c;给我们的开发板配置网络信息&#xff0c;成功的接入网络中&#xff0c;那么本章将教大家如何让我们的开发板进行DNS域名解析…...

单例模式(C++)

定义 保证一个类仅有一个实例&#xff0c;并提供一个该实例的全局访问点。 应用场景 在软件系统中&#xff0c;经常有这样一些特殊的类,必须保证它们在系统中只存在一个实例&#xff0c;才能确保它们的逻辑正确性、以及良好的效率。如何绕过常规的构造器&#xff0c;提供一种…...

LeetCode 热题 100 JavaScript--234. 回文链表

function ListNode(val, next) {this.val val undefined ? 0 : val;this.next next undefined ? null : next; }var isPalindrome function (head) {if (!head || !head.next) {return true; }// 使用快慢指针法找到链表的中间节点let slow head;let fast head;while …...

Redis 6.5 服务端开启多线程源码

redis支持开启多线程&#xff0c;只有从socket到读取缓冲区和从输出缓冲区到socket这两段过程是多线程&#xff0c;而命令的执行还是单线程&#xff0c;并且是由主线程执行 借鉴&#xff1a;【Redis】事件驱动框架源码分析&#xff08;多线程&#xff09; 一、main启动时初始化…...

嵌入式面试笔试刷题(day6)

文章目录 前言一、进程和线程的区别二、共享内存的原理三、中断有传参和返回值吗四、串口数据帧格式五、进程通信有几种&#xff0c;哪几种需要借助内核1.方式2.需要借助内核的 六、flash有哪几种类型七、指针的本质是什么八、指针和数组的区别九、使用宏定义交换变量不能使用中…...

24考研数据结构-第五章:树与二叉树

目录 第五章&#xff1a;树5.1树的基本概念5.1.1树的定义5.1.2 基本术语5.1.3 树的性质 5.2二叉树的概念5.2.1 二叉树的定义与特性5.2.2 几种特殊的二叉树5.2.3 二叉树的性质5.2.4 完全二叉树的性质5.2.5 二叉树的存储结构1. 顺序存储重要的基本操作非完全二叉树2. 链式存储逆向…...

构建稳健的微服务架构:关键的微服务设计原则和最佳实践

在现代软件开发中&#xff0c;微服务架构正逐渐成为构建复杂应用程序的首选方法之一。微服务架构的核心理念是将应用程序划分为一系列小型、自治的服务&#xff0c;每个服务专注于一个特定的业务功能。然而&#xff0c;要实现一个稳健的微服务架构并不仅仅是将功能拆分成微服务…...

消息队列常见问题(1)-如何保障不丢消息

目录 1. 为什么消息队列会丢消息&#xff1f; 2. 怎么保障消息可靠传递&#xff1f; 2.1 生产者不丢消息 2.2 服务端不丢消息 2.3 消费者不丢消息 3. 消息丢失如何快速止损&#xff1f; 3.1 完善监控 3.2 完善止损工具 1. 为什么消息队列会丢消息&#xff1f; 现在主流…...

Circle of Mistery 2023牛客暑期多校训练营5 B

登录—专业IT笔试面试备考平台_牛客网 题目大意&#xff1a;给出一个n个数的数组a&#xff0c;求一个排列&#xff0c;使其形成的其中一个置换环上的数的和>k&#xff0c;并使产生的逆序对数量最少 1<n<1e3;-1e6<k<1e6;-1e6<ai<1e6 tips:关于置换环是什…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

Linux相关概念和易错知识点(42)(TCP的连接管理、可靠性、面临复杂网络的处理)

目录 1.TCP的连接管理机制&#xff08;1&#xff09;三次握手①握手过程②对握手过程的理解 &#xff08;2&#xff09;四次挥手&#xff08;3&#xff09;握手和挥手的触发&#xff08;4&#xff09;状态切换①挥手过程中状态的切换②握手过程中状态的切换 2.TCP的可靠性&…...

Go 语言接口详解

Go 语言接口详解 核心概念 接口定义 在 Go 语言中&#xff0c;接口是一种抽象类型&#xff0c;它定义了一组方法的集合&#xff1a; // 定义接口 type Shape interface {Area() float64Perimeter() float64 } 接口实现 Go 接口的实现是隐式的&#xff1a; // 矩形结构体…...

在四层代理中还原真实客户端ngx_stream_realip_module

一、模块原理与价值 PROXY Protocol 回溯 第三方负载均衡&#xff08;如 HAProxy、AWS NLB、阿里 SLB&#xff09;发起上游连接时&#xff0c;将真实客户端 IP/Port 写入 PROXY Protocol v1/v2 头。Stream 层接收到头部后&#xff0c;ngx_stream_realip_module 从中提取原始信息…...

SQL慢可能是触发了ring buffer

简介 最近在进行 postgresql 性能排查的时候,发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升,且低水位伴随在整个慢 SQL,一直是 buferIO 的等待事件,此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ,但…...

宠物车载安全座椅市场报告:解读行业趋势与投资前景

一、什么是宠物车载安全座椅&#xff1f; 宠物车载安全座椅是一种专为宠物设计的车内固定装置&#xff0c;旨在保障宠物在乘车过程中的安全性与舒适性。它通常由高强度材料制成&#xff0c;具备良好的缓冲性能&#xff0c;并可通过安全带或ISOFIX接口固定于车内。 近年来&…...

【系统架构设计师-2025上半年真题】综合知识-参考答案及部分详解(回忆版)

更多内容请见: 备考系统架构设计师-专栏介绍和目录 文章目录 【第1题】【第2题】【第3题】【第4题】【第5题】【第6题】【第7题】【第8题】【第9题】【第10题】【第11题】【第12题】【第13题】【第14题】【第15题】【第16题】【第17题】【第18题】【第19题】【第20~21题】【第…...

Vue.js教学第二十一章:vue实战项目二,个人博客搭建

基于 Vue 的个人博客网站搭建 摘要: 随着前端技术的不断发展,Vue 作为一种轻量级、高效的前端框架,为个人博客网站的搭建提供了极大的便利。本文详细介绍了基于 Vue 搭建个人博客网站的全过程,包括项目背景、技术选型、项目架构设计、功能模块实现、性能优化与测试等方面。…...