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组委会指导、国家地方共建人形机器人创新中心(以下简称“国地中心”)承办的“人形机器人的开源之路”主题论坛在上海西岸艺术中心成功举办。 在人工智能与机器人技术飞速发展的今天&…...
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器的上位机配置操作说明
LBE-LEX系列工业语音播放器|预警播报器|喇叭蜂鸣器专为工业环境精心打造,完美适配AGV和无人叉车。同时,集成以太网与语音合成技术,为各类高级系统(如MES、调度系统、库位管理、立库等)提供高效便捷的语音交互体验。 L…...
Leetcode 3577. Count the Number of Computer Unlocking Permutations
Leetcode 3577. Count the Number of Computer Unlocking Permutations 1. 解题思路2. 代码实现 题目链接:3577. Count the Number of Computer Unlocking Permutations 1. 解题思路 这一题其实就是一个脑筋急转弯,要想要能够将所有的电脑解锁&#x…...
MVC 数据库
MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...
TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案
一、TRS收益互换的本质与业务逻辑 (一)概念解析 TRS(Total Return Swap)收益互换是一种金融衍生工具,指交易双方约定在未来一定期限内,基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...
浅谈不同二分算法的查找情况
二分算法原理比较简单,但是实际的算法模板却有很多,这一切都源于二分查找问题中的复杂情况和二分算法的边界处理,以下是博主对一些二分算法查找的情况分析。 需要说明的是,以下二分算法都是基于有序序列为升序有序的情况…...
sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!
简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求,并检查收到的响应。它以以下模式之一…...
【从零学习JVM|第三篇】类的生命周期(高频面试题)
前言: 在Java编程中,类的生命周期是指类从被加载到内存中开始,到被卸载出内存为止的整个过程。了解类的生命周期对于理解Java程序的运行机制以及性能优化非常重要。本文会深入探寻类的生命周期,让读者对此有深刻印象。 目录 …...
MySQL的pymysql操作
本章是MySQL的最后一章,MySQL到此完结,下一站Hadoop!!! 这章很简单,完整代码在最后,详细讲解之前python课程里面也有,感兴趣的可以往前找一下 一、查询操作 我们需要打开pycharm …...
Pydantic + Function Calling的结合
1、Pydantic Pydantic 是一个 Python 库,用于数据验证和设置管理,通过 Python 类型注解强制执行数据类型。它广泛用于 API 开发(如 FastAPI)、配置管理和数据解析,核心功能包括: 数据验证:通过…...
【1】跨越技术栈鸿沟:字节跳动开源TRAE AI编程IDE的实战体验
2024年初,人工智能编程工具领域发生了一次静默的变革。当字节跳动宣布退出其TRAE项目(一款融合大型语言模型能力的云端AI编程IDE)时,技术社区曾短暂叹息。然而这一退场并非终点——通过开源社区的接力,TRAE在WayToAGI等…...
