react中hook 函数的使用

use 开头的函数被称为 HookuseState 是 React 提供的一个内置 Hook。你可以在 React API 参考 中找到其他内置的 Hook。你也可以通过组合现有的 Hook 来编写属于你自己的 Hook。

Hook 比普通函数更为严格。你只能在你的组件(或其他 Hook)的 顶层 调用 Hook。如果你想在一个条件或循环中使用 useState,请提取一个新的组件并在组件内部使用它。

import { useState } from 'react';

我们刚才使用的这个就是一个hook

Hook 可以帮助在组件中使用不同的 React 功能。你可以使用内置的 Hook 或使用自定义 Hook。本页列出了 React 中所有内置 Hook。

状态帮助组件 “记住”用户输入的信息。例如,一个表单组件可以使用状态存储输入值,而一个图像库组件可以使用状态存储所选的图像索引。

使用以下 Hook 以向组件添加状态:

  • 使用 useState 声明可以直接更新的状态变量。
  • 使用 useReducer 在 reducer 函数 中声明带有更新逻辑的 state 变量。
 const [index, setIndex] = useState(0);

Context Hook 

上下文帮助组件 从祖先组件接收信息,而无需将其作为 props 传递。例如,应用程序的顶层组件可以借助上下文将 UI 主题传递给所有下方的组件,无论这些组件层级有多深。

  • 使用 useContext 读取订阅上下文。
const theme = useContext(ThemeContext);

Ref Hook

ref 允许组件 保存一些不用于渲染的信息,比如 DOM 节点或 timeout ID。与状态不同,更新 ref 不会重新渲染组件。ref 是从 React 范例中的“脱围机制”。当需要与非 React 系统如浏览器内置 API 一同工作时,ref 将会非常有用。

  • 使用 useRef 声明 ref。你可以在其中保存任何值,但最常用于保存 DOM 节点。
  • 使用 useImperativeHandle 自定义从组件中暴露的 ref,但是很少使用。
 const inputRef = useRef(null);

Effect Hook

Effect 允许组件 连接到外部系统并与之同步。这包括处理网络、浏览器、DOM、动画、使用不同 UI 库编写的小部件以及其他非 React 代码。

  • 使用 useEffect 将组件连接到外部系统。
function ChatRoom({ roomId }) {useEffect(() => {const connection = createConnection(roomId);connection.connect();return () => connection.disconnect();}, [roomId]);

Effect 是从 React 范式中的“脱围机制”。避免使用 Effect 协调应用程序的数据流。如果不需要与外部系统交互,那么 可能不需要 Effect。

useEffect 有两个很少使用的变换形式,它们在执行时机有所不同:

  • useLayoutEffect 在浏览器重新绘制屏幕前执行,可以在此处测量布局。
  • useInsertionEffect 在 React 对 DOM 进行更改之前触发,库可以在此处插入动态 CSS。

性能 Hook 

优化重新渲染性能的一种常见方法是跳过不必要的工作。例如,可以告诉 React 重用缓存的计算结果,或者如果数据自上次渲染以来没有更改,则跳过重新渲染。

可以使用以下 Hook 跳过计算和不必要的重新渲染:

  • 使用 useMemo 缓存计算代价昂贵的计算结果。
  • 使用 useCallback 将函数传递给优化组件之前缓存函数定义。
function TodoList({ todos, tab, theme }) {const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);// ...
}

有时由于屏幕确实需要更新,无法跳过重新渲染。在这种情况下,可以通过将必须同步的阻塞更新(比如使用输入法输入内容)与不需要阻塞用户界面的非阻塞更新(比如更新图表)分离以提高性能。

使用以下 Hook 处理渲染优先级:

  • useTransition 允许将状态转换标记为非阻塞,并允许其他更新中断它。
  • useDeferredValue 允许延迟更新 UI 的非关键部分,以让其他部分先更新。

资源 Hook 

资源可以被组件访问,而无需将它们作为状态的一部分。例如,组件可以从 Promise 中读取消息,或从上下文中读取样式信息。

使用以下 Hook 以从资源中读取值:

  • use 允许读取像 Promise 或 上下文 这样的资源的值。
function MessageComponent({ messagePromise }) {const message = use(messagePromise);const theme = use(ThemeContext);// ...
}

其他 Hook 

这些 Hook 主要适用于库作者,不常在应用程序代码中使用。使用 useDebugValue 自定义 React 开发者工具为自定义 Hook 添加的标签。
使用 useId 将唯一的 ID 与组件相关联,其通常与可访问性 API 一起使用。
使用 useSyncExternalStore 订阅外部 store。

自定义 Hook

开发者可以 自定义 Hook 作为 JavaScript 函数。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/839335.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud(1)-Eureka相关配置

1.新建Module-注册中心 作为注册中心 1.1配置 pom.xml <!-- 引入 eureka-server --><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-netflix-eureka-server</artifactId></dependency&g…

ASP+ACCESS基于BS产品销售管理系统

2. 网页制作工具 a) 网页设计工具 网页主要使用Frontpage2003&#xff0c;Dreamweaver Mx辅助制作。 Frontpage 2003 frontpage2003是在frontpage2000基础上的网页工具。frontpage2003保留和发展了frontpage 2000的优秀功能&#xff0c;并根据用户的的要求再次增加了九大新…

如何用PLC监听消防系统485总线通讯获取火灾报警数据

本文由艺捷自动化编写&#xff0c;艺捷自动化旗下产品有艺捷自动化网站和易为二维码说明书小程序&#xff08;微信&#xff09; 前言&#xff0c;先来说一下为什么会有这么一个奇怪的应用。在一个自动化系统改造升级项目中&#xff0c;甲方要求把消防的画面加到他们的后台上。…

C++哪些函数不能被声明为虚函数

在C中&#xff0c;某些函数不能被声明为虚函数。下面详细解释哪些函数不能被声明为虚函数&#xff0c;并通过代码示例进行说明。 C哪些函数不能被声明为虚函数 不能声明为虚函数的函数示例代码及解释一、构造函数不能是虚函数二、静态成员函数不能是虚函数三、友元函数不能是虚…

反转链表-力扣

该题使用虚拟头节点来做在思考的时候稍微有点复杂&#xff0c;但与从头节点开始&#xff0c;利用一个cur节点来反转流程是一样的&#xff0c;只需将dummyhead->next 当作是 cur 来操作即可。代码如下&#xff1a; /*** Definition for singly-linked list.* struct ListNod…

【电控笔记5.9】编码器脉冲计算速度MT法

总结 编码器的脉冲计算速度可以使用多种方法,其中一种常用的方法是“MT法” (Measuring Time Method),即测量时间法。该方法通过测量编码器脉冲间的时间来计算速度。这种方法在高精度速度测量中非常有效,特别是在速度较低时。 MT法计算速度的基本原理 MT法的基本原理是通过…

Windows基本知识整理

Windows操作系统是微软公司开发和发布的一系列操作系统的总称&#xff0c;它广泛应用于个人电脑、服务器、移动设备等。以下是Windows操作系统的一些基本知识整理&#xff1a; 1. 版本历史 早期版本&#xff1a;包括Windows 1.0至Windows ME。Windows XP&#xff1a;于2001年…

word如何按照原本页面审阅文档

1 视图-阅读视图 2 视图&#xff0c;自己看&#xff0c;懒得打字了哈哈

HTML的基石:区块标签与小语义标签的深度解析

&#x1f4da; HTML的基石&#xff1a;区块标签与小语义标签的深度解析 &#x1f310; 区块标签&#xff1a;构建网页的框架&#x1f3e0; <div>&#xff1a;万能的容器&#x1f4da; <section>、<article>、<aside>&#xff1a;语义化的布局 &#x1…

通过python读取并发送二进制文件到串口

代码 #!python.exe """ filename send_bin.py brief According to the users input, read bin file, subpackage and send the file by UART. HowToUse send_bin.py -h author shadowThreeDgmail.com data 20220224 &q…

vulhub——ActiveMQ漏洞

文章目录 一、CVE-2015-5254(反序列化漏洞)二、CVE-2016-3088&#xff08;任意文件写入漏洞&#xff09;2.1 漏洞原理2.2 写入webshell2.3 写入crontab 三、CVE-2022-41678&#xff08;远程代码执行漏洞&#xff09;方法一方法2 四、CVE-2023-46604&#xff08;反序列化命令执行…

【退役之重学Java】关于 Ribbon

一、负载均衡 Nginx 和 Ribbon 都能做负载均衡&#xff0c;区别在哪儿&#xff1f; Nginx 负责服务器负载均衡Ribbon 负责本地负载均衡 Nginx 是服务器负载均衡&#xff0c;客户端所有请求都会交给 Nginx&#xff0c;然后由 Nginx 实现转发请求。即负载均衡是由服务端实现的 Ri…

升级版网创教程wordpress插件自动采集并发布

主要功能&#xff1a; wordpress 插件主题系列支持自动采集并发布。 主要采集: 福缘&#xff0c;中创&#xff0c;冒泡 自动采集各大项目网进行整合发布到自己个人网站 插件话更新&#xff0c;减少网络请求&#xff0c;提升稳定性 代码完美开源 傻瓜式操作&#xff0c;一…

C++纯文字解谜游戏

1.前言 Hello,我是老六工作室,今天我们搞一个C++纯文字解谜游戏,后面有代码与解析。 感谢支持,点赞鼓励一下,谢谢! 2.代码时间 #include<iostream> #include<windows.h> #include<conio.h> int power=0,light=0; using namespace std; int main() …

C4.5算法【python,算法,机器学习】

优点 可以处理缺失值。特征只能使用一次。可以剪枝&#xff0c;可以避免过拟合问题。 缺点 不适合大数据集的训练&#xff0c;因为受内存大小影响。 计算流程 对于单个特征 A, 我们做如下假设&#xff1a; 有两个判断值yes和no, 概率分别为 p y p_y py​和 p n p_n pn​。…

【MySQL】MySQL的安装和基本概念

MySQL的安装和基本概念 一、环境安装1、环境及配置2、下载安装 二、基本概念1、主流数据库2、mysql和mysqld的区别和概念&#xff08;1&#xff09;概念1&#xff1a;了解CS结构&#xff08;2&#xff09;概念2&#xff1a;数据库指的是什么&#xff08;3&#xff09;概念3&…

记录:mac pro 16-inch,2019安装ubuntu双系统

需要的装备&#xff1a;u盘&#xff0c;扩展坞、有线键鼠、ext4硬盘 目的&#xff1a;编译aosp 11 1、首先是参照如下文章&#xff0c;分配空间&#xff0c;制作启动盘&#xff08;测试ubuntu20.04不行&#xff0c;ubuntu22.04正常&#xff09; https://blog.csdn.net/LBSGKD…

天堂W游戏内核驱动保护简单分析(五)

NP 双机调试分析 1. 调用了NtQuerySystemInformation(SystemKernelDebuggerInformation) 来检测os是否是调试模式的进程 PROCESS ffff920744e6c300 SessionId: 1 Cid: 1a34 Peb: bc82205000 ParentCid: 111c DirBase: 23c33c000 ObjectTable: ffffa9…

【Linux】:进程切换

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux进程切换的知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入门到精…

PMP考试做对多少题才算及格?

2024年6月PMP考试即将来临&#xff0c;考生除了要复习好考试内容&#xff0c;也要提前了解考试后的成绩查询问题。顺利通过PMP考试是所有参加PMP认证考试考生的目标&#xff0c;那么2024年6月PMP考试怎么才算通过呢&#xff1f; PMP考试改版后试卷总共180道单选题多选题(改版前…