当前位置：首页 > news >正文

详细解读react框架中的hooks

news 来源：原创 2025/9/18 19:42:01

React Hooks 是 React 16.8 引入的一项革命性特性，它允许你在函数组件中使用状态(state)和其他 React 特性，而无需编写 class 组件。下面将详细解读 React Hooks 的核心概念、常用 Hooks 及其工作原理。

一、Hooks 的核心概念

1. 什么是 Hooks

Hooks 是特殊的函数，以"use"开头（如 useState, useEffect），让你能够"钩入" React 的状态和生命周期特性。

2. Hooks 的基本规则

只在最顶层调用 Hooks：不要在循环、条件或嵌套函数中调用 Hook
只在 React 函数组件或自定义 Hook 中调用 Hooks

二、常用内置 Hooks 详解

1. useState

const [state, setState] = useState(initialState);

用于在函数组件中添加局部状态
返回一个状态值和一个更新该状态的函数
参数可以是初始值或返回初始值的函数（惰性初始化）

示例：

function Counter() {const [count, setCount] = useState(0);return (<button onClick={() => setCount(count + 1)}>Clicked {count} times</button>);
}

2. useEffect

useEffect(() => {// 副作用逻辑return () => {// 清理函数（可选）};
}, [dependencies]);

用于处理副作用（数据获取、订阅、手动修改 DOM 等）
相当于 class 组件中的 componentDidMount, componentDidUpdate 和 componentWillUnmount 的组合
第二个参数是依赖数组，控制 effect 的执行时机

示例：

function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;return () => {// 清理工作};}, [count]); // 仅在 count 更改时更新
}

3. useContext

const value = useContext(MyContext);

用于订阅 React 的 Context 对象
接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值

示例：

const ThemeContext = React.createContext('light');function ThemedButton() {const theme = useContext(ThemeContext);return <button className={theme}>I am styled by theme context!</button>;
}

4. useReducer

const [state, dispatch] = useReducer(reducer, initialArg, init);

useState 的替代方案，适合复杂 state 逻辑
接收一个形如 (state, action) => newState 的 reducer 函数
返回当前 state 和配套的 dispatch 方法

示例：

function counterReducer(state, action) {switch (action.type) {case 'increment':return {count: state.count + 1};case 'decrement':return {count: state.count - 1};default:throw new Error();}
}function Counter() {const [state, dispatch] = useReducer(counterReducer, {count: 0});return (<>Count: {state.count}<button onClick={() => dispatch({type: 'increment'})}>+</button><button onClick={() => dispatch({type: 'decrement'})}>-</button></>);
}

5. useCallback

const memoizedCallback = useCallback(() => {doSomething(a, b);
}, [a, b]);

返回一个 memoized 回调函数
仅在依赖项改变时才会更新
用于优化子组件渲染，避免不必要的重新渲染

6. useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

返回一个 memoized 值
仅在依赖项改变时才会重新计算
用于性能优化，避免每次渲染都进行高开销计算

7. useRef

const refContainer = useRef(initialValue);

返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数
常用于访问 DOM 节点或存储可变值而不引起重新渲染

示例：

function TextInputWithFocusButton() {const inputEl = useRef(null);const onButtonClick = () => {inputEl.current.focus();};return (<><input ref={inputEl} type="text" /><button onClick={onButtonClick}>Focus the input</button></>);
}

三、Hooks 的工作原理

1. Hooks 的调用顺序

React 依赖于 Hooks 的调用顺序来正确关联状态和对应的 Hook。这就是为什么不能在条件或循环中调用 Hook。

2. Hooks 的实现机制

每个组件有一个"记忆单元格"列表（可以看作是一个数组）
每次调用 Hook 时，它都会读取当前的单元格（或初始化它），然后将指针移动到下一个
这就是为什么 Hook 的调用顺序必须一致

3. 自定义 Hook

可以创建自己的 Hook 来复用状态逻辑。自定义 Hook 是一个名称以"use"开头的 JavaScript 函数，它可以调用其他 Hook。

示例：

function useFriendStatus(friendID) {const [isOnline, setIsOnline] = useState(null);useEffect(() => {function handleStatusChange(status) {setIsOnline(status.isOnline);}ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange);return () => {ChatAPI.unsubscribeFromFriendStatus(friendID, handleStatusChange);};}, [friendID]);return isOnline;
}

四、Hooks 的优势

简化组件逻辑：解决了 class 组件中生命周期函数经常包含不相关的逻辑的问题
复用状态逻辑：通过自定义 Hook 可以轻松复用状态逻辑，无需高阶组件或 render props
更直观的代码：Hooks 让你根据代码的用途而非生命周期方法来组织代码
更小的打包体积：函数组件通常比 class 组件更轻量

五、Hooks 的最佳实践

按功能而非生命周期组织代码：将相关的逻辑放在同一个 useEffect 中
合理使用依赖数组：确保 useEffect 和 useCallback/useMemo 的依赖项完整且准确
避免过度优化：不要过早使用 useMemo 和 useCallback，先测量再优化
自定义 Hook 命名以"use"开头：这是 React 识别 Hook 的方式
考虑使用 eslint-plugin-react-hooks：帮助检测 Hook 规则的违反

详细解读react框架中的hooks

React Hooks 是 React 16.8 引入的一项革命性特性，它允许你在函数组件中使用状态(state)和其他 React 特性，而无需编写 class 组件。下面将详细解读 React Hooks 的核心概念、常用 Hooks 及其工作原理。一、Hooks 的核心概念 1. 什么是 Hooks Hooks …...

编程日记 2025/9/18 19:42:01

参考浙大胡浩基老师的课以及以下链接： https://blog.csdn.net/m0_74100344/article/details/139560508 https://blog.csdn.net/2301_78630677/article/details/132657023 https://blog.csdn.net/lsb2002/article/details/131338700 一、一些定义 T是倒置&…...

编程日记 2025/9/18 19:37:22

Java进阶版线程池（超详细）

线程池线程池工具类 Executors Executors 是 Java 提供的一个工具类，它包含了多个静态方法，能够方便地创建不同类型的线程池。 newFixedThreadPool 创建一个固定大小的线程池，线程池中的线程数量固定，当有新任务提…...

编程日记 2025/9/18 19:41:59

场外期权只适合上涨行情吗？

场外期权与直接进行期货市场操作相比，场外期权让我们有了更多的选择空间。”目前期权市场有了更多合适的风险管理模式，场外期权衍生品工具与其需求不谋而合，适合做以小博大，做各种对冲大盘下跌风险等等策略，下文为大家…...

编程日记 2025/9/18 19:39:48

echarts图表相关

echarts图表相关 echarts官网折线图实际开发场景一： echarts官网 echarts官网折线图实际开发场景一： 只有一条折线，一半实线，一半虚线。 option {tooltip: {trigger: "axis",formatter: (params: any) > {const …...

编程日记 2025/9/18 12:26:36

【操作系统（Linux）】——多线程对共享变量访问的同步与互斥

一、多线程对共享变量的非互斥访问我们将要做的：构造多线程共享变量竞争的案例，并分析现象发生的原因，进而思考解决方式。案例源代码： #include <stdio.h> #include <stdlib.h> #include <pthread.h> #inc…...

编程日记 2025/9/18 19:41:00

deeplabv3+街景图片语义分割，无需训练模型，看不懂也没有影响，直接使用，cityscapes数据集_16

目录 1、下载链接1.1、CSDN链接，含权重文件直接使用，建议直接下这个，还不限速。1.2 Github链接： 2、下载代码，下载预训练好的权重3、预测代码4、像素提取，或者说类别提取5、文档部分内容截图6、其他数据处理…...

编程日记 2025/9/18 19:38:50

[前端]从人体结构看网页三要素：HTML、CSS 与 JavaScript

目录一、HTML：网页的 “骨架” 二、CSS：网页的 “血肉” 三、JavaScript：网页的 “神经系统” 四、三者协同构建精彩网页在互联网的浩瀚海洋中，网页是我们与世界交互的重要窗口。一个精彩的网页背后，离不开 HTML、CSS 和 JavaScript 这三位 “幕后英雄”。有趣的是，…...

编程日记 2025/9/18 19:38:27

【Leetcode】3375. 使数组的值全部为 K 的最少操作次数

文章目录题目思路代码复杂度分析时间复杂度空间复杂度结果总结题目题目链接🔗 给你一个整数数组 nums 和一个整数 k 。如果一个数组中所有严格大于 h 的整数值都相等 ，那么我们称整数 h 是合法的。比方说，如果 nums [10, 8, 10…...

编程日记 2025/9/18 19:42:00

封装uniapp request promise化

uniapp request 封装一、封装方法1. 使用 promis 封装 request2. 封装 api 在 api.js3.在要请求的页面调用 api 一、封装方法 1. 使用 promis 封装 request const BASE_URL 你的url接口 //比如 http://198.12.3.3/pzexport function request(config {}){let {url,dat…...

编程日记 2025/9/18 15:51:03

架构演进成熟度校验体系构建

架构演进成熟度校验体系构建 ——基于电商价格服务Checklist的图形化实践指南一、成熟度校验全景视图 #mermaid-svg-tXchQ6nY7QzNUrL1 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-tXchQ6nY7QzNUrL1 .error-ico…...

编程日记 2025/9/3 19:51:07

Llama 4全面评测：官方数据亮眼，社区测试显不足之处

引言 2025年4月，Meta正式发布了全新的Llama 4系列模型，这标志着Llama生态系统进入了一个全新的时代。Llama 4不仅是Meta首个原生多模态模型，还采用了混合专家(MoE)架构，并提供了前所未有的上下文长度支持。本文将详细介绍Llama 4…...

编程日记 2025/9/18 19:36:14

kotlin 多个fragment beginTransaction容器添加使用

在Kotlin中如何使用Fragment的beginTransaction来添加多个Fragment到容器中。我需要先回顾一下Fragment的基本用法，然后考虑多个Fragment的情况。 FragmentTransaction的beginTransaction是用来开启一个事务，然后添加、替换或移除Fragment。通常&#x…...

编程日记 2025/9/18 6:29:20

(PTA) L2-011-L2-015

L2-012 关于堆的判断由于没有得到AC代码（1，3测试点错误）,这里先不做展示，等后续复盘的时候进行补充。 L2-011 玩转二叉树给定一棵二叉树的中序遍历和前序遍历，请你先将树做个镜面反转，再输出反转后的层序…...

编程日记 2025/9/18 19:41:01

管理Linux服务器的用户和组

用户/组命令符会展示当前用户名和主机名创建用户，同时创建同名组 useradd 用户名设置密码 passwd 用户名切换用户登录 su 用户名删除用户 userdel -r 用户名记录用户信息的文件 /etc/passwd 记录密码（密文）信息的文件 /etc/sh…...

编程日记 2025/9/18 19:35:41

奇安信驻场面试题

《网安面试指南》https://mp.weixin.qq.com/s/RIVYDmxI9g_TgGrpbdDKtA?token1860256701&langzh_CN 5000篇网安资料库https://mp.weixin.qq.com/s?__bizMzkwNjY1Mzc0Nw&mid2247486065&idx2&snb30ade8200e842743339d428f414475e&chksmc0e4732df793fa3bf39…...

编程日记 2025/9/14 21:50:19

Testbench设计

一、几个名词： 被仿真的文件叫DUT（Design under Test） 编写Testbench的目的验证设计有没问题。怎么写Testbench？ 四、Teshbench各个部分的写法： 外部信号就是外面连接的信号。...

编程日记 2025/9/17 22:36:47

使用IPython有哪些好处？

这里总结了50个使用IPython的好处，大大提升开发效率！ 什么是IPython？可能很多人已经在用，却不知道它到底是什么。根据维基百科的解释： IPython是一种基于Python的交互式解释器，提供了强大的编辑和交互功能…...

编程日记 2025/9/18 19:38:49

加油站小程序实战教程10开通会员

目录 1 修改用户登录逻辑2 创建变量3 调用API总结我们上一篇搭建了开通会员的界面，有了界面的时候就需要加入一些逻辑来控制界面显示。我们的逻辑是当用户打开我的页面的时候，在页面加载完毕后调用API看用户是否已经开通会员了，如果未开通就…...

编程日记 2025/9/10 17:24:28

NO.84十六届蓝桥杯备战|动态规划-路径类DP|矩阵的最小路径和|迷雾森林|过河卒|方格取数(C++)

路径类dp是线性dp的⼀种，它是在⼀个nm的矩阵中设置⼀个⾏⾛规则，研究从起点⾛到终点的⽅案数、最⼩路径和或者最⼤路径和等等的问题矩阵的最小路径和_牛客题霸_牛客网状态表⽰： dp[i][j]表⽰：到达[i, j]位置处，最⼩…...

编程日记 2025/9/18 19:41:00

WHAT - React 技术栈常用库/工具

目录基础类状态管理路由管理UI 组件库开发工具 / 辅助库测试相关表单和数据展示其它实用类代码重构应用迁移：PWA代码组织与架构建议（选项） 下面是一个 React 技术栈常用库/工具清单，按不同分类整理，涵盖开发、状态管理…...

编程日记 2025/9/18 19:41:01

FreeSWITCH的SIP配置

确认 FreeSWITCH 的 SIP 配置 FreeSWITCH 的 SIP 配置文件通常位于 /usr/local/freeswitch/conf/sip_profiles 目录下。默认情况下，FreeSWITCH 使用 internal.xml 和 external.xml 作为 SIP 配置文件。查看 internal.xml 配置编辑 /usr/local/freeswitch/conf/sip…...

编程日记 2025/9/18 19:40:45

Spark核心知识总结

一、Spark运行架构 （一）整体结构 Spark框架采用标准master - slave结构，Driver为master管理作业任务调度，Executor为slave负责实际执行任务。 （二）核心组件 1. Driver：执行Spark任务的main方法&…...

编程日记 2025/9/18 19:40:45

第1节：计算机视觉发展简史

计算机视觉与图像分类概述：计算机视觉发展简史计算机视觉（Computer Vision）作为人工智能领域的重要分支，是一门研究如何使机器"看"的科学，更具体地说，是指用摄影机和计算机代替人眼对目标进行识…...

编程日记 2025/9/18 17:53:42

2D 与 3D 连线效果全解析 | 从平面到立体

HT 是一个灵活多变的前端组件库，具备丰富的功能和效果，满足多种开发需求。让我们将其效果化整为零，逐一拆解具体案例，帮助你更好地理解其实现方案。在此篇文章中，让我们一起深入探讨 2D 与 3D 的连线效果是如何实现的…...

编程日记 2025/9/7 19:49:04

Django Cookies 实际项目示例

Django Cookies 实际项目示例推荐超级课程：本地离线DeepSeek AI方案部署实战教程【完全版】Docker快速入门到精通Kubernetes入门到大师通关课AWS云服务快速入门实战目录 Django Cookies 实际项目示例介绍什么是 Django Cookies？为什么要关心 Django Cookies？Django Cookie…...

编程日记 2025/9/18 19:38:49

【问题排查】SQLite安装失败

启动 Django 自带的开发服务器 python manage.py runserver出现如下报错： [rootiZ2zedudtf2cwzi9argky2Z myproject]# python manage.py runserver Watching for file changes with StatReloader Performing system checks...System check identified no issues (…...

编程日记 2025/9/18 19:35:40

stream流Collectors.toMap()，key值重复问题

文章目录一、问题二、问题示例三、原因四、解决方法4.1、方案一一、问题发现Collectors.toMap的一个坑，若key值重复的时候会抛异常。如： IllegalStateException: Duplicate key 男二、问题示例报错示例如下： import lombok.AllArgsC…...

编程日记 2025/9/18 19:39:49

STM32(基于标准库)

参考博客：江科大STM32笔记 Stm32外设一、GPIO 基础 GPIO位结构 I/O引脚的保护二极管是对输入电压进行限幅的上面的二极管接VDD, 3.3V,下面接VSS, 0V，当输入电压 >3.3V 那上方这个二极管就会导通，输入电压产生的电流就会大部分充入VD…...

编程日记 2025/9/18 19:39:49

OpenStack Yoga版安装笔记（十八）Self-service networks配置笔记

1、官方文档在OpenStack官方安装文档中，提供了两个网络配置选项： Option1：Provider networksOption2：Self-service networks 这两个选项并不冲突，可以在OpenStack环境中同时配置。在《OpenStack Yoga版安装笔记&…...

编程日记 2025/9/18 19:38:49

2025年黑龙江建筑安全员 C3 证考试题库练习题

黑龙江建筑安全员 C3 证考试题库练习题 1、消防控制室是设有火灾自动报警设备和消防设施控制设备，用于接收、显示、处理（ ），控制相关消防设施的专门处所2。 A. 安全信息 B. 设备信息 C. 通讯信号 D. 火灾报警信号答案&…...

编程日记 2025/9/8 4:05:00

JavaScript数据结构-Map的使用

在 JavaScript 中，Map 是 ES6 引入的一种新的数据结构，它类似于对象，也是键值对的集合，但 Map 的键可以是任意类型的值（对象、函数、基本类型等），而传统对象的键只能是字符串或 Symbol&#xff…...

编程日记 2025/9/18 16:55:19

LeetCode面试经典150题

目录力扣80. 删除有序数组中的重复项 II 代码解析力扣274. H 指数代码解析力扣151. 反转字符串中的单词解析代码力扣12. 整数转罗马数字解析代码力扣28. 找出字符串中第一个匹配项的下标解析代码1（暴力模拟） 解析代码2（K…...

编程日记 2025/9/12 19:18:52

mysql之等值连接8个实例

以下实例以常见的业务场景为例，使用 MySQL 语法，假设存在员工表（employees）、部门表（departments）、订单表（orders）、客户表（customers）等，来展示…...

编程日记 2025/9/17 2:27:42

C基础笔记_指针专题

一:C 和 C 偏爱使用指针的原因 1. 通过指针可以直接操作内存 C 和 C 是系统级编程语言，它们的设计目标之一是允许开发者直接与硬件交互并高效地管理资源。指针的本质：指针本质上是一个存储内存地址的变量，它让程序员可以直接访问和操作内…...

编程日记 2025/9/17 14:18:20

GPT-SoVITS Windows 配置与推理笔记（自用）

GPT-SoVITS Windows 配置与推理笔记（自用） 这是给自己留的备份，方便下次查。Windows 端配置和推理为主，代码为核心，直接干货。环境准备系统：Windows 10/11Python：3.9（别用别的版…...

编程日记 2025/9/18 5:11:10

【设计模式】面向对象开发学习OOPC

PLOOC-裸机思维 PLOOC OOPC精要——撩开“对象”的神秘面纱 C/C面向对象编程之封装-KK 面向过程，本质是“顺序，循环，分支”面向对象，本质是“继承，封装，多态”参考的书籍：《UMLOOPC嵌入式C语言…...

编程日记 2025/8/27 0:22:54

LVGL开发指南

一、主流ARM开发UI界面库主流ARM开发UI界面库的详细对比分析，从多个维度评估各库的适用场景： 1. 基础对比表特性LVGLQt for MCUEmbedded WizardTouchGFXemWin许可证MIT开源商业商业商业(STM32免费)商业RAM最小需求16KB512KB64KB256KB50KBFlash占用64KB+1MB+200KB+500KB+1…...

编程日记 2025/9/11 16:38:09

linux shell looop循环写法

在 Linux Shell 中编写loop循环的常见方法有以下几种，适用于持续执行任务或监控场景： 1. while true 循环（最常用） while true; do# 循环体内的命令echo "Running..."sleep 1 # 避免 CPU 占用过高 done 终止方式&…...

编程日记 2025/9/16 7:56:19

【力扣hot100题】（075）数据流的中位数

一开始只建立了一个优先队列，每次查询中位数时都要遍历一遍于是喜提时间超限，看了答案才恍然大悟原来还有这么聪明的办法。方法是建立两个优先队列，一个大根堆一个小根堆，大根堆记录较小的数，小根堆记录较大的数。 …...

编程日记 2025/9/6 9:47:45

蓝桥杯刷题总结 + 应赛技巧

当各位小伙伴们看到这篇文章的时候想必蓝桥杯也快开赛了，那么本篇文章博主就来总结一下一些蓝桥杯的应赛技巧，那么依旧先来走个流程那么接下来我们分成几个板块进行总结首先是一些基本语法编程语言的基本语法首先是数组，在存数据的时候…...

编程日记 2025/9/14 3:16:18

JetBrains Terminal 又发布新架构，Android Studio 将再次迎来新终端

不到一年的时间，JetBrains 又要对 Terminal 「大刀阔斧」，本次发布的新终端是重构后的全新的架构，而上一次终端大调整还是去年 8 月的 v2024.2 版本，并且在「Android Studio Ladybug | 2024.2.1」也被引入。不知道你们用不用内置…...

编程日记 2025/9/15 0:28:34

怎么构造思维链数据？思维链提示工程的五大原则

我来为您翻译这篇关于思维链提示工程的文章，采用通俗易懂的中文表达： 思维链(CoT)提示工程是生成式AI(GenAI)中一种强大的方法，它能让模型通过逐步推理来解决复杂任务。通过构建引导模型思考过程的提示，思维链能提高输出的准确性…...

编程日记 2025/9/13 9:13:27

mongodb--用户管理

文章目录 MongoDB 用户管理1. 连接到 MongoDB2. 用户创建2.1 创建管理员用户2.2 创建特定数据库用户2.3 常用内置角色 3. 用户管理操作3.1 查看所有用户3.2 查看特定用户信息3.3 更新用户密码3.4 添加用户角色3.5 移除用户角色3.6 删除用户 4. 权限修改4.1 创建自定义角色4.2 将…...

编程日记 2025/9/6 15:29:24