react18自定义hook实现
概念:自定义 hook 是一种将组件逻辑提取到可复用函数中的方式,它允许你在多个组件中共享相同的状态和行为。自定义 hook 的本质上是一个普通的 JavaScript 函数,它可以使用 React 内部的 hook(如
useState、useEffect、useContext等)来管理组件逻辑。
例子:使用自定义 hook 来处理div的显示隐藏:
- 创建一个hook.js 声明一个use打头的函数,在函数体内封装可复用的逻辑
- 封装好后,把组件中用到的状态或者回调函数已对象的形式return出去

import React, { useState } from "react";const useIsShow = () => {const [show, setShow] = useState(true);const isShow = () => {setShow(!show);};return {show,isShow,};
};export default useIsShow;
- 在哪个组件要用到这个逻辑,引入封装好的hook,解构出来状态或者回调函数进行使用

import React from "react";
import useIsShow from './hooks'function App() {const {show,isShow} = useIsShow()return (<div className="App">{show && <div>div</div>}<button onClick={()=>{isShow()}}>切换</button></div>);
}export default App;
注:本人前端小白 ,如有不对的地方还请多多指教
相关文章:
react18自定义hook实现
概念:自定义 hook 是一种将组件逻辑提取到可复用函数中的方式,它允许你在多个组件中共享相同的状态和行为。自定义 hook 的本质上是一个普通的 JavaScript 函数,它可以使用 React 内部的 hook(如 useState、useEffect、useContext…...
一周学会Flask3 Python Web开发-Jinja2模板过滤器使用
锋哥原创的Flask3 Python Web开发 Flask3视频教程: 2025版 Flask3 Python web开发 视频教程(无废话版) 玩命更新中~_哔哩哔哩_bilibili 在Jinja2中,过滤器(filter)是一些可以用来修改和过滤变量值的特殊函数,过滤器和变量用一个竖线 | &a…...
使用PDFMiner.six解析PDF数据
PDF(可移植文档格式)文件是由Adobe创建的一种灵活的文件格式,它允许文档在不同的软件、硬件和操作系统中一致地显示。每个PDF文件都包含对固定布局文档的全面描述,包括文本、字体、图形和其他必要的显示元素。pdf通常用于文档共享…...
本地svn
参考补充:https://blog.csdn.net/hhl_work/article/details/107832414 先在D:\coding_cangku下新建空文件夹,例:code1【类似gitee线上仓库】点击进入code1,右键选择TortoiseSVN,再下一级菜单下点击Create repository …...
金融支付行业技术侧重点
1. 合规问题 第三方支付系统的平稳运营,严格遵循《非银行支付机构监督管理条例》的各项条款是基础与前提,其中第十八条的规定堪称重中之重,是支付机构必须牢牢把握的关键准则。 第十八条明确指出,非银行支付机构需构建起必要且独…...
axios几种请求类型的格式
Axios 是一个基于 Promise 的 HTTP 客户端,广泛用于浏览器和 Node.js 中发送 HTTP 请求。它支持多种请求格式,包括 GET、POST、PUT、DELETE 等。也叫RESTful 目录 一、axios几种请求类型的格式 1、get请求 2、post请求 3、put请求 4、delete请求 二…...
二、IDE集成DeepSeek保姆级教学(使用篇)
各位看官老爷好,如果还没有安装DeepSeek请查阅前一篇 一、IDE集成DeepSeek保姆级教学(安装篇) 一、DeepSeek在CodeGPT中使用教学 1.1、Edit Code 编辑代码 选中代码片段 —> 右键 —> CodeGPT —> Edit Code, 输入自然语言可编辑代码,点击S…...
通过理解 sk_buff 深入掌握 Linux 内核自定义协议族的开发实现
要开发 Linux 内核中的自定义协议族(如私有传输层或网络层协议),需基于 sk_buff 的结构和操作,结合内核网络栈的扩展机制。以下是实现这一目标的分步指南: 1. 协议族开发的核心步骤 (1) 注册自定义协议族 定义协议号 在 <linux/if_ether.h> 或自定义头文件中分配唯…...
Qt 自带颜色属性
Qt 系统自带颜色如下: enum GlobalColor {color0,color1,black,white,darkGray,gray,lightGray,red,green,blue,cyan,magenta,yellow,darkRed,darkGreen,darkBlue,darkCyan,darkMagenta,darkYellow,transparent};对应颜色如下: color0: 这是自定义颜色…...
Linux的文件与目录管理
rm -rf / 列出目录内容和属性 命令:ls 格式:ls 选项 文件名 例: ls -a 打印工作路径 命令:pwd 切换工作目录 命令:cd 格式:cd 相对路径或者绝对路径 查看文件类型 命令:file 格式…...
常用的 pip 命令
pip 是 Python 的包管理工具,可用于安装、卸载、更新和管理 Python 包。以下是一些常用的 pip 命令: 1. 安装包 安装最新版本的包 pip install package_namepackage_name 是你要安装的 Python 包的名称,例如 pip install requests 可以安装…...
Vue 项目中配置代理的必要性与实现指南
Vue 项目中配置代理的必要性与实现指南 在 Vue 前端项目的开发过程中,前端与后端地址通常不同,可能引发跨域问题。为了在开发环境下顺畅地请求后端接口,常常会通过配置**代理(proxy)**来解决问题。这篇文章将详细解析…...
【QT】QLinearGradient 线性渐变类简单使用教程
目录 0.简介 1)qtDesigner中 2)实际执行 1.功能详述 3.举一反三的样式 0.简介 QLinearGradient 是 Qt 框架中的一个类,用于定义线性渐变效果(通过样式表设置)。它可以用来填充形状、背景或其他图形元素࿰…...
编程题 - 汽水瓶【JavaScript/Node.js解法】
“学如逆水行舟,不进则退。” ——《增广贤文》 目录 汽水瓶 题目:解答分析:js代码解答 -ACM模式:代码通过:题解分析:简洁思路代码: 汽水瓶 题目: 某商店规定:三个空…...
从 0 到 1:使用 Docker 部署个人博客系统
引言 在当今数字化时代,拥有一个个人博客来记录自己的学习、生活和见解是一件非常有意义的事情。然而,传统的博客部署方式往往涉及复杂的环境配置和依赖管理,容易让人望而却步。而 Docker 的出现,为我们提供了一种简单、高效的解…...
Python - Python操作Redis
安装Redis可参考 Redis-入门简介-CSDN博客 在Python中接入Redis数据库通常使用redis-py这个库 一、安装Redis 首先,需要安装redis-py库。通过pip来安装 pip install redis 二、连接Redis Redis连接操作import redisdef redis_connect():try:redisClient redi…...
Solidity 开发环境
Solidity 开发环境 Solidity编辑器:Solidity编辑器是⼀种专⻔⽤于编写和编辑Solidity代码的编辑器。常⽤的Solidity编辑器包括 Visual Studio Code、Atom和Sublime Text。以太坊开发环境:以太坊开发环境(Ethereum Development Environment&a…...
js基础案例
1.弹出警告框,显示Hello JS 2.在页面输出内容(内容在body标签里面) 3.在控制台输出内容 4.js代码是自上而下执行 5.将js代码编写到标签的onclick属性中,当点击时,js代码才会执行 6.将js写到超链接的href属性中…...
Unity TMPro显示中文字体
TMP默认的字体只能显示英语,那么怎么显示中文呢 1、找到支持中文的字体文件 在c盘搜索Fonts文件夹有很多支持中文的字体文件 我这里选择雅黑 PS.双击打开发现里面有粗体细体普通三个版本,也可以只导入一个版本进去 2、将其拖入到unity Assets里面 3…...
2025 GDC开发者先锋大会“人形机器人的开源之路”分论坛 | 圆桌会议:《开放协作:开源生态如何解锁人形机器人与具身智能的未来》(上篇)
在GDC全球开发者先锋大会期间,2月23日,由GDC组委会指导、国家地方共建人形机器人创新中心(以下简称“国地中心”)承办的“人形机器人的开源之路”主题论坛在上海西岸艺术中心成功举办。 在人工智能与机器人技术飞速发展的今天&…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手:借助大模型技术,开发能根据用户输入的主题、风格等要求,生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用,帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
国防科技大学计算机基础课程笔记02信息编码
1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制,因此这个了16进制的数据既可以翻译成为这个机器码,也可以翻译成为这个国标码,所以这个时候很容易会出现这个歧义的情况; 因此,我们的这个国…...
零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?
一、核心优势:专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发,是一款收费低廉但功能全面的Windows NAS工具,主打“无学习成本部署” 。与其他NAS软件相比,其优势在于: 无需硬件改造:将任意W…...
智慧医疗能源事业线深度画像分析(上)
引言 医疗行业作为现代社会的关键基础设施,其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入,智慧医疗能源事业线应运而生,致力于通过创新技术与管理方案,重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
Spring Boot 实现流式响应(兼容 2.7.x)
在实际开发中,我们可能会遇到一些流式数据处理的场景,比如接收来自上游接口的 Server-Sent Events(SSE) 或 流式 JSON 内容,并将其原样中转给前端页面或客户端。这种情况下,传统的 RestTemplate 缓存机制会…...
循环冗余码校验CRC码 算法步骤+详细实例计算
通信过程:(白话解释) 我们将原始待发送的消息称为 M M M,依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)(意思就是 G ( x ) G(x) G(x) 是已知的)࿰…...
HTML前端开发:JavaScript 常用事件详解
作为前端开发的核心,JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例: 1. onclick - 点击事件 当元素被单击时触发(左键点击) button.onclick function() {alert("按钮被点击了!&…...
C++八股 —— 单例模式
文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全(Thread Safety) 线程安全是指在多线程环境下,某个函数、类或代码片段能够被多个线程同时调用时,仍能保证数据的一致性和逻辑的正确性…...
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入(联动)2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
