常用的 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…...
Vim 调用外部命令学习笔记
Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...
idea大量爆红问题解决
问题描述 在学习和工作中,idea是程序员不可缺少的一个工具,但是突然在有些时候就会出现大量爆红的问题,发现无法跳转,无论是关机重启或者是替换root都无法解决 就是如上所展示的问题,但是程序依然可以启动。 问题解决…...
C++实现分布式网络通信框架RPC(3)--rpc调用端
目录 一、前言 二、UserServiceRpc_Stub 三、 CallMethod方法的重写 头文件 实现 四、rpc调用端的调用 实现 五、 google::protobuf::RpcController *controller 头文件 实现 六、总结 一、前言 在前边的文章中,我们已经大致实现了rpc服务端的各项功能代…...
深入剖析AI大模型:大模型时代的 Prompt 工程全解析
今天聊的内容,我认为是AI开发里面非常重要的内容。它在AI开发里无处不在,当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗",或者让翻译模型 "将这段合同翻译成商务日语" 时,输入的这句话就是 Prompt。…...
QMC5883L的驱动
简介 本篇文章的代码已经上传到了github上面,开源代码 作为一个电子罗盘模块,我们可以通过I2C从中获取偏航角yaw,相对于六轴陀螺仪的yaw,qmc5883l几乎不会零飘并且成本较低。 参考资料 QMC5883L磁场传感器驱动 QMC5883L磁力计…...
线程同步:确保多线程程序的安全与高效!
全文目录: 开篇语前序前言第一部分:线程同步的概念与问题1.1 线程同步的概念1.2 线程同步的问题1.3 线程同步的解决方案 第二部分:synchronized关键字的使用2.1 使用 synchronized修饰方法2.2 使用 synchronized修饰代码块 第三部分ÿ…...
大模型多显卡多服务器并行计算方法与实践指南
一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...
Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?
Pod IP 的本质与特性 Pod IP 的定位 纯端点地址:Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址(如 10.244.1.2)无特殊名称:在 Kubernetes 中,它通常被称为 “Pod IP” 或 “容器 IP”生命周期:与 Pod …...
tauri项目,如何在rust端读取电脑环境变量
如果想在前端通过调用来获取环境变量的值,可以通过标准的依赖: std::env::var(name).ok() 想在前端通过调用来获取,可以写一个command函数: #[tauri::command] pub fn get_env_var(name: String) -> Result<String, Stri…...
Vue 模板语句的数据来源
🧩 Vue 模板语句的数据来源:全方位解析 Vue 模板(<template> 部分)中的表达式、指令绑定(如 v-bind, v-on)和插值({{ }})都在一个特定的作用域内求值。这个作用域由当前 组件…...
