React@16.x(24)自定义HOOK

目录

  • 1,介绍
  • 2,简单举例
    • 2.1,获取数据
    • 1.2,计时器
  • 2,自定义 HOOK 相比类组件

1,介绍

将一些常用的,跨组件的函数抽离,做成公共函数也就是 HOOK。自定义HOOK需要按照HOOK的规则来实现,才能像 useEffect 一样的使用。

可以看到,和项目中常用的工具方法 utils 类似,不同的是自定义HOOK 通常与业务强相关。

规则

  1. 函数名必须以 use 开头;
  2. 其他函数组件调用自定义HOOK函数时,应该放到顶层。

注意自定义HOOK 函数和函数组件的区别:要将函数当做组件来使用,函数名首字母必须大写

2,简单举例

2.1,获取数据

import { useEffect, useState } from "react";export const useList = () => {const [list, setList] = useState([]);useEffect(() => {(async () => {const res = await getFakerList();setList(res);})();}, []);return list;
};const getFakerList = () => {return new Promise((resolve) => {setTimeout(() => {resolve([1, 2, 3]);}, 1000);});
};

使用,

import React from "react";
import { useList } from "./hooks";
export default function App() {const list = useList();const li = list.map((m) => <li key={m}>{m}</li>);return <ul>{li}</ul>;
}

整体执行顺序:

  1. 函数组件调用 useList 函数
    1. 执行 useEffect 副作用函数,请求接口获取数据。
    2. 返回状态变量 list,此时获取的是空数组。

useEffect 副作用函数,使用立即执行函数的原因:
想使用 await 关键字,但 useEffect 的第一个参数有要求,如果有返回则必须是普通函数,所以不能把 async 关键字加到它上面。

type EffectCallback = () => (void | (() => void | undefined));
  1. 当模拟接口获取到数据,会更新状态变量 list,触发更新。所以 App.js 中会获取更新后的值渲染到页面。

可以将 useList 的函数体看做是在 App.js 中,也就是说,声明的状态其实放到了 App 函数组件中。
所以其实是 App 函数组件重新渲染,触发了 useList 函数重新调用。

1.2,计时器

import { useEffect } from "react";export const useTimer = (func, duration = 1000) => {useEffect(() => {const timer = setInterval(func, duration);return () => {clearInterval(timer);};}, []);
};

使用时,只需要关心要执行的内容即可。

import React from "react";
import { useTimer } from "./hooks";export default function App() {useTimer(() => {console.log("计时器的内容");});return <div>测试</div>;
}

2,自定义 HOOK 相比类组件

可以看到,通过HOOK实现的公共逻辑,如果在类组件中实现会比较繁琐,甚至会有到高阶组件才能实现。
而高阶组件虽然增强了类组件的功能,但带来了一些问题,比如 ref 转发,属性传递等,并且组件的嵌套层级也比较多,远不如 HOOK 来的方便。


以上。

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

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

相关文章

什么是APP加固?

APP加固是一系列技术手段的集合&#xff0c;旨在提升移动应用程序的安全性&#xff0c;保护其免受各种攻击和威胁。加固技术可以对应用程序的代码、数据、运行环境等多个方面进行保护&#xff0c;从而提高应用的整体安全性和韧性。 常见的APP加固技术 代码混淆&#xff1a; 代码…

82-nginx配置正向代理

可以通过配置 Nginx 使其作为正向代理并通过代理程序访问目标服务器。 配置 Nginx 作为正向代理 安装 Nginx&#xff08;如果尚未安装&#xff09;&#xff1a; sudo apt update sudo apt install nginx配置 Nginx&#xff1a; 打开 Nginx 的配置文件进行编辑&#xff1a; sud…

深入JVM:线上内存泄漏问题诊断与处理

文章目录 深入JVM&#xff1a;线上内存泄漏问题诊断与处理一、序言二、内存泄漏概念三、内存泄漏环境模拟四、内存泄漏诊断与解决1、步骤一&#xff1a;获取堆内存快照文件&#xff08;1&#xff09;获取正在运行程序dump文件&#xff08;2&#xff09;获取已终止程序dump文件 …

大数据集群各种报错及解决方案

一、启动hive报错 [rootmaster sbin]# hive Hive Session ID 991ccabe-96b4-4fae-8b1c-ac2856ab182eLogging initialized using configuration in jar:file:/root/soft/hive/apache-hive-3.1.3-bin/lib/hive-common-3.1.3.jar!/hive-log4j2.properties Async: true Exception…

FCN-语义分割中的全卷积网络

FCN-语义分割中的全卷积网络 语义分割 语义分割是计算机视觉中的关键任务之一&#xff0c;现实中&#xff0c;越来越多的应用场景需要从影像中推理出相关的知识或语义&#xff08;即由具体到抽象的过程&#xff09;。作为计算机视觉的核心问题&#xff0c;语义分割对于场景理…

SpringBoot解决跨域的三种解决方案

目录 一、什么是跨域 二、示例代码 三、解决方案 3.1、添加@CrossOrigin注解 3.2、配置WebMvcConfigurer 3.3、配置Filter 3.4、补充 一、什么是跨域 跨域是指在 Web 开发中,通过不同域名的网站之间进行数据交互或资源共享时,由于浏览器的同源策略限制导致的访问限制…

软件游戏提示msvcp120.dll丢失的解决方法,总结多种靠谱的解决方法

在电脑使用过程中&#xff0c;我们可能会遇到一些错误提示&#xff0c;其中之一就是“找不到msvcp120.dll”。那么&#xff0c;msvcp120.dll是什么&#xff1f;它对电脑有什么影响&#xff1f;有哪些解决方法&#xff1f;本文将从以下几个方面进行探讨。 一&#xff0c;了解msv…

讲一讲C++面向对象三大特性【面试】

在C面试中&#xff0c;当面试官询问面向对象编程&#xff08;OOP&#xff09;的三大特性时&#xff0c;你可以这样回答&#xff1a; 封装&#xff08;Encapsulation&#xff09;&#xff1a; 封装是将对象的实现细节隐藏起来&#xff0c;只暴露出一个可以被外界访问的接口。这增…

htb-linux-1-lame-smb3.0.20

namp smb漏洞 搜索关键词 其他 smb Samba是在linux和unix系统上实现SMB&#xff08;Server Message Block&#xff0c;信息服务块&#xff09;协议的一款免费软件。SMB是一种在局域网上共享文件和打印机的通信协议&#xff0c;它在局域网内使用linux和Windows系统的机器之…

手把手带你做一个自己的网络调试助手(2) - TCP服务器完善

服务器指定客户端发送 自定义控件comboBox - 刷新客户端列表 目的&#xff1a; 自定义控件&#xff0c;当鼠标点击这个comboBox控件的时候去刷新客户端列表 mycombobox.h #ifndef MYCOMBOBOX_H #define MYCOMBOBOX_H#include <QComboBox> #include <QWidget>cl…

【RAG入门教程04】Langchian的文档切分

在 Langchain 中&#xff0c;文档转换器是一种在将文档提供给其他 Langchain 组件之前对其进行处理的工具。通过清理、处理和转换文档&#xff0c;这些工具可确保 LLM 和其他 Langchain 组件以优化其性能的格式接收数据。 上一章我们了解了文档加载器&#xff0c;加载完文档之…

运维实用小脚本,登录即自动显示系统信息

今天给大家安利一个超级实用的Linux小技巧&#xff0c;让你每次登录终端时都能感受到满满的科技感和效率爆棚&#xff01; 你是否厌倦了每次手动检查系统状态&#xff0c;像内存使用、CPU负载这些繁琐操作&#xff1f;别担心&#xff0c;一个小调整&#xff0c;让这一切自动化…

技术与业务的完美融合:大数据BI如何真正提升业务价值

数据分析有一点经典案例 沃尔玛的啤酒和尿布案例 开始做BI的时候&#xff0c;大家肯定都看过书&#xff0c;那么一定也看过一个经典的案例&#xff0c;就是沃尔玛的啤酒和尿布的案例。这个案例确实很经典&#xff0c;但其实是一个失败的案例。为什么这么说呢&#xff1f;很明显…

Android.mk文件生成的so工程文件并Debug调试native code

1.这里主要展示一下从最原始先新建一个工程 2.将hello的子工程文件放入上面新建好的工程里面&#xff0c;直接拷贝放置这里 3.修改根目录下的settings.gradle 加入hello 4.app工程下的build.gradle加入依赖&#xff0c;这样就可以识别hello中的java包文件 5.MainActivity 中来&…

Leetcode 3040. 相同分数的最大操作数目 II(记忆化搜索)

Leetcode 3040. 相同分数的最大操作数目 II 每次操作给出三种选择&#xff0c;根据三种选择分别进行dfs 超时 class Solution {int dfs(int[] nums, int l, int r, int sum){if(l > r)return 0;int res 0;// 删最前面两个if(sum -1 || nums[l] nums[l 1] sum){res M…

RabbitMQ-topic exchange使用方法

RabbitMQ-默认读、写方式介绍 RabbitMQ-发布/订阅模式 RabbitMQ-直连交换机(direct)使用方法 目录 1、概述 2、topic交换机使用方法 2.1 适用场景 2.2 解决方案 3、代码实现 3.1 源代码实现 3.2 运行记录 4、小结 1、概述 topic 交换机是比直连交换机功能更加强大的…

信息学奥赛初赛天天练-24-二叉树、N叉树遍历技巧与前缀表达式、中缀表达式、后缀表达式应用实战演练

PDF文档公众号回复关键字:20240609 单项选择题(共15题,每题2分,共计30分:每题有且仅有一个正确选项) 5 根节点的高度为1,一根拥有2023个节点的三叉树高度至少为( )。 A 6 B 7 C 8 D 9 8 后缀表达式 6 2 3 + - 3 8 2 / + * 2 ^ 3 + 对应的中缀表达式是( ) A ((…

「动态规划」打家劫舍的变形题,你会做吗?

213. 打家劫舍 IIhttps://leetcode.cn/problems/house-robber-ii/description/ 你是一个专业的小偷&#xff0c;计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金。这个地方所有的房屋都围成一圈&#xff0c;这意味着第一个房屋和最后一个房屋是紧挨着的。同时&#x…

Spring RestClient报错:400 Bad Request : [no body]

我项目采用微服务架构&#xff0c;所以各服务之间通过Spring RestClient远程调用&#xff0c;本来一直工作得好好的&#xff0c;昨天突然发现远程调用一直报错&#xff0c;错误详情如下&#xff1a; org.springframework.web.client.HttpClientErrorException$BadRequest: 400…

使用 Vue 官方脚手架初始化 Vue3 项目

Vite 官网&#xff1a;https://cn.vitejs.dev/ Vue 官网&#xff1a;https://vuejs.org/ Vue 官方文档&#xff1a;https://cn.vuejs.org/guide/introduction.html Element Plus 官网&#xff1a;https://element-plus.org/ Tailwind CSS 官网&#xff1a;https://tailwindcss.…