常用的 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…...
ubuntu搭建nfs服务centos挂载访问
在Ubuntu上设置NFS服务器 在Ubuntu上,你可以使用apt包管理器来安装NFS服务器。打开终端并运行: sudo apt update sudo apt install nfs-kernel-server创建共享目录 创建一个目录用于共享,例如/shared: sudo mkdir /shared sud…...
模型参数、模型存储精度、参数与显存
模型参数量衡量单位 M:百万(Million) B:十亿(Billion) 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的,但是一个参数所表示多少字节不一定,需要看这个参数以什么…...
DAY 47
三、通道注意力 3.1 通道注意力的定义 # 新增:通道注意力模块(SE模块) class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...
解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错
出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上,所以报错,到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本,cu、torch、cp 的版本一定要对…...
前端开发面试题总结-JavaScript篇(一)
文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包(Closure)?闭包有什么应用场景和潜在问题?2.解释 JavaScript 的作用域链(Scope Chain) 二、原型与继承3.原型链是什么?如何实现继承&a…...
数据库分批入库
今天在工作中,遇到一个问题,就是分批查询的时候,由于批次过大导致出现了一些问题,一下是问题描述和解决方案: 示例: // 假设已有数据列表 dataList 和 PreparedStatement pstmt int batchSize 1000; // …...
代理篇12|深入理解 Vite中的Proxy接口代理配置
在前端开发中,常常会遇到 跨域请求接口 的情况。为了解决这个问题,Vite 和 Webpack 都提供了 proxy 代理功能,用于将本地开发请求转发到后端服务器。 什么是代理(proxy)? 代理是在开发过程中,前端项目通过开发服务器,将指定的请求“转发”到真实的后端服务器,从而绕…...
Java + Spring Boot + Mybatis 实现批量插入
在 Java 中使用 Spring Boot 和 MyBatis 实现批量插入可以通过以下步骤完成。这里提供两种常用方法:使用 MyBatis 的 <foreach> 标签和批处理模式(ExecutorType.BATCH)。 方法一:使用 XML 的 <foreach> 标签ÿ…...
CRMEB 中 PHP 短信扩展开发:涵盖一号通、阿里云、腾讯云、创蓝
目前已有一号通短信、阿里云短信、腾讯云短信扩展 扩展入口文件 文件目录 crmeb\services\sms\Sms.php 默认驱动类型为:一号通 namespace crmeb\services\sms;use crmeb\basic\BaseManager; use crmeb\services\AccessTokenServeService; use crmeb\services\sms\…...
Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...
