React Hooks 全解: 常用 Hooks 及使用场景详解

React Hooks 是 React 16.8 版本引入的一项重要特性,它极大地简化和优化了函数组件的开发过程。 React 中常用的 10 个 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect、useImperativeHandle 和 useDebugValue。这些 Hooks 涵盖了状态管理、副作用处理、性能优化、DOM 操作等各个方面,为开发者提供了强大的工具,大幅提高了开发效率和代码质量。

在这里插入图片描述

无论您是 React 新手还是老手,全面而深入的 Hooks 知识,帮助您更好地掌握 React 函数组件的开发技巧。让我们一起探索 React Hooks 的强大功能,提升您的 React 开发水平。

  1. useState

    • 使用场景: 管理组件内部的状态
    • 示例代码:
      import { useState } from 'react';function Counter() {const [count, setCount] = useState(0);return (<div><p>You clicked {count} times</p><button onClick={() => setCount(count + 1)}>Click me</button></div>);
      }
      
  2. useEffect

    • 使用场景: 处理组件生命周期,例如数据获取、订阅、手动更改 DOM 等
    • 示例代码:
      import { useState, useEffect } from 'react';function FetchData() {const [data, setData] = useState([]);useEffect(() => {async function fetchData() {const response = await fetch('/api/data');const data = await response.json();setData(data);}fetchData();}, []);return (<div><h1>Fetched Data</h1><ul>{data.map((item) => (<li key={item.id}>{item.name}</li>))}</ul></div>);
      }
      
  3. useContext

    • 使用场景: 跨组件传递数据,避免"prop drilling"
    • 示例代码:
      import { createContext, useContext } from 'react';const ThemeContext = createContext('light');function App() {return (<ThemeContext.Provider value="dark"><ThemedButton /></ThemeContext.Provider>);
      }function ThemedButton() {const theme = useContext(ThemeContext);return <button style={{ backgroundColor: theme === 'dark' ? 'black' : 'white' }}>Theme Button</button>;
      }
      
  4. useReducer

    • 使用场景: 管理复杂的状态逻辑
    • 示例代码:
      import { 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 (<div><p>Count: {state.count}</p><button onClick={() => dispatch({ type: 'increment' })}>+</button><button onClick={() => dispatch({ type: 'decrement' })}>-</button></div>);
      }
      
  5. useCallback

    • 使用场景: 缓存函数引用,优化性能
    • 示例代码:
      import { useState, useCallback } from 'react';function Parent() {const [count, setCount] = useState(0);const handleClick = useCallback(() => {setCount(count + 1);}, [count]);return (<div><p>Count: {count}</p><ChildComponent onClick={handleClick} /></div>);
      }function ChildComponent({ onClick }) {console.log('ChildComponent rendered');return <button onClick={onClick}>Increment</button>;
      }
      
  6. useMemo

    • 使用场景: 缓存计算结果,优化性能
    • 示例代码:
      import { useState, useMemo } from 'react';function ExpensiveCalculation() {const [number, setNumber] = useState(0);const doubledNumber = useMemo(() => {return slowlyDoubleNumber(number);}, [number]);return (<div><input type="number" value={number} onChange={(e) => setNumber(parseInt(e.target.value))} /><p>Doubled number: {doubledNumber}</p></div>);
      }function slowlyDoubleNumber(n) {// 模拟一个耗时的计算let i = 0;while (i < 1000000000) i++;return n * 2;
      }
      
  7. useRef

    • 使用场景: 获取 DOM 元素引用,保存可变状态
    • 示例代码:
      import { useRef } from 'react';function FocusInput() {const inputRef = useRef(null);const handleClick = () => {inputRef.current.focus();};return (<div><input type="text" ref={inputRef} /><button onClick={handleClick}>Focus Input</button></div>);
      }
      
  8. useLayoutEffect

    • 使用场景: 处理 DOM 操作,需要同步执行
    • 示例代码:
      import { useLayoutEffect, useRef } from 'react';function MeasureElement() {const elementRef = useRef(null);useLayoutEffect(() => {const element = elementRef.current;console.log('Element width:', element.offsetWidth);}, []);return <div ref={elementRef}>This is the element to measure</div>;
      }
      
  9. useImperativeHandle

    • 使用场景: 暴露组件实例方法给父组件
    • 示例代码:
      import { forwardRef, useImperativeHandle, useRef } from 'react';const CustomInput = forwardRef((props, ref) => {const inputRef = useRef(null);useImperativeHandle(ref, () => ({focus: () => {inputRef.current.focus();}}));return <input type="text" ref={inputRef} />;
      });function App() {const inputRef = useRef(null);const handleClick = () => {inputRef.current.focus();};return (<div><CustomInput ref={inputRef} /><button onClick={handleClick}>Focus Input</button></div>);
      }
      
  10. useDebugValue

    • 使用场景: 为自定义 Hooks 提供调试标签
    • 示例代码:
      import { useState, useDebugValue } from 'react';function useCustomHook() {const [state, setState] = useState(0);useDebugValue(`Current state: ${state}`);// 自定义 Hook 的其他逻辑return [state, setState];
      }
      

这些是 React 中一些其他常用的 Hooks,它们可以帮助你进一步优化组件的逻辑和性能。每个 Hook 都有其特定的使用场景和使用方式,希望这个列表能为你提供一些参考和启发。

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

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

相关文章

ARM内核的CPU架构模型

1.引言 程序员在编码的时候&#xff0c;如果想有进一步的提升&#xff0c;我认为还是要深入底层理解程序运行原理才好。最近看了一些ARM架构的讲解&#xff0c;总结了如下。虽然是以ARM为原型画的图形&#xff0c;但是对于C和C的编程&#xff0c;还是有一些参考价值的。 2. AR…

云服务器租用一年、1个月优惠价格表,阿里/腾讯/京东/华为云

现在租一个服务器多少一个月&#xff1f;优惠价格低至3.8元1个月&#xff0c;租用一个月云服务器收费价格表&#xff1a;阿里云和腾讯云2核2G3M服务器优惠价格61元一年&#xff0c;折合一个月5元&#xff0c;京东云轻量云主机5.8元一个月&#xff0c;华为云服务器优惠价格3.8元…

wangeditor与deaftjs的停止维护,2024编辑器该如何做技术选型(一)

wangeditor暂停维护的声明&#xff1a; wangeditor是国内开发者开发的编辑器&#xff0c;用户也挺多&#xff0c;但是由于作者时间关系&#xff0c;暂停维护。 deaft的弃坑的声明&#xff1a; draft是Facebook开源的&#xff0c;但是也弃坑了&#xff0c;说明设计的时候存在很大…

为数据穿上安全的外衣——零售电商场景下的数据安全体系建设

在电子商务交易过程中&#xff0c;会涉及大量的个人和财务数据的传输和处理&#xff0c;随着电子商务的发展&#xff0c;数据安全风险也成为一个备受关注的问题。 而跨境电商&#xff0c;属于出海业务&#xff0c;涉及到海外不同国家的政策法规&#xff0c;且数据作为电商的业…

等保测评2.0——网络安全等级保护测评的初步了解

一、什么是网络安全等级保护测评&#xff1f; 二、网络安全等级保护&#xff0c;保护的是什么&#xff1f; 等级保护对象&#xff1a;网络安全等级保护工作直接作用的对象。&#xff08;注&#xff1a;主要包括信息系统、通信网络设施和数据资源等&#xff09; 计算机信息系统…

数据库系统概论(超详解!!!)第四节 数据库安全性

问题的提出&#xff1a; 数据库的一大特点是数据可以共享 数据共享必然带来数据库的安全性问题 数据库系统中的数据共享不能是无条件的共享。 1.数据库的安全概述 数据库的安全性是指保护数据库以防止不合法使用所造成的数据泄露、更改或破坏 。 系统安全保护措施是否有效…

Linux【实战篇】—— NFS服务搭建与配置

目录 一、介绍 1.1什么是NFS&#xff1f; 1.2客户端与服务端之间的NFS如何进行数据传输&#xff1f; 1.3RPC和NFS的启动顺序 1.4NFS服务 系统守护进程 二、安装NFS服务端 2.1安装NFS服务 2.2 创建共享目录 2.3创建共享目录首页文件 2.4关闭防火墙 2.5启动NFS服务 2.…

基于VC709构建FPGA开发学习平台(一)-系统时钟与LED

一、时钟 1. 系统时钟 板载U34可编程晶振SI570&#xff0c;为用户提供基础时钟&#xff0c;上电后&#xff0c;默认时钟频率为156.25Mhz&#xff0c;可作为free run时钟源&#xff0c;输入到PLL中&#xff0c;生成系统时钟&#xff1a; 约束为&#xff1a; set_property PACK…

Unity给地图物体添加对撞机

在项目/Assets下创建Prefabs文件夹 选择素材拖入层级下&#xff0c;注意此时地图素材有可能看不到&#xff0c;此时选择Tilemap在检查器中修改图层顺序调至最低。 添加对撞机 选择素材&#xff0c;在检查器中点击添加组件Box Collider 2D&#xff0c;将素材拖入Prefabs文件下…

SSL、TLS和HTTPS:网络安全的重要基石

随着互联网的快速发展&#xff0c;网络安全问题日益凸显。为了保护数据在传输过程中的安全&#xff0c;各种加密协议和技术应运而生。SSL&#xff08;安全套接层&#xff09;、TLS&#xff08;传输层安全&#xff09;和HTTPS&#xff08;超文本传输安全协议&#xff09;是三个最…

力扣LeetCode138. 复制带随机指针的链表 两种解法(C语言实现)

目录 题目链接 题目分析 题目定位&#xff1a; 解题思路 解题思路1&#xff08;粗暴但是复杂度高&#xff09; 解题思路2&#xff08;巧妙并且复杂度低&#xff09; 题目链接 138. 复制带随机指针的链表https://leetcode-cn.com/problems/copy-list-with-random-pointer/ …

【STL详解 —— list的介绍及使用】

STL详解 —— list的介绍及使用 list的介绍list的介绍使用list的构造list iterator的使用list capacitylist element accesslist modifiers 示例list的迭代器失效 list的介绍 list是可以在常数范围内在任意位置进行插入和删除的序列式容器&#xff0c;并且该容器可以前后双向迭…

分类预测 | Matlab实现基于迁移学习和GASF-CNN-Mutilhead-Attention格拉姆角场和卷积网络多头注意力机制多特征分类预测/故障识别

分类预测 | Matlab实现基于迁移学习和GASF-CNN-Mutilhead-Attention格拉姆角场和卷积网络多头注意力机制多特征分类预测/故障识别 目录 分类预测 | Matlab实现基于迁移学习和GASF-CNN-Mutilhead-Attention格拉姆角场和卷积网络多头注意力机制多特征分类预测/故障识别分类效果基…

自动化运维工具Ansible

ansible 主要的意义在于可以 提高运维工作效率&#xff0c;降低成本提高准确度 资料 Ansible中文权威指南 离线安装 wget https://github.com/ansible/ansible/archive/refs/tags/v2.16.5.tar.gz tar -zxvf v2.16.5.tar.gz cd ansible-v2.16.5 python setup.py install 主要…

jmeter使用之生成html测试报告

测试的最终结果是需要给出一份报告&#xff0c;那么在用jmeter测试时怎么生成一份报告呢&#xff0c;以下针对jmeter如何生成html报告进行简单介绍 一、首先把测试脚本写好二、利用命令生成html报告 命令&#xff1a;jmeter -n -t 【Jmx脚本位置】-l 【结果文件result.jtl存放…

2001-2022年全国各省产业链现代化水平测算(两种方法)-含原始数据、计算结果及do代码

01、数据简介 各省份的产业链现代化水平是一个综合性的评估指标&#xff0c;它涉及到多个因素&#xff0c;包括技术创新、产业升级、生产效率、产业结构优化等方面。这个指标可以用来衡量一个省份在产业链现代化进程中的发展水平和竞争力。该数据揭示了中国省份在推动产业现代…

【C++题解】 问题:1109 - 加密四位数

问题&#xff1a;1109 - 加密四位数 类型&#xff1a;基础问题、拆位求解 题目描述&#xff1a; 某军事单位用 4 位整数来传递信息&#xff0c;传递之前要求先对这个 4 位数进行加密。加密的方式是每一位都先加上 5 然后对 10 取余数&#xff0c;再将得到的新数颠倒过来。 例…

迈威通信MaxGate800系列工业边缘计算网关,算力硬核中枢的巅峰之作

随着人们对工业物联网领域的深入了解与实践&#xff0c;越来越多的企业开始寻求将计算业务从云端迁移至网络边缘处理与执行。然而&#xff0c;在实际应用中&#xff0c;开发者面临着诸多挑战。为了解决这些问题&#xff0c;迈威通信MaxGate800系列工业智能网关应运而生。 MaxG…

2024年MathorCup数学建模C题物流网络分拣中心货量预测及人员排班解题文档与程序

2024年第十四届MathorCup高校数学建模挑战赛 C题 物流网络分拣中心货量预测及人员排班 原题再现&#xff1a; 电商物流网络在订单履约中由多个环节组成&#xff0c;图1是一个简化的物流网络示意图。其中&#xff0c;分拣中心作为网络的中间环节&#xff0c;需要将包按照不同流…

分布式技术--------------ELK大规模日志实时收集分析系统

目录 一、ELK日志分析系统 1.1ELK介绍 1.2ELK各组件介绍 1.2.1ElasticSearch 1.2.2Kiabana 1.2.3Logstash 1.2.4可以添加的其它组件 1.2.4.1Filebeat filebeat 结合logstash 带来好处 1.2.4.2缓存/消息队列&#xff08;redis、kafka、RabbitMQ等&#xff09; 1.2.4.…