React 钩子汇总

React 钩子

一、常用的 React 钩子：

1. useState

用于在函数式组件中添加状态管理。它返回一个状态值和一个更新状态的函数，让你可以在组件中追踪和更新状态。

2. useEffect

用于在组件渲染完成后执行副作用操作，比如数据获取、订阅等。它接收一个回调函数和一个依赖数组，可以用来管理副作用的触发时机。

3. useContext

用于在组件中访问全局的上下文数据。它接收一个上下文对象，返回上下文中的数据。

4. useReducer

类似于 useState，但更适用于复杂的状态逻辑，它通过使用一个 reducer 函数来管理状态。

5. useCallback

用于缓存回调函数，以避免在每次渲染时创建新的回调函数。适用于性能优化。

6. useMemo

用于缓存计算结果，以避免在每次渲染时重复计算。适用于性能优化。

7. useState

用于在函数式组件中添加状态管理。它返回一个状态值和一个更新状态的函数，让你可以在组件中追踪和更新状态。

8. useContext

用于在组件中访问全局的上下文数据。它接收一个上下文对象，返回上下文中的数据。

9. useReducer

类似于 useState，但更适用于复杂的状态逻辑，它通过使用一个 reducer 函数来管理状态。

10. useCallback

用于缓存回调函数，以避免在每次渲染时创建新的回调函数。适用于性能优化。

11. useMemo

用于缓存计算结果，以避免在每次渲染时重复计算。适用于性能优化。

二、不常用的 React 钩子：

  1. useImperativeHandle：用于自定义暴露给父组件的实例值，通常与 forwardRef 一起使用。
  2. useLayoutEffect：与 useEffect 类似，但在 DOM 更新之后同步执行，适用于需要操作 DOM 布局的情况。
  3. useDebugValue：用于在 React 开发者工具中提供自定义钩子的标签和调试信息。
  4. useRef：用于在组件渲染之间保持变量的稳定引用，不触发重新渲染。还可以用于获取 DOM 元素的引用。
  5. useTransition：用于管理异步更新的状态，可以平滑地在不同状态之间切换。
  6. useMutableSource：用于自定义数据源，以供 useTransition 和 Concurrent Mode 使用。
  7. useDeferredValue：与 useTransition 一起使用，用于推迟渲染较不重要的数据。
  8. useSyncExternalStore：与外部数据源集成的实验性 API，用于从外部数据源同步状态。

三、常用的 React 钩子示例：

1. 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：

import React, { useState, useEffect } from 'react';
function DataFetching() {const [data, setData] = useState([]);useEffect(() => {fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data));}, []);return (<div>{data.map(item => <p key={item.id}>{item.name}</p>)}</div>);
}

3. useContext：

import React, { useContext } from 'react';
const ThemeContext = React.createContext('light');
function ThemedText() {const theme = useContext(ThemeContext);return <p className={theme}>This is themed text.</p>;
}

4. useReducer：

import React, { useReducer } from 'react';
const initialState = { count: 0 };
function countReducer(state, action) {switch (action.type) {case 'increment':return { count: state.count + 1 };case 'decrement':return { count: state.count - 1 };default:return state;}
}function Counter() {
const [state, dispatch] = useReducer(countReducer, initialState);
return (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>Increment</button><button onClick={() => dispatch({ type: 'decrement' })}>Decrement</button></div>);
}

5. useCallback：

import React, { useState, useCallback } from 'react';
function Button({ onClick }) {console.log('Button rendered');return <button onClick={onClick}>Click me</button>;
}function Parent() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return (<div><p>Count: {count}</p><Button onClick={handleClick} /></div>);
}

6. useMemo：

import React, { useState, useMemo } from 'react';function ExpensiveCalculation() {console.log('Expensive calculation');// Simulating a time-consuming calculationreturn 5 + 10;
}function Parent() {const [count, setCount] = useState(0);const result = useMemo(() => {return ExpensiveCalculation();}, [count]);return (<div><p>Result: {result}</p><button onClick={() => setCount(count + 1)}>Increment</button></div>);
}

四、不常用的 React 钩子示例：

1. useImperativeHandle：

import React, { useRef, forwardRef, useImperativeHandle } from 'react';const FancyInput = forwardRef((props, ref) => {const inputRef = useRef();useImperativeHandle(ref, () => ({focus: () => {inputRef.current.focus();}}));return <input ref={inputRef} />;
});

2. useLayoutEffect：

import React, { useState, useLayoutEffect } from 'react';function LayoutEffectExample() {const [width, setWidth] = useState(0);useLayoutEffect(() => {setWidth(document.documentElement.clientWidth);}, []);return <p>Window width: {width}</p>;
}

3. useDebugValue：

import React, { useDebugValue, useState } from 'react';function useCustomHook() {const [count, setCount] = useState(0);useDebugValue(`Count: ${count}`);return count;
}

4. useRef：

import React, { useRef } from 'react';function FocusableInput() {const inputRef = useRef();const focusInput = () => {inputRef.current.focus();};return (<div><input ref={inputRef} /><button onClick={focusInput}>Focus Input</button></div>);
}

5. useTransition：

import React, { useState, useTransition } from 'react';function AsyncContent() {const [data, setData] = useState([]);const [startTransition, isPending] = useTransition();const fetchData = () => {startTransition(() => {fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data));});};return (<div><button onClick={fetchData} disabled={isPending}>Fetch Data</button>{data.map(item => <p key={item.id}>{item.name}</p>)}</div>);
}

6.useMutableSource

useMutableSource 是一个用于实验性的 API，通常用于与 React 的 Concurrent Mode 结合使用。它允许你创建一个可变数据源，可以在更新时传递给 React，以实现异步更新的状态。

import React, { useMutableSource } from 'react';const dataSource = {// 在这里定义你的数据源方法
};function CustomComponent() {const mutableSource = useMutableSource(dataSource);return <div>{mutableSource.getData()}</div>;}

7.useDeferredValue

useDeferredValue 与 useTransition 一起使用，用于将某些数据的渲染推迟到未来帧，以平滑地处理异步数据的更新。

import React, { useState, useTransition, useDeferredValue } from 'react';function AsyncContent() {const [data, setData] = useState([]);const [startTransition, isPending] = useTransition();const fetchData = () => {startTransition(() => {fetch('https://api.example.com/data').then(response => response.json()).then(data => setData(data));});};return (<div><button onClick={fetchData} disabled={isPending}>Fetch Data</button>{data.map(item => (<p key={item.id}><DeferredText text={item.name} /></p>))}</div>);
}function DeferredText({ text }) {const deferredText = useDeferredValue(text);return <span>{deferredText}</span>;
}

8.useSyncExternalStore

useSyncExternalStore 是一个实验性 API，用于将 React 组件状态与外部数据源同步，适用于从外部数据源获取数据并同步状态。

import React, { useSyncExternalStore } from 'react';const externalStore = {// 定义与外部数据源交互的方法
};function SyncedComponent() {const syncedData = useSyncExternalStore(externalStore);return <div>Data from external store: {syncedData}</div>;
}

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

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

相关文章

Relation Extraction as Open-book Examination: Retrieval-enhanced Prompt Tuning

Relation Extraction as Open-book Examination: Retrieval-enhanced Prompt Tuning

本文是LLM系列文章&#xff0c;针对《Relation Extraction as Open-book Examination: Retrieval 关系提取作为开卷测试&#xff1a;检索增强提示调整 摘要1 引言2 方法3 实验4 相关工作5 结论 摘要 经过预训练的语言模型通过表现出显著的小样本学习能力&#xff0c;对关系提取…
阅读更多...
基于python的反爬虫技术的研究设计与实现

基于python的反爬虫技术的研究设计与实现

摘 要 当下的网络是复杂的&#xff0c;网络上的信息非常的丰富&#xff0c;但也造成了大量的信息堆积&#xff0c;特别是大量的重复信息被反复的推送给用户。这是一个流量的时代&#xff0c;很多社会群体都会聚焦具备流量潜力的信息&#xff0c;从而发生蹭热度等行为来提升自己…
阅读更多...
Windows环境下的Tomcat服务器安装和配置教程，包括外网远程访问的设置方法

Windows环境下的Tomcat服务器安装和配置教程，包括外网远程访问的设置方法

文章目录 前言1.本地Tomcat网页搭建1.1 Tomcat安装1.2 配置环境变量1.3 环境配置1.4 Tomcat运行测试1.5 Cpolar安装和注册 2.本地网页发布2.1.Cpolar云端设置2.2 Cpolar本地设置 3.公网访问测试4.结语 前言 Tomcat作为一个轻量级的服务器&#xff0c;不仅名字很有趣&#xff0…
阅读更多...
Docker consul 容器服务自动发现和更新

Docker consul 容器服务自动发现和更新

目录 一、什么是服务注册与发现 二、Docker-consul集群 1.Docker-consul consul提供的一些关键特性 2.registrator 3.Consul-template 三、Docker-consul实现过程 以配置nginx负载均衡为例 先配置consul-agent &#xff0c;有两种模式server和client 四、Docker-cons…
阅读更多...
ChatGPT HTML JS Echarts实现热力图展示

ChatGPT HTML JS Echarts实现热力图展示

热力图是一种常用的数据可视化图表，主要用于展示数据的分布和密度情况。它通过使用不同颜色的热点来表示数据在地理或二维空间上的分布情况，从而直观地显示出数据的密集程度和趋势。 热力图的功能和作用如下： 1. 数据分布展示：热力图可以将大量数据以热点的形式展示在地理…
阅读更多...
K8s 持久化存储有几种方式？一文了解本地盘/CSI 外接存储/K8s 原生存储的优缺点

K8s 持久化存储有几种方式？一文了解本地盘/CSI 外接存储/K8s 原生存储的优缺点

当今云原生环境中&#xff0c;Kubernetes&#xff08;K8s&#xff09;已成为既定的容器编排工具。随着 K8s 的普及&#xff0c;存储也成为 K8s 用户关注的一个重要问题&#xff1a;为了满足不同的场景需求&#xff0c;K8s 可以支持基于不同架构的多种存储方案。这些方案间有什么…
阅读更多...
Spark与Flink的区别

Spark与Flink的区别

分析&回答 &#xff08;1&#xff09;设计理念 1、Spark的技术理念是使用微批来模拟流的计算,基于Micro-batch,数据流以时间为单位被切分为一个个批次,通过分布式数据集RDD进行批量处理,是一种伪实时。 2、Flink是基于事件驱动的&#xff0c;是面向流的处理框架, Flink基于…
阅读更多...
0基础学习VR全景平台篇 第95篇：VR实景智慧导航操作手册

0基础学习VR全景平台篇 第95篇：VR实景智慧导航操作手册

一、实景导航前期准备工作及点位采集 &#xff08;一&#xff09;实景导航前期准备工作 &#xff08;1&#xff09;拍摄设备 1.推荐相机&#xff1a;全画幅的佳能 Canon EOS​ 5D Mark IV 2.搭配镜头&#xff1a;原厂的佳能 Canon EF卡口 8-15mm 全画幅鱼眼镜头 3.三角架 …
阅读更多...
vue3中的useAttrs和props的区别

vue3中的useAttrs和props的区别

在vue3中&#xff0c; 提供了一个 useAttrs 的方法 它接收到的参数一 prop中可以接收到的数据是基本一样的 如果我们想自已写一个组件&#xff0c; 把 elementPlus 中的期中一个组件封装一下。 可以这样做 1.新建一个 自定义组件 myBtnCom <template><div class"…
阅读更多...
Java：SpringBoot实现定时任务Scheduled

Java：SpringBoot实现定时任务Scheduled

代码示例 package com.example.demo.config;import org.springframework.context.annotation.Configuration; import org.springframework.scheduling.annotation.EnableScheduling; import org.springframework.scheduling.annotation.Scheduled;import java.text.SimpleDate…
阅读更多...
stencilJs学习之构建 Drawer 组件

stencilJs学习之构建 Drawer 组件

前言 在之前的学习中&#xff0c;我们已经掌握了 stencilJs 中的一些核心概念和基础知识&#xff0c;如装饰器 Prop、State、Event、Listen、Method、Component 以及生命周期方法。这些知识是构建复杂组件和应用的基础&#xff0c;而抽屉组件是一个很好的示例&#xff0c;能够…
阅读更多...
服务器管理协议，以及SSH协议客户端

服务器管理协议，以及SSH协议客户端

六种主要服务器管理协议简单概述 一、RDP RDP远程协议是一个多通道协议，让用户通过本地电脑连接远程服务器。大部分的Windows、Linux服务器都有相应的客户端。 行云管家基于B/S架构（Browser/Server，浏览器/服务器模式）设计，直接使用浏览器远程连接服务器，支持原生RDP远…
阅读更多...
Chrome小恐龙快跑小游戏——Python实现

Chrome小恐龙快跑小游戏——Python实现

目录 视频演示 代码实现 视频演示 Chrome小恐龙快跑小游戏——Python实现 代码实现 import pygame import os import random pygame.init()# Global Constants SCREEN_HEIGHT 600 SCREEN_WIDTH 1100 game_over False SCREEN pygame.display.set_mode((SCREEN_WIDTH, SCR…
阅读更多...
mysql通过.frm和.ibd 文件恢复数据库

mysql通过.frm和.ibd 文件恢复数据库

问题背景&#xff1a;由于强制在服务关闭mysql导致部分数据表以及数据丢失 如下图只有.frm .ibd的文件为我的问题文件 查找不到表结构和表数据目录D:XXXX\mysql-5.7.24-winx64\data\mydata 从frm文件中恢复表结构 先把原来的数据备份一次 避免过程中出错 先备份之前数据的.fr…
阅读更多...
聊聊Jasypt的StandardPBEByteEncryptor

聊聊Jasypt的StandardPBEByteEncryptor

序 本文主要研究一下Jasypt的StandardPBEByteEncryptor Jasypt Jasypt即Java Simplified Encryption&#xff0c;它主要是简化项目加解密的工作&#xff0c;内置提供了很多组件的集成&#xff0c;比如hibernate、spring、spring-security等 示例 示例1 StrongPasswordEnc…
阅读更多...
【高危】Apache Airflow Spark Provider 反序列化漏洞 (CVE-2023-40195)

【高危】Apache Airflow Spark Provider 反序列化漏洞 (CVE-2023-40195)

zhi.oscs1024.com​​​​​ 漏洞类型反序列化发现时间2023-08-29漏洞等级高危MPS编号MPS-qkdx-17bcCVE编号CVE-2023-40195漏洞影响广度广 漏洞危害 OSCS 描述Apache Airflow Spark Provider是Apache Airflow项目的一个插件&#xff0c;用于在Airflow中管理和调度Apache Spar…
阅读更多...
QT使用QXlsx实现数据验证与Excel公式操作 QT基础入门【Excel的操作】

QT使用QXlsx实现数据验证与Excel公式操作 QT基础入门【Excel的操作】

准备环境:QT中使用QtXlsx库的三种方法 1、公式操作写单行公式 //右值初始化Format rAlign;rAlign.setHorizontalAlignment(Format::AlignRight);//左值初始化Format lAlign;lAlign.setHorizontalAlignment(Format::AlignLeft);xlsx.write("B3", 40, lAlign);xlsx.wr…
阅读更多...
Spark及其生态简介

Spark及其生态简介

一、Spark简介 Spark 是一个用来实现快速而通用的集群计算的平台&#xff0c;官网上的解释是&#xff1a;Apache Spark™是用于大规模数据处理的统一分析引擎。 Spark 适用于各种各样原先需要多种不同的分布式平台的场景&#xff0c;包括批处理、迭代算法、交互式查询、流处理…
阅读更多...
Generated Knowledge Prompting for Commonsense Reasoning

Generated Knowledge Prompting for Commonsense Reasoning

本文是知识图谱系列相关的文章&#xff0c;针对《Generated Knowledge Prompting for Commonsense Reasoning》的翻译。 常识推理的生成知识提示 摘要1 引言2 生成知识提示3 实验设置4 实验结果5 相关工作6 结论 摘要 结合外部知识是否有利于常识推理&#xff0c;同时保持预训…
阅读更多...
如何理解attention中的Q、K、V？

如何理解attention中的Q、K、V？

y直接用torch实现一个SelfAttention来说一说&#xff1a; 1、首先定义三哥线性变换&#xff0c;query&#xff0c;key以及value&#xff1a; class BertSelfAttention(nn.Module):self.query nn.Linear(config.hidden_size, self.all_head_size)#输入768&#xff0c;输出768…
阅读更多...
最新文章

Copyright @ 2022~2023