React 如何自定义 Hooks

自定义 Hooks

React 内部自带了很多 Hooks 例如 useState、useEffect 等等,那么我们为什么还要自定义 Hooks?使用 Hooks 的好处之一就是重用,可以将代码从组件中抽离出来定义为 Hooks,而不用每个组件中重复去写相同的代码。首先是维护方便,更重要的是封装,Hooks 将业务逻辑进行了封装,只要返回值不变,任何改动对组件都是透明的。

Hooks的设计中,将状态保存在Filber节点上,组件是无状态的,在我们的自定义 Hooks 中通过 useState 访问数据,通过 useEfftect 做副作用逻辑处理。例如,实现一个获取在线人数的 Hooks:

import { useState, useEffect } from 'react';const useOnlineUsers = (apiUrl) => {const [onlineUsers, setOnlineUsers] = useState(0);const [loading, setLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {const fetchOnlineUsers = async () => {try {setLoading(true);const response = await fetch(apiUrl);if (!response.ok) {throw new Error('网络响应不正常');}const data = await response.json();setOnlineUsers(data.totalOnlineUsers);} catch (error) {setError(error.message);} finally {setLoading(false);}};fetchOnlineUsers();// 可选:设置轮询来定期更新在线用户数量const intervalId = setInterval(fetchOnlineUsers, 10000); // 例如,每10秒更新一次// 清理函数来清除 intervalreturn () => clearInterval(intervalId);}, [apiUrl]);return { onlineUsers, loading, error };
};export default useOnlineUsers;

Hooks中通过 useEffect 从后台获取用户数,在需要显示的组件中进行引用:

import React from 'react';
import useOnlineUsers from './useOnlineUsers'; // 根据你的项目结构调整路径const OnlineUsersComponent = () => {const apiUrl = 'https://api.example.com/online-users'; // 替换为你的实际 API URLconst { onlineUsers, loading, error } = useOnlineUsers(apiUrl);if (loading) {return <div>加载中...</div>;}if (error) {return <div>错误: {error}</div>;}return (<div><h1>在线用户数: {onlineUsers}</h1></div>);
};export default OnlineUsersComponent;

自定义 Hooks 的注意事项

  1. 命名规范

自定义 hooks 的名称应该以 “use” 开头,这不仅是为了遵循 React 的惯例,还能使其在代码中一目了然地被识别为 hooks。

const useOnlineUsers = () => {// hook implementation
};
  1. 使用依赖项数组优化性能

在 useEffect 或其他 hooks 中使用依赖项数组来避免不必要的重复执行。

useEffect(() => {// effect logic
}, [dependency1, dependency2]); // 只有当 dependency1 或 dependency2 发生变化时,effect 才会重新执行
  1. 返回需要的所有值

从自定义 hook 返回所有需要的状态和函数,而不仅仅是一个值。这可以让使用 hook 的组件更灵活,就像 useState 一样。

const useCounter = (initialValue = 0) => {const [count, setCount] = useState(initialValue);const increment = () => setCount(count + 1);const decrement = () => setCount(count - 1);return { count, increment, decrement };
};// 在组件中使用
const CounterComponent = () => {const { count, increment, decrement } = useCounter(10);return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button></div>);
};

总结

Hooks 提供了非常优雅的设计方式,通过自定义 Hooks 来提升代码的复用与封装,在日常开发中,也不要过度的使用自定义 Hooks,对于一些简单不需要封装的业务逻辑,则无需定义为 Hooks。

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

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

相关文章

Ps:消失点滤镜 - 测量工具

Ps菜单&#xff1a;滤镜/消失点 Filter/Vanishing Point 快捷键&#xff1a;Ctrl Alt V “消失点”滤镜中的测量工具 Measure Tool用于在透视平面内测量图像中对象的大小&#xff0c;适用于建筑师、设计师、法医和木工等需要精确测量的用户。 快捷键&#xff1a;R ◆ ◆ ◆…

基于springboot+vue的4S店车辆管理系统

开发语言&#xff1a;Java框架&#xff1a;springbootJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;…

CMS Full GC流程以及调优配置

个人博客 CMS Full GC流程以及调优配置 | iwts’s blog CMS CMS 收集器是以实现最短 STW 时间为目标的收集器&#xff0c;所以对于偏业务的后台开发而言&#xff0c;基本上都无脑选CMS了。 多线程收集器&#xff0c;工作在老年代&#xff0c;采用标记清除算法。比较特殊&am…

React开发必须掌握这些es6语法-03

箭头函数 其实就是java的lamda编程&#xff0c;它的特点是单向无环流&#xff0c;没有变量&#xff0c;源数据状态不能被改变。 基本语法 ()> {} //表示一个空函数&#xff0c;和function(){}功能一样&#xff0c;如果只有一行语句则&#xff0c;{}可省略 lef fn arg &g…

【QNX】Qnx IPC通信 Message-passing

Qnx IPC通信 Message-passing Message-passing介绍 QNX提供了多种IPC(Interprocess Communication )通信方式&#xff0c;包括Message-passing、Plus&#xff08;脉冲&#xff09;、Event、Signal、共享内存、Pipe&#xff0c;当然还有socket。 Message-passing是Qnx IPC的主…

机器学习 - 特征预处理 - 分箱

分箱&#xff08;Binning&#xff09;是一种数据预处理技术&#xff0c;将连续变量分割成离散的组别或区间&#xff0c;有助于减少数据的噪音&#xff0c;提高模型的稳定性。以下是五种常见的分箱方法及其详细介绍&#xff1a; 1. 卡方分箱&#xff08;Chi-square Binning&…

【数据结构与算法 经典例题】判断链表是否带环

&#x1f493; 博客主页&#xff1a;倔强的石头的CSDN主页 &#x1f4dd;Gitee主页&#xff1a;倔强的石头的gitee主页 ⏩ 文章专栏&#xff1a;数据结构与算法刷题系列&#xff08;C语言&#xff09; 期待您的关注 目录

渗透测试框架之CobaltStrike,Metasploit域名上线隐藏IP

概述 为什么要隐藏IP 在拿下了目标机之后&#xff0c;目标机在内网里面&#xff0c;使用msf或者CS时&#xff0c;用自己的VPS做服务器的话&#xff0c;导致很容易被溯源。 域名上线原理 当我们访问域名时会经过域名解析 域名解析就是域名到IP地址的转换过程&#xff0c;那么…

头歌传送指令第1关:传送指令 mov

编程要求 根据下方的所给的汇编代码&#xff0c;在右侧编辑器的代码文件的 Begin - End 区域内补充 C 语言代码。 mov %esp,%ebpand $0xfffffff0,%espsub $0x20,%espmovl $0xa,0x18(%esp)mov 0x18(%esp),%eaxmov %eax,0x1c(%esp)mov 0x1c(%esp),%eaxmov %eax,0x8(%esp)mov 0x18…

dubbo复习:(9)配置中心的大坑,并不能像spring cloud那样直接从配置中心读取自定义的配置

配置中心只是为 Dubbo 配置提供管理使用的&#xff08;比如配置服务超时时间等)。不要尝试通过Value类似的方式从dubbo 配置中心(比如nacos、zookeeper、Apollo)来获取数据 https://github.com/apache/dubbo/issues/11200可以在application.yml中主要写注册中心的配置&#xf…

【深度学习基础】NumPy数组库的使用

目录 写在开头 一、数组的类型与维度 数组的类型 数组的维度 二、数组的创建 递增数组 同值数组 随机数数组 三、数组的索引 访问/修改单个元素 花式索引 数组的切片 四、数组的变形 数组的转置 数组的翻转 数组的形状改变 数组的拼接 五、数组的运算 数…

Linux系统启动原理

Linux系统启动原理及故障排除 Centos6系统启动过程 修改系统启动级别 vim /etc/inittabCentos7启动流程 加载BIOS信息&#xff0c;进行硬件检测 根据BIOS设定读取设备中的MBR&#xff0c;加载Boot loader 加载内核&#xff0c;内核初始化以后以模块的形式动态加载硬件 并且加…

FFmpeg的流程

文章目录 前序代码结构FFmpeg.cffmpeg_opt.c 小结 前序 之前看过FFmpeg的各种命令&#xff0c;然后不是很理解。相信很多人都不是很理解&#xff0c;毕竟&#xff0c;单纯的去记住那些命令行本身就需要很大的内存&#xff0c;我们的大脑内存又有限&#xff0c;所以&#xff0c…

java “错误:编码GBK 的不可映射字符”

环境&#xff1a;JDK-17 本机编码&#xff1a;utf-8 代码编码&#xff1a;GBK 错误&#xff1a;java “错误&#xff1a;编码GBK 的不可映射字符” 解决1&#xff1a;记事本打开java源文件&#xff0c;另存为选择ANSI编码 解决2&#xff1a;复制代码再将编码格式改为utf-8,…

内网环境基础

什么是内网渗透? 在得到webshell后下一步渗透就是内网渗透 内网渗透就是拿到企业或者公司的内网权限&#xff0c;然后从内网得到最有价值的战果。 内网渗透和外网渗透有啥区别? 内网渗透&#xff1a;比如公司内部局域网 或者酒店内部局域网等。从内部寻找安全问题 外网渗…

错题本之<数据结构>

已知指针 p 指向单向不循环链表中的某一个节点&#xff0c;且不知道头结点。 问&#xff1a;如何删除 p 指向的节点&#xff1f; 答&#xff1a; 如果 p 指向的不是最后一个节点 定义一个指针 q 保存 p->next; 然后将 q 的数据域和指针域都覆盖到 p 指向的节点中 最后释放 …

java欢迪迈手机商城设计与实现源码(springboot+vue+mysql)

风定落花生&#xff0c;歌声逐流水&#xff0c;大家好我是风歌&#xff0c;混迹在java圈的辛苦码农。今天要和大家聊的是一款基于springboot的欢迪迈手机商城设计与实现。项目源码以及部署相关请联系风歌&#xff0c;文末附上联系信息 。 项目简介&#xff1a; 欢迪迈手机商城…

[emailprotected](10)HOC高阶组件和横切关注点

目录 1&#xff0c;什么是HOC2&#xff0c;什么是横切关注点2.1&#xff0c;简单理解2.2&#xff0c;常见解决方式 3&#xff0c;HOC 举例3.1&#xff0c;全局功能3.2&#xff0c;小范围使用 4&#xff0c;HOC 使用注意点4.1&#xff0c;不要在 render 中使用4.2&#xff0c;不…

spring状态机实战

一、什么是状态机 状态机是有限状态自动机的简称&#xff0c;是现实事物运行规则抽象而成的一个数学模型&#xff0c;是一种概念性机器&#xff0c;它能采取某种操作来响应一个外部事件。这种操作不仅能取决于接收到的事件&#xff0c;还能取决于各个事件的相对发生顺序。状态…