【前端知识】React 基础巩固(四十六)——自定义Hook的应用

React 基础巩固(四十六)——自定义Hook的应用

一、自定义Hook的应用

自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上而言,它并不算React的特性。

  1. 实现组件创建/销毁时打印日志

    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>);
    });

    image-20230802004528738

  2. 实现Context共享

    封装TokenContextUserContext 两个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>);
    });

    image-20230802010608705

  3. 实现获取滚动位置

    封装滚动监听事件:

    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>);
    });

    image-20230802011725567

  4. 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>);
    });

    image-20230802014858739

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/20060.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【图像分类】CNN+Transformer结合系列.2

介绍几篇利用CNNTransformer实现图像分类的论文&#xff1a;CMT&#xff08;CVPR2022&#xff09;&#xff0c;MaxViT(ECCV2022)&#xff0c;MaxViT&#xff08;ECCV2022&#xff09;&#xff0c;MPViT&#xff08;CVPR2022&#xff09;。主要是说明Transformer的局限性&#x…

Vue+Nodejs+Express+Minio 实现本地图片上传

安装Minio,Minio server和Minio client都要下载可以自定义安装目录 安装完成之后,可以将minio配置成环境变量方便使用 配置了环境变量启动命令式 minio server start,默认账号密码minioadmin和minioadmin,点击9000端口的这个链接,即可访问客户端 nodejs连接Minio,简易服务进…

顺序表、链表刷题指南(力扣OJ)

目录 前言 题目一&#xff1a;删除有序数组中的重复项 思路&#xff1a; 题解&#xff1a; 题目二&#xff1a;合并两个有序数组 思路&#xff1a; 分析&#xff1a; 题解&#xff1a; 题目三&#xff1a;反转链表 思路&#xff1a; 分析&#xff1a; 题解&#xff1a; 题目四&…

springboot自定义错误消息

为了提供自定义错误消息提示&#xff0c;springboot在resources目录下&#xff0c;有一个文件ValidationMessages.properties 用于存储 验证错误的消息提示&#xff1a; 比如&#xff1a; 这样一个ValidationMessage.properties username.notempty用户名不能为空 username.len…

如何压缩高清PDF文件大小?将PDF文件压缩到最小的三个方法

PDF格式是一种非常常用的文档格式&#xff0c;但是有时候我们需要将PDF文件压缩为更小的大小以便于传输和存储。在本文中&#xff0c;我们将介绍三种PDF压缩的方法&#xff0c;包括在线PDF压缩、利用软件PDF压缩以及使用WPS缩小pdf。 首先&#xff0c;在线PDF压缩是最常用的方…

华云安参编的《云原生安全配置基线规范》正式发布

由中国信息通信研究院&#xff08;以下简称“中国信通院”&#xff09;、中国通信标准化协会主办的第十届可信云大会云原生安全分论坛于7月26日在北京国际会议中心成功召开。作为大会上展示的成果之一&#xff0c;由中国信通院联合行业领先企业共同编写的《云原生安全配置基线规…

寒假作业(蓝桥杯2016年省赛C++A组第6题 )

题目&#xff1a; 注&#xff1a;蓝桥杯2016年省赛CA组第6题 请填写表示方案数目的整数。 题解&#xff1a; 由题可知这是一道全排列问题&#xff0c;因此我们可以使用c的next_permutation函数对于1-13的数字进行全排列即可&#xff0c;并每次排列判断是否满足题意。 注意…

无边界野望:高通也有痛点?

外界给予高通的称呼无非是性价屠夫&#xff0c;因为即可“拳打”联发科&#xff0c;又能四度包下上海ChinaJoy展馆做游戏技术支持的王者&#xff0c;对高通来说它的路是无边界的&#xff0c;也是跨界之路上前行的“诗和远方”。 这里&#xff0c;既有生成式AI在终端侧布局、与…

React之组件的生命周期

React之组件的生命周期 一、概述二、整体说明三、挂载阶段四、更新阶段五、卸载阶段 一、概述 生命周期:一个事务从创建到最后消亡经历的整个过程组件的生命周期&#xff1a;组件从被创建到挂载到页面中运行&#xff0c;再到组件不用时卸载的过程意义&#xff1a;理解组件的生…

使用IPSEC VPN 在有防火墙的场景和有NAT转换的场景下实现隧道通信实验

目录 一、在有防火墙的场景 1、为所有设备配置对应ip地址&#xff1a; 2、进入两个防火墙实现公网互通 3、测试公网是否互通 4、进入SW1配置IPSEC VPN 5、进入SW2配置IPSEC VPN 6、配置策略方向ESP的流量 7、尝试使用PC1访问PC2 二、在有NAT地址转换的场景 1、为新增加…

视频号将不支持添加企业微信:私域流量受阻

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 以前大家一直嚷嚷着说微信视频号企业微信私域流量神器&#xff0c;这下好了&#xff0c;从今日起这个功能没了&#xff0c;以后新的视频号不能绑定企业微信了&#xff0c;但老视频号还可以。 昨天…

招投标系统简介 招投标系统源码 java招投标系统 招投标系统功能设计

&#xfeff;功能模块&#xff1a; 待办消息&#xff0c;招标公告&#xff0c;中标公告&#xff0c;信息发布 描述&#xff1a; 全过程数字化采购管理&#xff0c;打造从供应商管理到采购招投标、采购合同、采购执行的全过程数字化管理。通供应商门户具备内外协同的能力&…

【数据结构】二叉树、二叉搜索树、平衡二叉树、红黑树、B树、B+树

概述 二叉树&#xff08;Binary Tree&#xff09;&#xff1a;每个节点最多有两个子节点&#xff08;左子节点和右子节点&#xff09;&#xff0c;没有限制节点的顺序。特点是简单直观&#xff0c;易于实现&#xff0c;但查找效率较低。 二叉搜索树&#xff08;Binary Search…

烘焙小程序蛋糕店烘焙店源码点心店小程序源码

本系统开发使用JAVA技术栈开发 使用uniapp技术栈 支持微信小程序 &#xff0c;对接打印机&#xff0c;对接第三方同城跑腿平台 用户端使用&#xff1a;uniapp 管理端使用&#xff1a;vueelementui 后台服务使用&#xff1a;springbootjpa

Java版本工程行业管理系统源码-专业的工程管理软件-提供一站式服务 em

​ 工程项目管理软件&#xff08;工程项目管理系统&#xff09;对建设工程项目管理组织建设、项目策划决策、规划设计、施工建设到竣工交付、总结评估、运维运营&#xff0c;全过程、全方位的对项目进行综合管理 工程项目各模块及其功能点清单 一、系统管理 1、数据字典&#…

不同语言操作符的优先级

看到标题&#xff0c;可能会心生疑惑: 这么基础且重要的操作&#xff0c;不同语言不应该是一致的吗&#xff1f; 并不一定&#xff0c;比如对于右移运算和加法运算&#xff0c;Go就与其他多数语言表现得不一致&#xff1a; Go: package mainimport "fmt"func main() …

Vault数据备份恢复-MySQL

前言 Vault提供了可靠的功能来保护数据库和其他关键数据。 对于MySQL数据库,Vault提供了一个易于使用的解决方案,可以自动创建和管理定期备份,并支持从备份中快速恢复数据。本文将介绍Vault后端存储MySQL的备份恢复,包括如何设置Vault、如何进行数据备份和还原、如何保护…

iOS——Block two

Block 的实质究竟是什么呢&#xff1f;类型&#xff1f;变量&#xff1f;还是什么黑科技&#xff1f; Blocks 是 带有局部变量的匿名函数 Blocks 由 OC 转 C 源码方法 在项目中添加 blocks.m 文件&#xff0c;并写好 block 的相关代码。打开「终端」&#xff0c;执行 cd XX…

[C++]01.基础,数据类型,运算符

01.基础,数据类型,运算符 一.C基础入门1.HelloWorld2.注释3.变量4.常量5.关键字6.命名规则 二.数据类型1.整形2.sizeof关键字3.浮点型4.字符型5.转义字符6.字符串型7.布尔类型8.数据的输入 三.运算符1.算数运算符2.赋值运算符3.比较运算符4.逻辑运算符 一.C基础入门 1.HelloWo…

webshell详解

Webshell详解 一、 Webshell 介绍二 、 基础常见webshell案例 一、 Webshell 介绍 概念 webshell就是以asp、php、jsp或者cgi等网页文件形式存在的一种命令执行环境&#xff0c;也可以将其称做为一种网页后门。黑客在入侵了一个网站后&#xff0c;通常会将asp或php后门文件与…