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.mzph.cn/news/830314.shtml

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

相关文章

ssm088基于JAVA的汽车售票网站abo+vue

汽车售票网站的设计与实现 摘 要 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。针对汽车售票信息管理混乱&#xff0c;出错率…

基于stm32的USB模拟UART的尝试F429

目录 基于stm32的USB模拟UART的尝试F429实验目的场景使用原理图USBX 组件移植USBX实现虚拟串口配置USB移植USBX源码工程中添加对应源码修改usb_otg.c创建 USBX 任务添加使用串口的代码上机现象本文中使用的测试工程 基于stm32的USB模拟UART的尝试F429 本文目标&#xff1a;基于…

uniapp-vue3-wechat:基于uniapp+vue3仿微信app聊天实例(H5+小程序+App端)

uni-vue3-wchat&#xff1a;基于uni-appvue3pinia2高仿微信app聊天模板。 原创基于最新跨端技术uni-appvue3.xpinia2vite4uv-ui构建三端仿微信app界面聊天实例。实现编辑框多行消息/emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。支持编译到H5小程序…

数据结构与算法-抽象数据类型ADT系列

以前在学习数据结构的时候做实验&#xff0c;老师要求用ADT抽象数据类型来写这些实现代码。后面也要复习数据结构&#xff0c;在这里就先放下链接。不过以前学习的时候使用的编程语言是C&#xff0c;里面会用到很多指针。现在编代码过程大多数时候都是用Java。不过思路应该还是…

keytool,openssl的使用

写在前面 在生成公钥私钥&#xff0c;配置https时经常需要用到keytool&#xff0c;openssl工具&#xff0c;本文就一起看下其是如何使用的。 keytool是jdk自带的工具&#xff0c;不需要额外下载&#xff0c;但openssl需要额外下载 。 1&#xff1a;使用keytool生成jks私钥文件…

WEB攻防-IIS中间件PUT漏洞

IIS6.0 server在web服务扩展中开启了WebDAV&#xff08;Web-based Distributed Authoring and Versioning&#xff09;。WebDAV是一种HTTP1.1的扩展协议。它扩展了HTTP 1.1&#xff0c;在GET、POST、HEAD等几个HTTP标准方法以外添加了一些新的方法&#xff0c;如PUT&#xff0c…

自动驾驶横向控制算法

本文内容来源是B站——忠厚老实的老王&#xff0c;侵删。 三个坐标系和一些有关的物理量 使用 frenet坐标系可以实现将车辆纵向控制和横向控制解耦&#xff0c;将其分开控制。使用右手系来进行学习。 一些有关物理量的基本概念&#xff1a; 运动学方程 建立微分方程 主要是弄…

Linux进程——进程的概念(PCB的理解)

前言&#xff1a;在了解完冯诺依曼体系结构和操作系统之后&#xff0c;我们进入了Linux的下一篇章Linux进程&#xff0c;但在学习Linux进程之前&#xff0c;一定要阅读理解上一篇内容&#xff0c;理解“先描述&#xff0c;再组织”才能更好的理解进程的含义。 Linux进程学习基…

Hadoop3:集群搭建及常用命令与shell脚本整理(入门篇,从零开始搭建)

一、集群环境说明 1、用VMware安装3台Centos7.9虚拟机 2、虚拟机配置&#xff1a;2C&#xff0c;2G内存&#xff0c;50G存储 3、集群架构 从表格中&#xff0c;可以看出&#xff0c;Hadoop集群&#xff0c;主要有2部分&#xff0c;一个是HDFS服务&#xff0c;一个是YARN服务 …

记一次内网渗透

环境搭建&#xff1a; 排错&#xff1a; 在搭建过程中发现报错&#xff0c;删除这部分内容就成功解决。 信息收集 端口扫描 使用namp -sn 探测存活IP 接着去查看服务 web服务 然后发现80端口。访问 发现有管理员接口&#xff0c;并泄露了默认用户名和密码。 弱口令登录 …

vue中配置 测试、准生产、生产环境

在package.json,scripts中配置 "dev": "vue-cli-service serve --open --mode dev",在项目根目录下配置 新建 .env.dev 和.env.development文件 //类似于title NODE_ENV "serve" //各环境API数据接口请求地址 VUE_APP_BASE_API "http:…

软件测试笔记_习题_面经

软件测试------按测试阶段划分有几个阶段? 单元测试、集成测试、系统测试、验收测试 软件测试------按是否查看源代码划分有几种测试方法? 黑盒、白盒、灰盒 软件测试------按是否运行划分有几种测试方法? 静态测试、动态测试 软件测试------按是否自动化划分有几种测试方…

在远程服务器上安装anaconda以及配置pytorch虚拟环境

目录 第一步&#xff1a;官网或者清华源下载Anaconda。 第二步&#xff1a;创建虚拟环境。 第三步&#xff1a;在服务器终端输入nvidia-smi查看服务器信息。 第四步&#xff1a;在pytorch官网找到对应版本cuda的命令。 第一步&#xff1a;官网或者清华源下载Anaconda。 官网…

智慧安防边缘计算硬件AI智能分析网关V4算法启停的操作步骤

TSINGSEE青犀视频智能分析网关V4内置了近40种AI算法模型&#xff0c;支持对接入的视频图像进行人、车、物、行为等实时检测分析&#xff0c;上报识别结果&#xff0c;并能进行语音告警播放。硬件管理平台支持RTSP、GB28181协议、以及厂家私有协议接入&#xff0c;可兼容市面上常…

02 - 步骤 Kafka consumer

简介 Kafka consumer 步骤&#xff0c;用于连接和消费 Apache Kafka 中的数据,它可以作为数据管道的一部分&#xff0c;将 Kafka 中的数据提取到 Kettle 中进行进一步处理、转换和加载&#xff0c;或者将其直接传输到目标系统中。 使用 场景 我需要订阅一个Kafka的数据&…

MyBatis(环境配置+基本CRUD)

文章目录 1.基本介绍1.为什么需要MyBatis&#xff1f;2.MyBatis介绍3.MyBatis工作示意图4.MyBatis的优势 2.快速入门文件目录1.需求分析2.数据库表设计3.父子模块环境配置1.创建maven父项目2.删除父项目的src目录3.pom.xml文件文件解释 4.创建子模块1.新建一个Module2.创建一个…

MySQL Binlog 闪回与分析

文章目录 前言1. 修改 event 实现闪回1.1 binlog 结构1.2 闪回案例1.3 方法总结 2. 解析文本闪回2.1 mysqlbinlog2.2 闪回案例2.3 方法总结 3. 在线订阅闪回3.1 mysql-replication3.2 binlog2sql3.3 方法总结 4. Binlog 分析方法4.1 分析场景4.2 辅助定位事务4.3 方法总结 5. 平…

【C/C++笔试练习】OSI分层模型、源端口和目的端口、网段地址、SNMP、状态码、tcp报文、域名解析、HTTP协议、计算机网络、美国节日、分解因数

文章目录 C/C笔试练习选择部分&#xff08;1&#xff09;OSI分层模型&#xff08;2&#xff09;源端口和目的端口&#xff08;3&#xff09;网段地址&#xff08;4&#xff09;SNMP&#xff08;5&#xff09;状态码&#xff08;6&#xff09;tcp报文&#xff08;7&#xff09;域…

美国站群服务器上常见的操作系统选择指南

美国站群服务器上常见的操作系统选择指南 美国站群服务器的选择操作系统对于服务器的性能和功能至关重要。本文将为您介绍在美国站群服务器上常见的操作系统选择指南&#xff0c;以帮助您做出明智的决策。 在选择美国站群服务器时&#xff0c;选择合适的操作系统是至关重要的…

鸿蒙OpenHarmony【标准系统 烧录】(基于RK3568开发板)

烧录 烧录是指将编译后的程序文件下载到芯片开发板上的动作&#xff0c;为后续的程序调试提供基础。DevEco Device Tool提供一键烧录功能&#xff0c;操作简单&#xff0c;能快捷、高效的完成程序烧录&#xff0c;提升烧录的效率。 RK3568的镜像烧录通过Windows环境进行烧录&…