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

react自定义hook

news 来源：原创 2025/7/29 16:33:48

自定义hook：用来封装复用的逻辑，，自定义hook是以use开头的普通函数，，将组件中可复用的状态逻辑抽取到自定义的hook中，简化组件代码

常见自定义hook例子：

封装一个简单的计数器

import {useState} from "react";function useCounter(initialValue:number){const [count, setCount] = useState(0)const increment = ()=>setCount(prev=>prev+1)const decrement = ()=>setCount(prev=>prev-1)const reset = ()=>setCount(initialValue)return {count,increment,decrement,reset}
}export default useCounter

封装一个自动监听网页窗口变化的hooks

import {useEffect, useState} from "react";function useWindowSize(){const [size, setSize] = useState({width:window.innerWidth,height:window.innerHeight})useEffect(() => {const handleResize = ()=>{setSize({width: window.innerWidth,height: window.innerHeight})}window.addEventListener("resize",handleResize)return ()=> window.removeEventListener("resize",handleResize)}, []);return size
}export default useWindowSize

封装一个网络请求的hooks,返回请求的状态

import {useEffect, useState} from "react";
import axios from "axios";interface FetchResult<T>{data:T | null,loading:boolean,error: Error | null
}
function useFetch<T = any>(url:string):FetchResult<T>{const [data, setData] = useState<T | null>(null)const [loading, setLoading] = useState(true)const [error, setError] = useState<Error | null>(null)useEffect(() => {const fetchData = async ()=>{try {const response = await axios.get(url)console.log(response)setData(response.data)} catch (e) {setError(e as Error)} finally {setLoading(false)}}fetchData()}, [url]);return {data,loading,error}}export default useFetch

hook设置获取localStorage

import {useState} from "react";function useLocalStorage<T>(key:string,initialValue:T | null){const [storeValue, setStoreValue] = useState(()=>{try {var item = window.localStorage.getItem(key);return item ? JSON.parse(item) : initialValue} catch (e) {console.log(e)return initialValue}})const setValue = (val:T | null)=>{try {setStoreValue(val)if (val){window.localStorage.setItem(key, JSON.stringify(val))}else{window.localStorage.removeItem(key)}} catch (e) {console.log(e)}}return [storeValue,setValue] as const}export default useLocalStorage

调用hook：

import useCounter from "./useCounter";
import useWindowSize from "./useWindowSize";
import useFetch from "./useFetch";
import useLocalStorage from "./useLocalStorage";function CustomHook(){const {count,increment,decrement,reset} = useCounter(10)const {width,height} =useWindowSize()const {data,loading,error} = useFetch("http://localhost:9090/hello")const [token,setToken] = useLocalStorage<String | null>("token",null)if (loading) return <div>loading ....</div>if (error) return  <div>error: {error.message}</div>return (<div><div> {width}</div><div> {height}</div>{count}<button onClick={increment}>increment</button><button onClick={decrement}>decrement</button>{data}<h3> token is :{token}</h3><button onClick={()=>setToken("123")}>123</button></div>)
}export default CustomHook

react自定义hook

自定义hook： 用来封装复用的逻辑，，自定义hook是以use开头的普通函数，，将组件中可复用的状态逻辑抽取到自定义的hook中，简化组件代码常见自定义hook例子： 封装一个简单的计数器 import {useS…...

编程日记 2025/7/29 16:33:48

Android Compose 框架的状态与 ViewModel 的协同（collectAsState）深入剖析(二十一)

Android Compose 框架的状态与 ViewModel 的协同（collectAsState）深入剖析一、引言在现代 Android 应用开发中，构建响应式和动态的用户界面是至关重要的。Android Compose 作为新一代的声明式 UI 工具包，为开发者提供了一种简…...

编程日记 2025/7/22 2:13:06

系统与网络安全------网络应用基础（1）

资料整理于网络资料、书本资料、AI，仅供个人学习参考。 TCP/IP协议及配置概述 TCP/IP协议族计算机之间进行通信时必须共同遵循的一种通信规定最广泛使用的通信协议的集合包括大量Internet应用中的标准协议支持跨网络架构、跨操作系统平台的数据通信主机…...

编程日记 2025/7/26 13:49:46

linux常用指令（6）

今天我们继续学习一些linux常用指令,丰富我们linux基础知识,那么话不多说,来看. 1.cp指令功能描述：拷贝文件到指定目录基本语法：cp [选项] source dest 常用选项：-r：递归复制整个文件夹拷贝文件： 拷贝文件夹&am…...

编程日记 2025/7/26 16:56:50

效果代码 $(function () {// 标记当前正在编辑的行var editorIndex -1;var data [{code: 1,name: 1,price: 1,status: 0},{code: 2,name: 2,price: 2,status: 1}]$(#dg).datagrid({data: data,onDblClickCell:function (index, field, value) {var dg $(this);if(field ! …...

编程日记 2025/7/17 10:54:20

【设计模式】单件模式

七、单件模式单件(Singleton) 模式也称单例模式/单态模式，是一种创建型模式，用于创建只能产生一个对象实例的类。该模式比较特殊，其实现代码中没有用到设计模式中经常提起的抽象概念，而是使用了一种比较特殊的语法结构&#x…...

编程日记 2025/7/23 22:48:51

C++类与对象的第二个简单的实战练习-3.24笔记

哔哩哔哩C面向对象高级语言程序设计教程（118集全） 实战二 Cube.h #pragma once class Cube { private:double length;double width;double height; public:double area(void);double Volume(void);//bool judgement(double L1, double W1, double H1);…...

编程日记 2025/7/28 18:18:55

【视频】m3u8相关操作

1、视频文件转m3u8 1.1 常用命令 1）默认只保留 5 个ts文件 ffmpeg -i input.mp4 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls stream1.m3u82）去掉音频 -an，保留全部ts文件 ffmpeg -i input.mp4 -vf scale=640:480 -an -start_number 0 -hls_time 10 -hls_lis…...

编程日记 2025/7/24 17:48:32

G-Star 校园开发者计划·黑科大｜开源第一课之 Git 入门

万事开源先修 Git。Git 是当下主流的分布式版本控制工具，在软件开发、文档管理等方面用处极大。它能自动记录文件改动，简化合并流程，还特别适合多人协作开发。学会 Git，就相当于掌握了一把通往开源世界的钥匙，以后参与…...

编程日记 2025/7/28 10:36:19

前端框架学习路径与注意事项

学习前端框架是一个系统化的过程，需要结合理论、实践和工具链的综合掌握。以下是学习路径的关键方面和注意事项： 一、学习路径的核心方面 1. 基础概念与核心思想组件化开发：理解组件的作用（复用性、隔离性）、组件通信…...

编程日记 2025/7/28 4:18:00

Apache Hive：基于Hadoop的分布式数据仓库

Apache Hive 是一个基于 Apache Hadoop 构建的开源分布式数据仓库系统，支持使用 SQL 执行 PB 级大规模数据分析与查询。主要功能 Apache Hive 提供的主要功能如下。 HiveServer2 HiveServer2 服务用于支持接收客户端连接和查询请求。 HiveServer2 支持多客户端…...

编程日记 2025/7/28 22:59:00

langgraph简单Demo3（画一个简单的图）

文章目录画图简单解析再贴结果图画图 from langgraph.graph import StateGraph, END from typing import TypedDict# 定义状态结构 # (刚入门可能不理解这是什么，可以理解为一个自定义的变量库，你的所有的入参出参都可以定义在这里) # 如下&#xff1…...

编程日记 2025/7/25 9:45:13

LCR 187. 破冰游戏（python3解法）

难度：简单社团共有 num 位成员参与破冰游戏，编号为 0 ~ num-1。成员们按照编号顺序围绕圆桌而坐。社长抽取一个数字 target，从 0 号成员起开始计数，排在第 target 位的成员离开圆桌，且成员离开后从下一个成员开始计数…...

编程日记 2025/7/24 18:29:01

10分钟打造专属AI助手！ToDesk云电脑/顺网云/海马云操作DeepSeek哪家强？

文章目录一、引言云计算平台概览ToDesk云电脑：随时随地用上高性能电脑二 .云电脑初体验DeekSeek介绍版本参数与特点任务类型表现 1、ToDesk云电脑2、顺网云电脑3、海马云电脑三、DeekSeek本地化实操和AIGC应用1. ToDesk云电脑2. 海马云电脑3、顺网云电脑四、结语…...

编程日记 2025/7/28 4:43:31

解决 Element UI 嵌套弹窗显示灰色的问题！！！

解决 Element UI 嵌套弹窗显示灰色的问题 🔍 问题描述 ❌ 在使用 Element UI 开发 Vue 项目时，遇到了一个棘手的问题：当在一个弹窗(el-dialog)内部再次打开另一个弹窗时，第二个弹窗会显示为灰色，影响用户体验。问题…...

编程日记 2025/7/25 1:16:07

【大模型】DeepSeek攻击原理和效果解析

前几天看到群友提到一个现象，在试图询问知识库中某个人信息时，意外触发了DeepSeek的隐私保护机制，使模型拒绝回答该问题。另有群友提到，Ollama上有人发布过DeepSeek移除模型内置审查机制的版本。于是顺着这条线索，对相…...

编程日记 2025/7/24 17:49:27

AI对软件工程（software engineering）的影响在哪些方面？

AI对软件工程（software engineering）的影响是全方位且深远的，它不仅改变了传统开发流程，还重新定义了工程师的角色和软件系统的构建方式。以下是AI影响软件工程的核心维度： 一、开发流程的智能化重构需求工程革命 • …...

编程日记 2025/7/26 1:50:53

K8S学习之基础四十五：k8s中部署elasticsearch

k8s中部署elasticsearch 安装并启动nfs服务yum install nfs-utils -y systemctl start nfs systemctl enable nfs.service mkdir /data/v1 -p echo /data/v1 *(rw,no_root_squash) >> /etc/exports exports -arv systemctl restart nfs创建运行nfs-provisioner需要的sa账…...

编程日记 2025/7/25 4:41:06

部署高可用PostgreSQL14集群

目录基础依赖包安装 consul配置 patroni配置 vip-manager配置 pgbouncer配置 haproxy配置验证本文将介绍如何使用Patroni、Consul、vip-manager、Pgbouncer、HaProxy组件来部署一个3节点的高可用、高吞吐、负载均衡的PostgresSQL集群（14版本）&…...

编程日记 2025/7/25 18:37:02

爬虫案例-爬取某站视频

文章目录 1、下载FFmpeg2、爬取代码3、效果图 1、下载FFmpeg FFmpeg是一套可以用来记录、转换数字音频、视频，并能将其转化为流的开源计算机程序。点击下载: ffmpeg 安装并配置 FFmpeg 步骤： 1.下载 FFmpeg： 2.访问 FFmpeg 官网。 3.选择 Wi…...

编程日记 2025/7/17 3:43:18

PV操作指南

🔥《PV操作真香指南——看完就会的祖传攻略》🍵 一、灵魂三问❓ Q1：PV是个啥？ • 💡 操作系统界的红绿灯：控制进程"何时走/何时停"的神器 • 🧱 同步工具人：解决多进程&q…...

编程日记 2025/7/28 1:20:42

计算机考研复试机试-考前速记

考前速记知识点 1. 链表篇 1. 循环链表报数3，输出最后一个报数编号 #include <iostream> using namespace std;typedef struct Node {int no;struct Node* next; }Node, *NodeList;void createNodeListTail(NodeList&L, int n) {L (Node*)malloc(siz…...

编程日记 2025/7/27 22:35:08

【漏洞复现】Next.js中间件权限绕过漏洞 CVE-2025-29927

什么是Next.js？ Next.js 是由 Vercel 开发的基于 React 的现代 Web 应用框架，具备前后端一体的开发能力，广泛用于开发 Server-side Rendering (SSR) 和静态站点生成（SSG）项目。Next.js 支持传统的 Node.js 模式和基于边…...

编程日记 2025/7/28 1:20:43

路由选型终极对决：直连/静态/动态三大类型+华为华三思科配置差异，一张表彻底讲透！

路由选型终极对决：直连/静态/动态三大类型华为华三思科配置差异，一张表彻底讲透！ 一、路由：互联网世界的导航系统二、路由类型深度解析三者的本质区别三、解密路由表——网络设备的GPS华为（Huawei）华三&a…...

编程日记 2025/7/26 4:45:30

【AI】知识蒸馏-简单易懂版

1 缘起最近要准备升级材料，里面有一骨碌是介绍LLM相关技术的，知识蒸馏就是其中一个点， 不过，只分享了蒸馏过程，没有讲述来龙去脉，比如没有讲解Softmax为什么引入T、损失函数为什么使用KL散度，…...

编程日记 2025/7/25 12:19:01

uniapp运行到支付宝开发者工具

使用uniapp编写专有钉钉和浙政钉出现的样式问题在支付宝开发者工具中启用2.0构建的时候，在开发工具中页面样式正常但是在真机调试和线上的时候不正常页面没问题，所有组件样式丢失解决在manifest.json mp-alipay中加入 "styleIsolation&qu…...

编程日记 2025/7/20 1:18:27

STM32学习笔记之keil使用记录

📢：如果你也对机器人、人工智能感兴趣，看来我们志同道合✨ 📢：不妨浏览一下我的博客主页【https://blog.csdn.net/weixin_51244852】 📢：文章若有幸对你有帮助，可点赞 👍…...

编程日记 2025/7/22 16:47:47

卷积神经网络 - 参数学习

本文我们通过两个简化的例子，展示如何从前向传播、损失计算，到反向传播推导梯度，再到参数更新，完整地描述卷积层的参数学习过程。一、例子一我们构造一个非常简单的卷积神经网络，其结构仅包含一个卷积层和一个输出…...

编程日记 2025/7/22 23:37:41

【加密社】币圈合约交易量监控，含TG推送

首先需要在币安的开发者中心去申请自己的BINANCE_API_KEY和BINANCE_API_SECRET 有了这个后，接着去申请一个TG的机器人token和对话chatid 如果不需要绑定tg推送的话，可以忽略这步接下来直接上代码引用部分 from os import system from binance.c…...

编程日记 2025/7/29 8:29:13

大模型概述

大模型属于Foundation Model（基础模型）[插图]，是一种神经网络模型，具有参数量大、训练数据量大、计算能力要求高、泛化能力强、应用广泛等特点。与传统人工智能模型相比，大模型在参数规模上涵盖十亿级、百亿级、千亿级…...

编程日记 2025/7/27 16:08:14

【CSS3】完整修仙功法

目录 CSS 基本概念CSS 的定义CSS 的作用CSS 语法 CSS 引入方式内部样式表外部样式表行内样式表选择器基础选择器标签选择器类选择器id 选择器通配符选择器画盒子文字控制属性字体大小字体粗细字体倾斜行高字体族font 复合属性文本缩进文本对齐文本修饰线文字颜色复合选择器后…...

编程日记 2025/7/25 1:46:21

C++ 的 if-constexpr

1 if-constexpr 语法 1.1 基本语法 if-constexpr 语法是 C 17 引入的新语法特性，也被称为常量 if 表达式或静态 if（static if）。引入这个语言特性的目的是将 C 在编译期计算和求值的能力进一步扩展，更方便地实现编译期的分支…...

编程日记 2025/7/25 12:41:55

【电气设计】接地/浮地设计

在工作的过程中，遇到了需要测量接地阻抗的情况，组内讨论提到了保护接地和功能接地的相关需求。此文章用来记录这个过程的学习和感悟。人体触电的原理： 可以看到我们形成了电流回路，导致触电。因此我们需要针对设备做一些保护设计…...

编程日记 2025/7/22 23:49:33

Gone v2 配置管理3：连接 Nacos 配置中心

🚀 发现 gone-io/gone：一个优雅的 Go 依赖注入框架！💻 它让您的代码更简洁、更易测试。🔍 框架轻量却功能强大，完美平衡了灵活性与易用性。⭐ 如果您喜欢这个项目，请给我们点个星！&a…...

编程日记 2025/7/23 14:28:26

深度强化学习中的深度神经网络优化策略：挑战与解决方案

I. 引言深度强化学习（Deep Reinforcement Learning，DRL）结合了强化学习（Reinforcement Learning，RL）和深度学习（Deep Learning）的优点，使得智能体能够在复杂的环境中学…...

编程日记 2025/7/28 1:07:36

浅拷贝与深拷贝

浅拷贝和深拷贝是对象复制中的两种常见方式，它们在处理对象的属性时有本质的区别。一. 浅拷贝（Shallow Copy） 浅拷贝是指创建一个新对象，然后将当前对象的非静态字段复制到新对象中。如果字段是值类型的，那么将复制字…...

编程日记 2025/7/27 14:26:10

macOS 安装 Miniconda

macOS 安装 Miniconda 1. Quickstart install instructions2. 执行3. shell 上初始化 conda4. 关闭终端登录用户名前的 base参考 1. Quickstart install instructions mkdir -p ~/miniconda3 curl https://repo.anaconda.com/miniconda/Miniconda3-latest-MacOSX-arm64.sh -o…...

编程日记 2025/7/28 23:28:28

分布式限流方案：基于 Redis 的令牌桶算法实现

分布式限流方案：基于 Redis 的令牌桶算法实现前言一、原理介绍：令牌桶算法二、分布式限流的设计思路三、代码实现四、方案优缺点五、适用场景总结前言在分布式场景下，接口限流变得更加复杂。传统的单机限流方式难以满足跨节点的限流需求…...

编程日记 2025/7/27 15:52:19

OpenHarmony子系统开发 - 电池管理（二）

OpenHarmony子系统开发 - 电池管理（二） 五、充电限流限压定制开发指导概述简介 OpenHarmony默认提供了充电限流限压的特性。在对终端设备进行充电时，由于环境影响，可能会导致电池温度过高，因此需要对充电电流或电…...

编程日记 2025/7/26 16:51:46

Cocos Creator版本发布时间线

官网找不到，DeepSeek给的答案，这里做个记录。 Cocos Creator 1.x 系列发布时间：2016 年 - 2018 年 1.0（2016 年 3 月）： 首个正式版本，基于 Cocos2d-x 的 2D 游戏开发工具链，集成可…...

编程日记 2025/7/27 12:46:47

修形还是需要再研究一下

最近有不少小伙伴问到修形和蜗杆砂轮的问题，之前虽然研究过一段时间，但是由于时间问题放下了，最近想再捡起来。之前计算的砂轮齿形是一整段的，但是似乎这种对于有些小伙伴来说不太容易接受，希望按照修形的区域进行分…...

编程日记 2025/7/19 13:55:56

Java面试黄金宝典11

1. 什么是 JMM 内存模型定义 JMM（Java Memory Model）即 Java 内存模型，它并非真实的物理内存结构，而是一种抽象的概念。其主要作用是规范 Java 虚拟机与计算机主内存（Main Memory）之间的交互方式&#x…...

编程日记 2025/7/28 4:16:22

华为p10 plus 鸿蒙2.0降级emui9.1.0.228

需要用到的工具 HiSuite Proxy V3 华为手机助手11.0.0.530_ove或者11.0.0.630_ove应该都可以。官方的通道已关闭，所以要用代理，127.0.0.1端口7777 https://www.firmfinder.ml/ https://professorjtj.github.io/v2/ https://hisubway.online/articl…...

编程日记 2025/7/29 7:31:45

高速开源镜像站网址列表2503

高速开源镜像站网址列表以下是国内常用的高速开源镜像站网址列表，涵盖企业和教育机构的主要站点，适用于快速下载开源软件和系统镜像： 一、企业镜像站阿里云镜像站地址：https://mirrors.aliyun.com/ 特点：覆盖广泛…...

编程日记 2025/7/22 2:13:06

Python----计算机视觉处理（Opencv：绘制图像轮廓：寻找轮廓，findContours()函数)

一、轮廓轮廓是图像中目标物体或区域的外部边界线或边界区域，由一系列相连的像素构成封闭形状，代表了物体的基本外形。与边缘不同，轮廓是连续的，而边缘则不一定是连续的。轮廓与边缘的区别： 轮廓是一组连续的点或线…...

编程日记 2025/7/27 4:40:29

python --face_recognition(人脸识别,检测,特征提取,绘制鼻子,眼睛,嘴巴,眉毛)/活体检测

dlib 安装方法之前博文 https://blog.csdn.net/weixin_44634704/article/details/141332644 环境: python==3.8 opencv-python==4.11.0.86 face_recognition==1.3.0 dlib==19.24.6人脸检测 import cv2 import face_recognition# 读取人脸图片 img = cv2.imread(r"C:\U…...

编程日记 2025/7/27 13:49:36

【测试工具】如何使用 burp pro 自定义一个拦截器插件

在 Burp Suite 中，你可以使用 Burp Extender 编写自定义拦截器插件，以拦截并修改 HTTP 请求或响应。Burp Suite 支持 Java 和 Python (Jython) 作为扩展开发语言。以下是一个完整的流程，介绍如何创建一个 Burp 插件来拦截请求并进行自定义处理…...

编程日记 2025/7/24 4:46:34

51单片机和STM32 入门分析

51单片机和STM32是嵌入式开发中两种主流的微控制器，它们在架构、性能、应用场景等方面存在显著差异。以下是两者的对比分析及选择建议： 1. 51单片机与STM32的定义与特点 51单片机定义：基于Intel 8051内核的8位微控制器，结构简单…...

编程日记 2025/7/16 10:53:51

python暴力破解html表单

import requests import time# 目标URL url "http://192.168.3.101/pikachu/vul/burteforce/bf_form.php" # 请替换为实际的目标URL# 已知的用户名 username "admin"# 密码字典文件路径 password_file "passwords.txt"# 伪造请求头&#xff…...

编程日记 2025/7/17 18:22:20

DeepSeek+RAG局域网部署

已经有很多平台集成RAG模式，dify，cherrystudio等，这里通过AI辅助，用DS的API实现一个简单的RAG部署。框架主要技术栈是Chroma,langchain,streamlit，答案流式输出，并且对答案加上索引。支持doc,docx,pdf,txt。…...

编程日记 2025/6/28 5:16:11

封装一个简单的计数器

封装一个自动监听网页窗口变化的hooks

封装一个网络请求的hooks,返回请求的状态

hook设置获取localStorage

相关文章：