【前端知识】React 基础巩固(四十六)——自定义Hook的应用
React 基础巩固(四十六)——自定义Hook的应用
一、自定义Hook的应用
自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上而言,它并不算React的特性。
-
实现组件创建/销毁时打印日志
import React, { memo, useEffect, useState } from "react";function useLogLife(name) {useEffect(() => {console.log(`${name}组件创建`);return () => {console.log(`${name}组件销毁`);};}, []); }const Home = memo(() => {useLogLife("Home");return <h1>Home Page</h1>; });const About = memo(() => {useLogLife("About");return <h1>About Page</h1>; });export default memo(function App() {const [isShow, setIsShow] = useState(true);useLogLife("App");return (<div><h1>App Component</h1><button onClick={(e) => setIsShow(!isShow)}>切换</button>{isShow && <Home />}{isShow && <About />}</div>); });
-
实现Context共享
封装
TokenContext和UserContext两个Context在自定义HookuseUserToken中,通过使用userUserToken同时获取两个Context的内容:import React, { memo, useContext } from "react"; import { useUserToken } from "./hooks";const Home = memo(() => {const [user, token] = useUserToken();console.log(user, token);return <h1>Home Page</h1>; });const About = memo(() => {const [user, token] = useUserToken();console.log(user, token);return <h1>About Page</h1>; });export default memo(function App() {return (<div><h1>App Component</h1><Home /><About /></div>); });
-
实现获取滚动位置
封装滚动监听事件:
import { useEffect, useState } from "react";function useScrollPosition() {const [scrollX, setScrollX] = useState(0);const [scrollY, setScrollY] = useState(0);useEffect(() => {function handleScroll() {console.log(window.scrollX, window.scrollY);setScrollX(window.scrollX);setScrollY(window.scrollY);}window.addEventListener("scroll", handleScroll);return () => {window.removeEventListener("scroll", handleScroll);};}, []);return [scrollX, scrollY]; }export default useScrollPosition;通过
useScrollPosition自定义Hook进行复用:import React, { memo } from "react"; import "./style.css"; import { useScrollPosition } from "./hooks"; const Home = memo(() => {const [scrollX, scrollY] = useScrollPosition();console.log("Home", scrollX, scrollY);return (<h1>Home Page: {scrollX} --- {scrollY}</h1>); });const About = memo(() => {const [scrollX, scrollY] = useScrollPosition();console.log("About", scrollX, scrollY);return (<h1>About Page: {scrollX} --- {scrollY}</h1>); }); export default memo(function App() {return (<div className="app"><h1>App Component</h1><Home /><About /></div>); });
-
localStorage数据存储
封装
useLocalStorage自定义Hook:import { useEffect, useState } from "react";function useLocalStorage(key) {const [data, setData] = useState(() => {const item = localStorage.getItem(key);if (!item) return "";return JSON.parse(item);});useEffect(() => {localStorage.setItem(key, JSON.stringify(data));}, [data]);return [data, setData]; } export default useLocalStorage;通过
useLocalStorage来实现localStorage数据的自动化存储,并进行复用。即,一旦需要本地存储的值发生变化,便对localStorage进行对应的更新:import React, { memo, useEffect, useState } from "react"; import "./style.css"; import { useLocalStorage } from "./hooks";export default memo(function App() {// 通过key,直接从localStorage获取数据const [token, setToken] = useLocalStorage("token");function setTokenHandle() {setToken("new token");}const [avatarUrl, setAvatarUrl] = useLocalStorage("avatarUrl");function setAvatarUrlHandle() {setAvatarUrl("new url");}return (<div className="app"><h1>App Component</h1><h1>token:{token}</h1><button onClick={setTokenHandle}>设置token</button><h1>Avatar:{avatarUrl}</h1><button onClick={setAvatarUrlHandle}>设置avatarUrl</button></div>); });
相关文章:
【前端知识】React 基础巩固(四十六)——自定义Hook的应用
React 基础巩固(四十六)——自定义Hook的应用 一、自定义Hook的应用 自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上而言,它并不算React的特性。 实现组件创建/销毁时打印日志 import React, { memo, useEffect, useState } from "react…...
Swish - Mac 触控板手势窗口管理工具[macOS]
Swish for Mac是一款Mac触控板增强工具,借助直观的两指轻扫,捏合,轻击和按住手势,就可以从触控板上控制窗口和应用程序。 Swish for Mac又不仅仅只是一个窗口管理器,Swish具有28个易于使用的标题栏,停靠栏…...
【雕爷学编程】MicroPython动手做(31)——物联网之Easy IoT 2
1、物联网的诞生 美国计算机巨头微软(Microsoft)创办人、世界首富比尔盖茨,在1995年出版的《未来之路》一书中,提及“物物互联”。1998年麻省理工学院提出,当时被称作EPC系统的物联网构想。2005年11月,国际电信联盟发布《ITU互联网…...
C# 简单模拟 程序内部 消息订阅发布功能
文章目录 前言模拟消息订阅发布使用注意事项 前言 我想做个简单的消息发布订阅功能,但是发现好像没有现成的工具类。要么就是Mqtt这种消息订阅发布。但是我只想程序内部进行消息订阅发布,进行程序的解耦。那没办法了,只能自己上了 模拟消息…...
第六章 支持向量机
文章目录 支持向量机间隔和支持向量对偶问题问题推导SMO 核函数实验 支持向量机 ⽀持向量机(Support Vector Machines,SVM) 优点:泛化错误率低,计算开销不⼤,结果易解释。缺点:对参数调节和核…...
Docker基本操作之删除容器Container和删除镜像IMAGE
一、删除容器Container语法 docker rm [OPTIONS] CONTAINER [CONTAINER...]OPTIONS参数说明: -f :通过 SIGKILL 信号强制删除一个运行中的容器。【注意是正在运行的容器实例】-l :移除容器间的网络连接,而非容器本身。-v :删除与容器关联的卷。即删除容…...
vue 3.0 + element-ui MessageBox弹出框的 让文本框显示文字 placeholder
inputPlaceholder:请填写理由, 方法实现如下: this.$prompt(, 是否确认?, { confirmButtonText: 确定, cancelButtonText: 取消, inputPlaceholder:请填写理由, }).then(({ value }) > { if(value null || value ""){ Message({message: 请填…...
QT生成可执行文件的步骤
QT生成可执行文件的步骤 第一步:debug为release,然后进行编译 第二步:添加QT生成必要的库 首先,建立一个新的文件夹,然后将Release中的可执行文件拷贝到新的文件夹中 然后,在新建文件夹中生成必要的库 …...
一分钟学会JS获取当前年近五年的年份
先看效果图 上代码: 1、HTML <div><el-date-pickerv-model"queryYearXmgk.startYear"format"yyyy"value-format"yyyy"type"year"placeholder"开始"clearable:picker-options"pickerStartAuditYe…...
14 springboot项目——首页跳转实现
templates里的静态资源无法访问,需要写mvc的配置类或者改application.xml配置文件实现首页访问。这两个方式用其中一种即可,否则会冲突。 14.1 首页跳转方式一 创建配置类,在config包中创建一个mvc的配置类: package jiang.com.s…...
IL汇编语言读取控制台输入和转换为整数
新建一个testcvt.il; .assembly extern mscorlib {}.assembly Test{.ver 1:0:1:0}.module test.exe.method static void main() cil managed{.maxstack 1.entrypointldstr "\n请输入一个数字:"call void [mscorlib]System.Console::Write(string)call st…...
什么是跨链 DeFi?
跨链 DeFi 是指存在于多个不同区块链生态系统之间的金融应用程序生态系统,可以在彼此之间无缝交换数据和通证。 Web3 生态系统已经变得多链化,存在于数百个区块链、二层网络、应用链和其他环境的去中心化应用繁荣发展。虽然多样化的区块链生态系统的推出…...
Linux下C/C++的gdb工具与Python的pdb工具常见用法之对比
1、gdb和pdb分别是什么? 1.1、gdb GDB(GNU Debugger)是一个功能强大的命令行调试工具,由GNU项目开发,用于调试C、C等编程语言的程序。它在多个操作系统中都可以使用,包括Linux、MacOS和Windows࿰…...
从入门到专业:探索Python中的判断与循环技巧!
文章目录 判断语句布尔类型和比较运算符if语句的基本格式练习案例:成年人判断if else语句if elif else语句判断语句的嵌套案例:猜数字 循环语句while循环的基础语法while循环的基础案例while循环的嵌套应用补充:print输出不换行&\tfor循环…...
mqtt、tcp、http的区别
文章目录 一、MQTT(Message Queuing Telemetry Transport)1、类型2、用途 二、TCP(Transmission Control Protocol)1、类型2、用途 三、HTTP(Hypertext Transfer Protocol)1、类型2、用途 四、主要区别1、类…...
边写代码边学习之RNN
1. 什么是 RNN 循环神经网络(Recurrent Neural Network,RNN)是一种以序列数据为输入来进行建模的深度学习模型,它是 NLP 中最常用的模型。其结构如下图: x是输入,h是隐层单元,o为输出ÿ…...
在linux调试进程PID的方法
当我们谈论调试 PID(进程标识符)时,我们通常是指诊断和解决与操作系统中的特定进程相关的问题。有许多工具和方法可用于调试 PID,以下是一些常见的方法: 1. 使用ps命令 ps命令是最基本的调试工具,用于查看…...
【并发编程】线程安全的栈容器
std::stack容器的接口包括 empty(), size(), top(), push(), pop()等。 问题 其原接口在多线程的情况下,会持续很多问题。 例如,在std::stack容器的接口中,在多线程下应用时,empty()和size()的结果是不可信的。因为尽管在某线程…...
ES嵌套查询和普通查询的高亮显示区别
在 Elasticsearch 中,高亮显示是一种强大的搜索结果可视化工具,它可以帮助我们快速识别匹配的关键字或短语。在ES中,我们可以使用两种不同的查询方式来实现高亮显示:嵌套查询和普通查询。本文探讨这两种查询方式的高亮显示区别以及…...
Greenplum集群部署
一,安装说明 1.1环境说明 *名称**版本*操作系统CentOS 7.6 64bitgreenplumgreenplum-db-6.10.1-rhel7-x86_64.rpm1.2集群介绍 IPhostname集群节点10.240.3.244gpmastermaster10.240.3.245gpsegment1segment10.240.3.246gpsegment2segment二,安装环境准备 2.1 修改各节点名称…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
Cursor实现用excel数据填充word模版的方法
cursor主页:https://www.cursor.com/ 任务目标:把excel格式的数据里的单元格,按照某一个固定模版填充到word中 文章目录 注意事项逐步生成程序1. 确定格式2. 调试程序 注意事项 直接给一个excel文件和最终呈现的word文件的示例,…...
在rocky linux 9.5上在线安装 docker
前面是指南,后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...
CentOS下的分布式内存计算Spark环境部署
一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架,相比 MapReduce 具有以下核心优势: 内存计算:数据可常驻内存,迭代计算性能提升 10-100 倍(文档段落:3-79…...
微信小程序 - 手机震动
一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注:文档 https://developers.weixin.qq…...
将对透视变换后的图像使用Otsu进行阈值化,来分离黑色和白色像素。这句话中的Otsu是什么意思?
Otsu 是一种自动阈值化方法,用于将图像分割为前景和背景。它通过最小化图像的类内方差或等价地最大化类间方差来选择最佳阈值。这种方法特别适用于图像的二值化处理,能够自动确定一个阈值,将图像中的像素分为黑色和白色两类。 Otsu 方法的原…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
ElasticSearch搜索引擎之倒排索引及其底层算法
文章目录 一、搜索引擎1、什么是搜索引擎?2、搜索引擎的分类3、常用的搜索引擎4、搜索引擎的特点二、倒排索引1、简介2、为什么倒排索引不用B+树1.创建时间长,文件大。2.其次,树深,IO次数可怕。3.索引可能会失效。4.精准度差。三. 倒排索引四、算法1、Term Index的算法2、 …...
AI,如何重构理解、匹配与决策?
AI 时代,我们如何理解消费? 作者|王彬 封面|Unplash 人们通过信息理解世界。 曾几何时,PC 与移动互联网重塑了人们的购物路径:信息变得唾手可得,商品决策变得高度依赖内容。 但 AI 时代的来…...
