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

深入探索 React Hooks:原理、用法与性能优化全解

一、引言

在现代 React 开发领域,Hooks 已成为不可或缺的一部分,赋予函数组件强大功能,使其能胜任复杂任务。本文将全面剖析 React Hooks,助您深入理解并熟练运用。

二、React Hooks 是什么

(一)Hooks 出现的背景

早期 React 主要依赖类组件,其通过this.state管理状态及生命周期方法处理逻辑,但存在this指向复杂、代码复用性欠佳等问题。Hooks 的诞生有效解决了这些困扰,让开发者能在函数组件中便捷地运用状态及其他 React 特性。

(二)基本的 Hooks

1.useState
useState常用于在函数组件中引入状态,示例如下:

import React, { useState } from 'react';
function Counter() {const [count, setCount] = useState(0);return (<div><p>Count: {count}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

它接受初始值,返回包含当前状态值与更新状态函数的数组。

2.useEffect
useEffect用于处理函数组件中的副作用,如数据获取、订阅操作、DOM 修改等,例如:

import React, { useState, useEffect } from 'react';
function Example() {const [count, setCount] = useState(0);useEffect(() => {document.title = `You clicked ${count} times`;}, [count]);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
}

其第一个参数为执行副作用的函数,第二个参数是依赖项数组,数组内值变化时该函数会重新执行。

三、Hooks 的规则

(一)只能在顶层调用 Hooks

Hooks 必须在函数组件的顶层进行调用,这是因为 React 依靠 Hooks 的调用顺序来确定它们与组件实例的对应关系。若在循环、条件语句或嵌套函数中调用,可能导致调用顺序混乱,进而引发错误。

(二)只能在 React 函数组件或者自定义 Hook 中调用 Hooks

此规则确保了 Hooks 能与 React 组件的生命周期及渲染逻辑正确关联,保障组件行为符合预期。

四、高级 Hooks 用法

(一)自定义 Hooks

自定义 Hooks 可将可复用的逻辑提取出来,形成独立函数。例如useWindowWidth自定义 Hook:

import { useState, useEffect } from 'react';
function useWindowWidth() {const [width, setWidth] = useState(window.innerWidth);useEffect(() => {const handleResize = () => setWidth(window.innerWidth);window.addEventListener('resize', handleResize);return () => window.removeEventListener('resize', handleResize);}, []);return width;
}

相关文章:

深入探索 React Hooks:原理、用法与性能优化全解

一、引言 在现代 React 开发领域,Hooks 已成为不可或缺的一部分,赋予函数组件强大功能,使其能胜任复杂任务。本文将全面剖析 React Hooks,助您深入理解并熟练运用。 二、React Hooks 是什么 (一)Hooks 出现的背景 早期 React 主要依赖类组件,其通过this.state管理状…...

python中父类和子类继承学习

python为啥要使用继承 1. **代码复用**&#xff1a;子类可以继承父类的方法和属性&#xff0c;避免了重复编写相同的代码&#xff0c;提高了代码的复用性。 2. **建立层次结构**&#xff1a;通过继承可以清晰地表示类之间的层次关系&#xff0c;使代码结构更有条理。 3. **扩展…...

Linux——GPIO输入输出裸机实验

学习了正点原子Linux环境下的GPIO的输入输出的裸机实验学习&#xff0c;现在进行一下小结&#xff1a; 启动文件start.S的编写 .global _start .global _bss_start _bss_start:.word __bss_start.global _bss_end _bss_end:.word __bss_end_start:/*设置处理器进入SVC模式*/m…...

华为鸿蒙HarmonyOS NEXT升级HiCar:打造未来出行新体验

随着科技的不断进步&#xff0c;智能出行已成为我们生活中不可或缺的一部分。华为凭借其在智能科技领域的深厚积累&#xff0c;推出了全新的鸿蒙HarmonyOS NEXT系统&#xff0c;旨在为用户打造一个“人车家”的无缝协同出行体验。这一系统的核心亮点之一&#xff0c;就是其内置…...

【项目组件】第三方库——websocketpp

目录 第三方协议&#xff1a;websocket websocket简介 websocket特点 websocket协议切换 websocket协议格式段 websocketpp库介绍 endpoint server connection websocketpp库搭建服务器流程 基本框架实现 业务处理回调函数的实现 http_callback open_callback …...

计算机23级数据结构上机实验(第3-4周)

A 二叉树删除子树 编写程序对给定二叉树执行若干次删除子树操作&#xff0c;输出每次删除子树后剩余二叉树的中根序列。二叉树结点的数据域值为不等于0的整数。每次删除操作是在上一次删除操作后剩下的二叉树上执行。 输入格式: 输入第1行为一组用空格间隔的整数&#xff0c;表…...

【大数据学习 | HBASE高级】region split机制和策略

1. region split机制 ​ HRegionServer拆分region的步骤是&#xff0c;先将该region下线&#xff0c;然后拆分&#xff0c;将其子region加入到hbase:meta表中&#xff0c;再将他们加入到原本的HRegionServer中&#xff0c;最后汇报Master。 split前&#xff1a;hbase:meta表有…...

flink实战 -- flink SQL 实现列转行

在 SQL 任务里面经常会遇到一列转多行的需求,下面就来总结一下在 Flink SQL 里面如何实现列转行的,先来看下面的一个具体案例. 需求 原始数据格式如下: namedatatest[{"content_type":"flink","url":"111"},{"content_type&quo…...

React中右击出现自定弹窗

前言 在react中点击右键,完成阻止浏览器的默认行为,完成自定义的悬浮框(Menu菜单). 版本 "react": "^18.2.0", "umijs/route-utils": "^4.0.1", "antd": "^5.18.1", "ant-design/pro-components": &q…...

Unity类银河战士恶魔城学习总结(P128 Switch UI with KeyBoard用键盘切换UI)

【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili 教程源地址&#xff1a;https://www.udemy.com/course/2d-rpg-alexdev/ 本章节实现了用键盘切换角色UI&#xff0c;技能树UI&#xff0c;合成面板UI和设置UI UI.cs 1. 变量与字段 characterUI&#xff0c;skill…...

基于Springboot+微信小程序的急救常识学习系统 (含源码数据库)

1.开发环境 开发系统:Windows10/11 架构模式:MVC/前后端分离 JDK版本: Java JDK1.8 开发工具:IDEA 数据库版本: mysql5.7或8.0 数据库可视化工具: navicat 服务器: SpringBoot自带 apache tomcat 主要技术: Java,Springboot,mybatis,mysql,vue 2.视频演示地址 3.功能 该系统…...

【云计算解决方案面试整理】3-7主流云计算平台、云计算架构、安全防护

准备面云计算解决方案的岗位,整理了一些,也请大佬们指点。 文档分为 云计算基础概念、云计算技术原理、主流云计算平台(以天翼云为例)、云计算架构(弹性设计、高可用设计、高性能设计)、安全防护几个方面。 三、主流云计算平台 1.阿里云云计算平台 强大的计算能力:拥有…...

数据库范式、MySQL 架构、算法与树的深入解析

一、数据库范式 在数据库设计中&#xff0c;范式是一系列规则&#xff0c;用于确保数据的组织和存储具有良好的结构、完整性以及最小化的数据冗余。如果不遵循范式设计&#xff0c;数据可能会以平铺式罗列&#xff0c;仅使用冒号、分号等简单分隔。这种方式存在诸多弊端&#…...

设计模式之责任链模式(Chain Of Responsibility)

一、责任链模式介绍 1、责任链模式介绍 职责链模式(chain of responsibility pattern) 定义: 避免将一个请求的发送者与接收者耦合在 一起&#xff0c;让多个对象都有机会处理请求。将接收请求的对象连接成一条链&#xff0c;并且沿着这条链 传递请求&#xff0c;直到有一个对…...

SQLite 全文检索:快速高效的文本查询方案

文章目录 什么是全文检索&#xff1f;如何启用 FTS&#xff1f;插入数据执行全文检索关联原始表与 FTS 表数据更新结论 说明: 本文以博客内容全文检索为例。 什么是全文检索&#xff1f; 全文检索是指对文本数据进行索引和查询的一种技术。与常规的 LIKE 查询不同&#xff0c…...

【微信小程序】报修管理

一、报修管理 报修管理是为方便业主联系维修师傅的一个服务&#xff0c;业主确认需要维修的房到后&#xff0c;再指定维修项目以及上门的时间待待师傅联系上门服务即可。 1.1 在线报修 业主通过在线的方式填写报修的信息&#xff0c;包括房屋信息、维修项目、联系电话、上门…...

C++——视频问题总结

1、C和C的区别 CC面向过程对象注重程序的实现逻辑程序的整体设计内容C语言采用了一种有序的编程方法——结构化编程&#xff1a;将一个大型程序分解为一个个小型的&#xff0c;易于编写的模块&#xff0c;所有模块有序调动&#xff0c;形成了一个程序的完整的运行链C将问题分解…...

Ubuntu24.04 network:0 unclaimed wireless adapter no found

前言&#xff1a; 所遇问题原因在于&#xff0c;折腾显卡cuda版本&#xff0c;导致nvidia驱动没了&#xff0c;使用sudo ubuntu-drivers autoinstall后&#xff0c;驱动有了&#xff0c;但是reboot后无线网卡无法识别&#xff0c;此外usb无线网络也无法使用&#xff0c;ifconfi…...

Java 使用MyBatis-Plus数据操作关键字冲突报错You have an error in your SQL syntax问题

问题 这个报错是出现在Java Spring boot项目中&#xff0c;使用MyBatis-Plus通过创建的实体类对数据库的操作过程中&#xff0c;通过实体创建数据库表是没有问题的&#xff0c;而在接口调用服务类操作数据库的时候&#xff0c;会出现报错。报错详情如下&#xff1a; 服务请求异…...

深入浅出 ChatGPT 底层原理:Transformer

Transformer 在人工智能和自然语言处理领域,Transformer架构的出现无疑是一个里程碑式的突破。它不仅推动了GPT(Generative Pre-trained Transformer)等大型语言模型的发展,还彻底改变了我们处理和理解自然语言的方式。 GPT与Transformer GPT 近几年&#xff0c;人工智能技…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...

Linux云原生安全:零信任架构与机密计算

Linux云原生安全&#xff1a;零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言&#xff1a;云原生安全的范式革命 随着云原生技术的普及&#xff0c;安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测&#xff0c;到2025年&#xff0c;零信任架构将成为超…...

大模型多显卡多服务器并行计算方法与实践指南

一、分布式训练概述 大规模语言模型的训练通常需要分布式计算技术,以解决单机资源不足的问题。分布式训练主要分为两种模式: 数据并行:将数据分片到不同设备,每个设备拥有完整的模型副本 模型并行:将模型分割到不同设备,每个设备处理部分模型计算 现代大模型训练通常结合…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

Git常用命令完全指南:从入门到精通

Git常用命令完全指南&#xff1a;从入门到精通 一、基础配置命令 1. 用户信息配置 # 设置全局用户名 git config --global user.name "你的名字"# 设置全局邮箱 git config --global user.email "你的邮箱example.com"# 查看所有配置 git config --list…...

MySQL 索引底层结构揭秘:B-Tree 与 B+Tree 的区别与应用

文章目录 一、背景知识&#xff1a;什么是 B-Tree 和 BTree&#xff1f; B-Tree&#xff08;平衡多路查找树&#xff09; BTree&#xff08;B-Tree 的变种&#xff09; 二、结构对比&#xff1a;一张图看懂 三、为什么 MySQL InnoDB 选择 BTree&#xff1f; 1. 范围查询更快 2…...

协议转换利器,profinet转ethercat网关的两大派系,各有千秋

随着工业以太网的发展&#xff0c;其高效、便捷、协议开放、易于冗余等诸多优点&#xff0c;被越来越多的工业现场所采用。西门子SIMATIC S7-1200/1500系列PLC集成有Profinet接口&#xff0c;具有实时性、开放性&#xff0c;使用TCP/IP和IT标准&#xff0c;符合基于工业以太网的…...