常用的 React Hooks 的介绍和示例
目录
- 1. useState
- 2. useEffect
- 3. useContext
- 4. useReducer
- 5. useCallback
- 6. useMemo
- 7. useRef
- 8. useImperativeHandle
- 9. useLayoutEffect
- 10. useDebugValue
常用的 React Hooks 的介绍和示例:
1. useState
useState 是一个用于在函数组件中添加状态的 Hook。
import React, { useState } from 'react';function Example() {const [count, setCount] = useState(0); // 初始化状态return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
2. useEffect
useEffect 是一个用于在函数组件中执行副作用(如数据获取、订阅或手动更改 DOM)的 Hook。
import React, { useState, useEffect } from 'react';function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;});return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
3. useContext
useContext 是一个用于在函数组件中访问 React Context 的 Hook。
import React, { useContext } from 'react';const MyContext = React.createContext(null);function Example() {const value = useContext(MyContext);return <div>{value}</div>;
}
4. useReducer
useReducer 是一个用于在函数组件中使用更复杂的状态逻辑的 Hook。
import React, { useReducer } from 'react';function reducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:throw new Error();}
}function Example() {const [state, dispatch] = useReducer(reducer, { count: 0 });return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);
}
5. useCallback
useCallback 是一个用于缓存函数的 Hook,以避免不必要的重新渲染。
import React, { useState, useCallback } from 'react';function Example() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return (<div><p>You clicked {count} times</p><button onClick={handleClick}>Click me</button></div>);
}
6. useMemo
useMemo 是一个用于缓存计算值的 Hook,以避免不必要的计算。
import React, { useState, useMemo } from 'react';function Example() {const [count, setCount] = useState(0);const memoizedValue = useMemo(() => {return count * 2;}, [count]);return (<div><p>Count: {count}</p><p>Memoized Value: {memoizedValue}</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
7. useRef
useRef 是一个用于在函数组件中访问 DOM 元素或存储可变值的 Hook。
import React, { useRef } from 'react';function Example() {const inputRef = useRef(null);const focusInput = () => {inputRef.current.focus();};return (<div><input ref={inputRef} /><button onClick={focusInput}>Focus Input</button></div>);
}
8. useImperativeHandle
useImperativeHandle 是一个用于自定义暴露给父组件的实例值的 Hook。
import React, { useRef, useImperativeHandle } from 'react';function FancyInput(props, ref) {const inputRef = useRef();useImperativeHandle(ref, () => ({focus: () => {inputRef.current.focus();}}));return <input ref={inputRef} />;
}FancyInput = React.forwardRef(FancyInput);function ParentComponent() {const inputRef = useRef();const focusInput = () => {inputRef.current.focus();};return (<div><FancyInput ref={inputRef} /><button onClick={focusInput}>Focus Input</button></div>);
}
9. useLayoutEffect
useLayoutEffect 是一个与 useEffect 类似的 Hook,但它会在所有 DOM 变更之后同步调用,而不是异步调用。
import React, { useLayoutEffect } from 'react';function Example() {useLayoutEffect(() => {console.log('This runs synchronously after all DOM changes');});return <div>Example</div>;
}
10. useDebugValue
useDebugValue 是一个用于在 React DevTools 中显示自定义 Hook 的调试值的 Hook。
import React, { useState, useDebugValue } from 'react';function useCustomHook(initialValue) {const [value, setValue] = useState(initialValue);useDebugValue(`Current value: ${value}`);return [value, setValue];
}function Example() {const [count, setCount] = useCustomHook(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}
相关文章:
常用的 React Hooks 的介绍和示例
目录 1. useState2. useEffect3. useContext4. useReducer5. useCallback6. useMemo7. useRef8. useImperativeHandle9. useLayoutEffect10. useDebugValue 常用的 React Hooks 的介绍和示例: 1. useState useState 是一个用于在函数组件中添加状态的 Hook。 impo…...
ChatGLM-6B模型
ChatGLM-6B 是由 清华大学人工智能研究院(THU AI) 和 智源研究院(BAAI) 开发的一款中文对话生成大语言模型。它是ChatGLM系列的一个版本,其核心特点是基于GLM(General Language Model)架构&…...
编译安装php
前置准备 这里的可能不全,每个人安装的模块不一致,依赖也不不相同,按实际情况调整 yum install libxml2 -y yum install libxml2-devel -y yum install openssl-devel -y yum install sqlite-devel -y yum install libcurl-devel -yyum ins…...
【JavaEE进阶】Spring MVC(3)
欢迎关注个人主页:逸狼 创造不易,可以点点赞吗 如有错误,欢迎指出~ 返回响应 返回静态页面 //RestController Controller RequestMapping("/response") public class ResponseController {RequestMapping("/returnHtmlPage&…...
30 款 Windows 和 Mac 下的复制粘贴软件对比
在日常电脑操作中,复制粘贴是极为高频的操作,一款好用的复制粘贴软件能极大提升工作效率。以下为你详细介绍 30 款 Windows 和 Mac 下的复制粘贴软件,并对比它们的优缺点,同时附上官网下载地址,方便大家获取软件。 Pa…...
【LLAMA】羊驼从LLAMA1到LLAMA3梳理
every blog every motto: Although the world is full of suffering, it is full also of the overcoming of it 0. 前言 LLAMA 1到3梳理 1. LLAMA 1 论文: LLaMA: Open and Efficient Foundation Language Models 时间: 2023.02 1.1 前言…...
【OS安装与使用】part3-ubuntu安装Nvidia显卡驱动+CUDA 12.4
文章目录 一、待解决问题1.1 问题描述1.2 解决方法 二、方法详述2.1 必要说明2.2 应用步骤2.2.1 更改镜像源2.2.2 安装NVIDIA显卡驱动:nvidia-550(1)查询显卡ID(2)PCI ID Repository查询显卡型号(3…...
【蓝桥杯集训·每日一题2025】 AcWing 6123. 哞叫时间 python
6123. 哞叫时间 Week 1 2月18日 农夫约翰正在试图向埃尔茜描述他最喜欢的 USACO 竞赛,但她很难理解为什么他这么喜欢它。 他说「竞赛中我最喜欢的部分是贝茜说 『现在是哞哞时间』并在整个竞赛中一直哞哞叫」。 埃尔茜仍然不理解,所以农夫约翰将竞赛以…...
JAVA中常用类型
一、包装类 1.1 包装类简介 java是面向对象的语言,但是八大基本数据类型不符合面向对象的特征。因此为了弥补这种缺点,为这八中基本数据类型专门设计了八中符合面向面向对象的特征的类型,这八种具有面向对象特征的类型,就叫做包…...
【办公类-90-02】】20250215大班周计划四类活动的写法(分散运动、户外游戏、个别化综合)(基础列表采用读取WORD表格单元格数据,非采用切片组合)
背景需求: 做了中班的四类活动安排表,我顺便给大班做一套 【办公类-90-01】】20250213中班周计划四类活动的写法(分散运动、户外游戏、个别化(美工室图书吧探索室))-CSDN博客文章浏览阅读874次࿰…...
求矩阵对角线元素的最大值
求主对角线元素的最大值时,让指针指向A[N-1][N-1],指针以(N1)为单位递增,就可以指向对角线每个元素; 求次对角线元素的最大值时,让指针指向A[0][N-1],指针以(N-1)为单位递增,就可以指向副对角线…...
NoSQL之redis数据库
案例知识 关系与分关系型数据库 关系型数据库:Oracle,MySQL,SQL Server 非关系型数据库:Redis,MongDB Redis文件路径 配置文件:/etc/redis/6379.conf 日志文件:/var/log/redis_6379.log 数据文…...
【R语言】非参数检验
一、Mann-Whitney检验 在R语言中,Mann-Whitney U检验(也称为Wilcoxon秩和检验)用于比较两个独立样本的中位数是否存在显著差异。它是一种非参数检验,适用于数据不满足正态分布假设的情况。 1、独立样本 # 创建两个独立样本数据…...
【力扣Hot 100】栈
1. 有效的括号 给定一个只包括 (,),{,},[,] 的字符串 s ,判断字符串是否有效。 有效字符串需满足: 左括号必须用相同类型的右括号闭合。左括号必须以正确的顺序闭合。每个右括号都有一个对应…...
HTTP 与 HTTPS:协议详解与对比
文章目录 概要 一. HTTP 协议 1.1 概述 1.2 工作原理 1.3 请求方法 1.4 状态码 二. HTTPS 协议 2.1 概述 2.2 工作原理 2.3 SSL/TLS 协议 2.4 证书 三. HTTP 与 HTTPS 的区别 四. 应用场景 4.1 HTTP 的应用场景 4.2 HTTPS 的应用场景 概要 HTTP(Hy…...
C++编程语言:抽象机制:模板和层级结构(Bjarne Stroustrup)
目录 27.1 引言(Introduction) 27.2 参数化和层级结构(Parameterization and Hierarchy) 27.2.1 生成类型(Generated Types) 27.2.2 模板转换(Template Conversions) 27.3 类模板层级结构(Hierarchies of Class Templates) 27.3.1 模板对比接口(Templates as Interf…...
建筑兔零基础自学python记录22|实战人脸识别项目——视频人脸识别(下)11
这次我们继续解读代码,我们主要来看下面两个部分; 至于人脸识别成功的要点我们在最后总结~ 具体代码学习: #定义人脸名称 def name():#预学习照片存放位置path M:/python/workspace/PythonProject/face/imagePaths[os.path.join(path,f) f…...
在使用export default 导出时,使用的components属性的作用?
文章目录 析与思考回答 析与思考 在 Vue.js 中,使用 export default 导出组件时,通常会通过 components 选项将子组件也导出出来(其实是将子组件进行局部注册) 。这涉及到 Vue.js 组件的注册机制。为了更清晰地理解这个问题&…...
以太网交换基础(涵盖二层转发原理和MAC表的学习)
在当今的网络世界中,以太网交换技术是局域网(LAN)的核心组成部分。无论是企业网络、学校网络还是家庭网络,以太网交换机都扮演着至关重要的角色。本文将详细介绍以太网交换的基础知识,包括以太网协议、帧格式、MAC地址…...
Vue 实现通过URL浏览器本地下载 PDF 和 图片
1、代码实现如下: 根据自己场景判断 PDF 和 图片,下载功能可按下面代码逻辑执行 const downloadFile async (item: any) > {try {let blobUrl: any;// PDF本地下载if (item.format pdf) {const response await fetch(item.url); // URL传递进入i…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
8k长序列建模,蛋白质语言模型Prot42仅利用目标蛋白序列即可生成高亲和力结合剂
蛋白质结合剂(如抗体、抑制肽)在疾病诊断、成像分析及靶向药物递送等关键场景中发挥着不可替代的作用。传统上,高特异性蛋白质结合剂的开发高度依赖噬菌体展示、定向进化等实验技术,但这类方法普遍面临资源消耗巨大、研发周期冗长…...
聊聊 Pulsar:Producer 源码解析
一、前言 Apache Pulsar 是一个企业级的开源分布式消息传递平台,以其高性能、可扩展性和存储计算分离架构在消息队列和流处理领域独树一帜。在 Pulsar 的核心架构中,Producer(生产者) 是连接客户端应用与消息队列的第一步。生产者…...
解锁数据库简洁之道:FastAPI与SQLModel实战指南
在构建现代Web应用程序时,与数据库的交互无疑是核心环节。虽然传统的数据库操作方式(如直接编写SQL语句与psycopg2交互)赋予了我们精细的控制权,但在面对日益复杂的业务逻辑和快速迭代的需求时,这种方式的开发效率和可…...
sqlserver 根据指定字符 解析拼接字符串
DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...
linux 下常用变更-8
1、删除普通用户 查询用户初始UID和GIDls -l /home/ ###家目录中查看UID cat /etc/group ###此文件查看GID删除用户1.编辑文件 /etc/passwd 找到对应的行,YW343:x:0:0::/home/YW343:/bin/bash 2.将标红的位置修改为用户对应初始UID和GID: YW3…...
JDK 17 新特性
#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持,不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的ÿ…...
均衡后的SNRSINR
本文主要摘自参考文献中的前两篇,相关文献中经常会出现MIMO检测后的SINR不过一直没有找到相关数学推到过程,其中文献[1]中给出了相关原理在此仅做记录。 1. 系统模型 复信道模型 n t n_t nt 根发送天线, n r n_r nr 根接收天线的 MIMO 系…...
智能AI电话机器人系统的识别能力现状与发展水平
一、引言 随着人工智能技术的飞速发展,AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术,在客户服务、营销推广、信息查询等领域发挥着越来越重要…...
人机融合智能 | “人智交互”跨学科新领域
本文系统地提出基于“以人为中心AI(HCAI)”理念的人-人工智能交互(人智交互)这一跨学科新领域及框架,定义人智交互领域的理念、基本理论和关键问题、方法、开发流程和参与团队等,阐述提出人智交互新领域的意义。然后,提出人智交互研究的三种新范式取向以及它们的意义。最后,总结…...
