React、React Router 和 Redux 常用Hooks 总结,提升您的开发效率!

Hooks 是 React 16.8 中引入的一种新特性,它使得函数组件可以使用 state 和其他 React 特性,从而大大提高了函数组件的灵活性和功能性。下面分别总结React、React Router 、Redux中常用的Hooks。
在这里插入图片描述

常用Hooks速记

React Hooks

useState:用于在函数组件中添加状态。
useEffect:用于在函数组件中执行副作用操作,如发送 AJAX 请求、订阅事件等。
useContext:用于在函数组件中消费上下文。
useReducer:用于在函数组件中管理状态,类似于 Redux 的 reducer。
useCallback:用于在函数组件中返回一个 memoized 回调函数。
useMemo:用于在函数组件中返回一个 memoized 值。
useRef:用于在函数组件中创建一个可变的引用对象。
useImperativeHandle:用于在函数组件中自定义暴露给父组件的实例值。
useLayoutEffect:用于在函数组件中执行同步布局效果。
useDebugValue:用于在 React 开发者工具中显示自定义 Hook 的标签。

React Router Hooks

useHistory:用于在函数组件中访问 history 对象。
useLocation:用于在函数组件中访问 location 对象。
useParams:用于在函数组件中访问 match 对象中的参数。
useRouteMatch:用于在函数组件中访问 match 对象。
useLinkClickHandler:用于在函数组件中处理 Link 组件的点击事件。

Redux Hooks

useSelector:用于从 Redux 存储中选择数据。
useDispatch:用于在函数组件中派发 Redux 动作。
useStore:用于在函数组件中获取 Redux 存储实例。
useActions:用于在函数组件中批量导入 Redux 动作创建函数。
useShallowEqual:用于在 useSelector 中进行浅层比较。
useDeepEqual:用于在 useSelector 中进行深层比较。
useRedux:用于在函数组件中获取 Redux 存储实例和派发函数。

以下是一些常用的 React、React Router 和 Redux Hooks 的示例代码:

React Hooks

  1. useState:用于在函数组件中添加状态。
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>);
}
  1. useEffect:用于在函数组件中执行副作用操作,如发送 AJAX 请求、订阅事件等。
import React, { useState, useEffect } from 'react';function Example() {const [data, setData] = useState(null);useEffect(() => {const fetchData = async () => {const response = await fetch('https://api.example.com/data');const json = await response.json();setData(json);};fetchData();}, []);return (<div><h1>Data:</h1>{data && <p>{data.message}</p>}</div>);
}
  1. useContext:用于在函数组件中消费上下文。
import React, { createContext, useContext } from 'react';const ThemeContext = createContext('light');function ThemeButton() {const theme = useContext(ThemeContext);return (<button>{theme === 'light' ? 'Switch to Dark' : 'Switch to Light'}</button>);
}function App() {return (<ThemeContext.Provider value="dark"><ThemeButton /></ThemeContext.Provider>);
}
  1. useReducer:用于在函数组件中管理状态,类似于 Redux 的 reducer。
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 Counter() {const [state, dispatch] = useReducer(reducer, { count: 0 });return (<>Count: {state.count}<button onClick={() => dispatch({ type: 'decrement' })}>-</button><button onClick={() => dispatch({ type: 'increment' })}>+</button></>);
}
  1. useCallback:用于在函数组件中返回一个 memoized 回调函数。
import React, { useState, useCallback } from 'react';function Example() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return <button onClick={handleClick}>Click me</button>;
}
  1. useMemo:用于在函数组件中返回一个 memoized 值。
import React, { useMemo } from 'react';function Example({ a, b }) {const result = useMemo(() => {// 计算结果return a + b;}, [a, b]);return <div>{result}</div>;
}
  1. useRef:用于在函数组件中创建一个可变的引用对象。
import React, { useRef } from 'react';function Example() {const inputRef = useRef();const handleClick = () => {inputRef.current.focus();};return (<><input ref={inputRef} type="text" /><button onClick={handleClick}>Focus input</button></>);
}
  1. useImperativeHandle:用于在函数组件中自定义暴露给父组件的实例值。
import React, { useRef, useImperativeHandle, forwardRef } from 'react';const FancyInput = forwardRef((props, ref) => {const inputRef = useRef();useImperativeHandle(ref, () => ({focus: () => {inputRef.current.focus();},}));return <input ref={inputRef} type="text" />;
});function App() {const inputRef = useRef();const handleClick = () => {inputRef.current.focus();};return (<><FancyInput ref={inputRef} /><button onClick={handleClick}>Focus input</button></>);
}
  1. useLayoutEffect:用于在函数组件中执行同步布局效果。
import React, { useLayoutEffect, useRef } from 'react';function Example() {const ref = useRef();useLayoutEffect(() => {// 同步布局效果console.log(ref.current.clientHeight);}, []);return <div ref={ref}>Hello World</div>;
}
  1. useDebugValue:用于在 React 开发者工具中显示自定义 Hook 的标签。
import React, { useMemo } from 'react';function useCustomHook(value) {const result = useMemo(() => {// 计算结果return value * 2;}, [value]);// 在 React 开发者工具中显示自定义 Hook 的标签React.useDebugValue(`Result: ${result}`);return result;
}function Example({ value }) {const result = useCustomHook(value);return <div>{result}</div>;
}

React Router Hooks

  1. useHistory:用于在函数组件中访问 history 对象。
import { useHistory } from 'react-router-dom';function Example() {const history = useHistory();const handleClick = () => {history.push('/about');};return <button onClick={handleClick}>Go to About</button>;
}
  1. useLocation:用于在函数组件中访问 location 对象。
import { useLocation } from 'react-router-dom';function Example() {const location = useLocation();return <div>{location.pathname}</div>;
}
  1. useParams:用于在函数组件中访问 match 对象中的参数。
import { useParams } from 'react-router-dom';function Example() {const { id } = useParams();return <div>ID: {id}</div>;
}
  1. useRouteMatch:用于在函数组件中访问 match 对象。
import { useRouteMatch } from 'react-router-dom';function Example() {const match = useRouteMatch();return <div>{match.path}</div>;
}
  1. useLinkClickHandler:用于在函数组件中处理 Link 组件的点击事件。
import { useHistory, useLinkClickHandler } from 'react-router-dom';function Example() {const history = useHistory();const handleClick = useLinkClickHandler('/about');return (<button type="button" onClick={(event) => {handleClick(event, history);}}>Go to About</button>);
}

Redux Hooks

  1. useSelector:用于从 Redux 存储中选择数据。
import { useSelector } from 'react-redux';function Example() {const count = useSelector(state => state.count);return <div>{count}</div>;
}
  1. useDispatch:用于在函数组件中派发 Redux 动作。
import { useDispatch } from 'react-redux';function Example() {const dispatch = useDispatch();const handleClick = () => {dispatch({ type: 'increment' });};return <button onClick={handleClick}>Increment</button>;
}
  1. useStore:用于在函数组件中获取 Redux 存储实例。
import { useStore } from 'react-redux';function Example() {const store = useStore();return <div>{store.getState().count}</div>;
}
  1. useActions:用于在函数组件中批量导入 Redux 动作创建函数。
import { useActions } from 'react-redux-actions';function Example() {const { increment, decrement } = useActions({increment: () => ({ type: 'increment' }),decrement: () => ({ type: 'decrement' }),});return (<><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button></>);
}
  1. useShallowEqual:用于在 useSelector 中进行浅层比较。
import { useSelector, shallowEqual } from 'react-redux';function Example() {const { count, name } = useSelector(state => ({count: state.count,name: state.name,}),shallowEqual);return (<div>Count: {count}<br />Name: {name}</div>);
}
  1. useDeepEqual:用于在 useSelector 中进行深层比较。
import { useSelector, deepEqual } from 'react-redux';function Example() {const { count, list } = useSelector(state => ({count: state.count,list: state.list,}),deepEqual);return (<div>Count: {count}<br />List: {list.join(', ')}</div>);
}
  1. useRedux:用于在函数组件中获取 Redux 存储实例和派发函数。
import { useRedux } from 'react-redux';function Example() {const [store, dispatch] = useRedux();const handleClick = () => {dispatch({ type: 'increment' });};return (<div>Count: {store.getState().count}<br /><button onClick={handleClick}>Increment</button></div>);
}

这些 Hooks 可以帮助您更方便地在 React、React Router 和 Redux 中管理状态和处理逻辑。根据实际需求选择合适的 Hooks 可以提高代码的可读性和可维护性。

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

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

相关文章

社交媒体数据恢复:WorldTalk

WorldTalk数据恢复方法 在本文中&#xff0c;我们将探讨如何恢复在WorldTalk中删除的信息。请注意&#xff0c;这些步骤并不是专门针对WorldTalk软件设计的&#xff0c;而是基于一般的手机数据恢复流程。由于WorldTalk是一款全球5亿人使用的交友APP&#xff0c;用户分别来自中…

EDA(一)Verilog

EDA&#xff08;一&#xff09;Verilog Verilog是一种用于电子系统设计自动化&#xff08;EDA&#xff09;的硬件描述语言&#xff08;HDL&#xff09;&#xff0c;主要用于设计和模拟电子系统&#xff0c;特别是在集成电路&#xff08;IC&#xff09;和印刷电路板&#xff08;…

TCP 协议

TCP协议段格式 源/目的端口号&#xff1a;表示数据是从哪个进程来&#xff0c;到哪个进程去。 序号&#xff1a;发送数据的序号。 确认序号&#xff1a;应答报文的序号&#xff0c;用来回复发送方的。 4 位首部长度&#xff1a;一个 TCP 报头&#xff0c;长度是可变的&#xff…

zotero better notes报错:Error: ReferenceError: topItem is not defined

我的自定义笔记模板名称是&#xff1a;简约风格 然后就遇到了以下报错&#xff1a; Error: ReferenceError: topItem is not defined 解决办法&#xff1a; 将模板名称前面加上[Item] 之后就可以正常导入笔记模板了~

Node.js -- 包管理工具

文章目录 1. 概念介绍2. npm2.1 npm 下载2.2 npm 初始化包2.3 npm 包(1) npm 搜索包(2) npm 下载安装包(3) require 导入npm 包的基本流程 2.4 开发依赖和生产依赖2.5 npm 全局安装(1) 修改windows 执行策略(2) 环境变量Path 2.6 安装包依赖2.7 安装指定版本的包2.8 删除依赖2.…

FIFO Generate IP核使用——AXI接口FIFO简介

AXI接口FIFO是从Native接口FIFO派生而来的。AXI内存映射接口提供了三种样式&#xff1a;AXI4、AXI3和AXI4-Lite。除了Native接口FIFO支持的应用外&#xff0c;AXI FIFO还可以用于AXI系统总线和点对点高速应用。 AXI接口FIFO不支持Builtin FIFO和 Shift Register FIFO配置。 当…

分布式与一致性协议之Paxos算法(三)

Paxos算法 兰伯特关于Multi-Paxos的思考 领导者 我们可以通过引入领导者(Leader)节点来解决第一个问题。也就是说将领导者节点作为唯一提议者&#xff0c;如图所示。这样就不存在多个提议者同时提交提案的情况&#xff0c;也就不存在提案冲突的情况了。这里补充一点:在论文中…

CVE-2022-2602:unix_gc 错误释放 io_uring 注册的文件从而导致的 file UAF

前言 复现该漏洞只是为了学习相关知识&#xff0c;在这里仅仅做简单记录下 exp&#xff0c;关于漏洞的详细内容请参考其他文章&#xff0c;最后在 v5.18.19 内核版本上复现成功&#xff0c;v6.0.2 复现失败 漏洞利用 diff --git a/include/linux/skbuff.h b/include/linux/s…

保存钉钉群直播回放下载:直播回放下载步骤详解

今天&#xff0c;我们就来拨开云雾&#xff0c;揭开保存钉钉群直播回放的神秘面纱。教会你们如何下载钉钉群直播回放 首先用到的工具我全部打包好了&#xff0c;有需要的自己下载一下 钉钉群直播回放工具下载&#xff1a;https://pan.baidu.com/s/1WVMNGoKcTwR_NDpvFP2O2A?p…

从零开始学AI绘画,万字Stable Diffusion终极教程(一)

【第1期】SD入门 2022年8月&#xff0c;一款叫Stable Diffusion的AI绘画软件开源发布&#xff0c;从此开启了AIGC在图像上的爆火发展时期 率先学会SD的人&#xff0c;已经挖掘出了越来越多AI绘画有趣的玩法 从开始的AI美女、线稿上色、真人漫改、头像壁纸 到后来的AI创意字、AI…

M2 Mac mini跑Llama3

前言 在4-19左右&#xff0c;Meta 宣布正式推出下一代开源大语言模型 Llama 3&#xff1b;共包括 80 亿和 700 亿参数两种版本&#xff0c;号称 “是 Llama 2 的重大飞跃”&#xff0c;并为这些规模的 LLM 确立了新的标准。实际上笔者早就体验过&#xff0c;只不过自己电脑没什…

在家连学校的服务器

在家连接学校的服务器。 Step1: 首先下载一个vscode的插件 Visual Studio Code - Code Editing. Redefined 我的服务区是ubuntu20.04&#xff0c;x64的&#xff0c;所以下载这个。 Step2: 下载到本地之后&#xff0c;想办法将这个文件拷贝到你的服务器上。 Step3: 解压该包…

自动化滇医通

###我已经将数据爬取出来### 现在开源集合大家的思路一起研究 &#xff08;请更换ip 以及 暂停时间 不然会提示违规操作&#xff09; 脚本读取预约信息后开始随机抢一家的&#xff0c;qiang方法里面请自行修改抓包数据参数&#xff01;&#xff01; 现在开源大家一起讨论 pyt…

3.【Orangepi Zero2】超声模块ultrasonic(HC-SR04)

超声模块ultrasonic&#xff08;HC-SR04&#xff09; HC-SR04 超声波距离传感器如何工作&#xff1f;程序实现初始化超声波启动超声波获取距离整合代码 HC-SR04 超声波距离传感器如何工作&#xff1f; 当Trig引脚设置为高电平达 10s 时&#xff0c;超声波距离传感器开始工作。…

Java进阶-Java Stream API详解与使用

本文全面介绍了 Java Stream API 的概念、功能以及如何在 Java 中有效地使用它进行集合和数据流的处理。通过详细解释和示例&#xff0c;文章展示了 Java Stream API 在简化代码、提高效率以及支持函数式编程方面的优势。文中还比较了 Java Stream API 与其他集合处理库的异同&…

通过符号程序搜索提升prompt工程

原文地址&#xff1a;supercharging-prompt-engineering-via-symbolic-program-search 通过自动探索​​大量提示变体来找到更好的提示 2024 年 4 月 22 日 众所周知&#xff0c;LLMs的成功在很大程度上仍然取决于我们用正确的指导和例子来提示他们的能力。随着新一代LLMs变得越…

微信小程序demo-----制作文章专栏

前言&#xff1a;不管我们要做什么种类的小程序都涉及到宣传或者扩展其他业务&#xff0c;我们就可以制作一个文章专栏的页面&#xff0c;实现点击一个专栏跳转到相应的页面&#xff0c;页面可以有科普类的知识或者其他&#xff0c;然后页面下方可以自由发挥&#xff0c;添加联…

【Android学习】简易计算器的实现

1.项目基础目录 新增dimens.xml 用于控制全部按钮的尺寸。图片资源放在drawable中。 另外 themes.xml中原来的 <style name"Theme.Learn" parent"Theme.MaterialComponents.DayNight.DarkActionBar">变为了&#xff0c;加上后可针对button中增加图片…

禄得可转债自定义因子交易系统,年化40%,最大回撤15%

经过2个月的研究&#xff0c;和大佬们讨论轮动算法&#xff0c;选股算法&#xff0c;终于完成了可转债自定义因子轮动系统&#xff0c;非常感谢禄得老师的数据 文件链接 禄得可转债自定义因子交易系统&#xff0c;年化40%,最大回撤15% (qq.com) 网页 https://lude.cc/ 程序支…

【云原生】Docker 实践(四):使用 Dockerfile 文件的综合案例

【Docker 实践】系列共包含以下几篇文章&#xff1a; Docker 实践&#xff08;一&#xff09;&#xff1a;在 Docker 中部署第一个应用Docker 实践&#xff08;二&#xff09;&#xff1a;什么是 Docker 的镜像Docker 实践&#xff08;三&#xff09;&#xff1a;使用 Dockerf…