React自定义 Hook

自定义 Hook

面向初学者的React自定义Hook问题:

1、什么是自定义Hook?

        自定义Hook是React 16.8版本中引入的新特性,让你在不编写class的情况下使用state以及其他的React特性。

        自定义Hook是一种自定义函数,它封装了React Hook的逻辑,并通过命名约定来使其可重用。自定义Hook可以用来解决组件之间共享的逻辑,例如处理表单的输入、状态管理、异步请求等。使用自定义Hook可以提高代码重用性和可读性,并让代码更易于测试和维护。自定义Hook的命名约定通常以"use"开头,例如"useForm"、"useFetch"等。

        通过自定义Hook,可以让你将组件之间的共享状态逻辑提取到可重用的函数中。它们不需要更改组件层次结构,而且不需要引入更深层次的嵌套组件来传递 props。这样可以使代码更加简洁和易于维护。

2、自定义Hook的基本规则是什么?

React 自定义 Hook 的基本规则包括:

  1. Hook 的名称必须以 "use" 开头,以示其为一个 Hook。

  2. Hook 内部只能调用其他的 Hook,不能调用其他的普通函数。

  3. Hook 必须在函数的最顶层使用,不能在循环、条件语句或者子函数中使用。

  4. 自定义 Hook 应该具有清晰的功能,而且要足够通用,方便在多个组件中使用。

  5. 由于自定义 Hook 本身就是一个函数,因此可以接受参数,也可以返回值。

  6. 自定义 Hook 中可以使用 useState、useEffect、useContext 等基础 Hook,也可以使用其他自定义 Hook。

  7. 自定义 Hook 一般应该是纯函数,不应该产生副作用。但如果需要产生副作用,可以使用 useLayoutEffect 或 useReducer 等 Hook 来实现。

3、如何创建和使用自定义Hook?

创建和使用自定义Hook的步骤大致如下:

  • 定义一个以"use"开头的函数。这是自定义Hook的规则,如果不遵循,React将无法自动检查你的Hook是否违反了Hook的规则。
  • 在自定义 Hook 中,你可以使用 useState、useEffect、useRef 等内置的 Hook,以及其他自定义 Hook。
  • 在你的React函数组件或者自定义Hook组件中使用这个自定义的Hook。

 React 允许开发者通过使用自定义 Hook 来重用组件逻辑。自定义 Hook 是一种 JavaScript 函数,其名称以 “use” 开头,函数内部可以调用其他的 Hook。

自定义 Hook 可以用来解决以下问题:

  1. 共享状态逻辑:例如用户认证状态、网络请求等。
  2. 处理副作用:例如订阅和取消订阅、定时器等。
  3. 抽象组件逻辑:例如表单处理、动画逻辑、业务逻辑等。

1、以下是一个关于网络请求 自定义 Hook 的示例:

import { useState, useEffect } from 'react';const useFetchData = (url) => {const [data, setData] = useState(null);const [isLoading, setIsLoading] = useState(true);const [error, setError] = useState(null);useEffect(() => {const fetchData = async () => {try {const response = await fetch(url);const data = await response.json();setData(data);} catch (error) {setError(error);} finally {setIsLoading(false);}};fetchData();}, [url]);return { data, isLoading, error };
};export default useFetchData;

这个自定义 Hook 是用来获取数据的。通过使用 useStateuseEffect Hook,我们可以获取到数据、设置加载状态和处理错误。最后通过 return 语句返回数据、加载状态和错误信息。

这个自定义 Hook 可以在组件中使用,如下所示:

import useFetchData from './useFetchData';const App = () => {const { data, isLoading, error } = useFetchData('https://jsonplaceholder.typicode.com/todos/1');if (isLoading) {return <div>Loading...</div>;}if (error) {return <div>Error: {error.message}</div>;}return (<div><h1>{data.title}</h1><p>{data.body}</p></div>);
};export default App;

在这个组件中,我们通过调用 useFetchData 自定义 Hook 获取数据。如果数据正在加载中,则显示 "Loading...";如果发生错误,则显示错误消息。最后,如果数据获取成功,则显示标题和正文。

2、自定义一个Hook 当resize 的时候 监听window的width和height的hook

import {useEffect, useState} from "react";export const useWindowSize = () => {const [width, setWidth] = useState()const [height, setHeight] = useState()useEffect(() => {const {clientWidth, clientHeight} = document.documentElementsetWidth(clientWidth)setHeight(clientHeight)}, [])useEffect(() => {const handleWindowSize = () =>{const {clientWidth, clientHeight} = document.documentElementsetWidth(clientWidth)setHeight(clientHeight)};window.addEventListener('resize', handleWindowSize, false)return () => {window.removeEventListener('resize',handleWindowSize, false)}})return [width, height]
}

使用:

const [width, height] = useWindowSize()

3、一个官网的简单示例 

在自定义 Hook 中封装 Effect 

Effect 是一个 “逃生出口”:当你需要“走出 React 之外”或者当你的使用场景没有更好的内置解决方案时,你可以使用它们。如果你发现自己经常需要手动编写 Effect,那么这通常表明你需要为组件所依赖的通用行为提取一些 自定义 Hook。

例如,这个 useChatRoom 自定义 Hook 把 Effect 的逻辑“隐藏”在一个更具声明性的 API 之后:

function useChatRoom({ serverUrl, roomId }) {useEffect(() => {const options = {serverUrl: serverUrl,roomId: roomId};const connection = createConnection(options);connection.connect();return () => connection.disconnect();}, [roomId, serverUrl]);
}

然后你可以像这样从任何组件使用它:

function ChatRoom({ roomId }) {const [serverUrl, setServerUrl] = useState('https://localhost:1234');useChatRoom({roomId: roomId,serverUrl: serverUrl});
// ...

在 React 生态系统中,还有许多用于各种用途的优秀的自定义 Hook。

4、自定义Hook与普通的JavaScript函数有什么不同?

React 自定义 Hook 和普通 JavaScript 函数有以下不同:

        1. 命名规则:React 自定义 Hook 的名称必须以 "use" 开头,这是为了让 React 在编译时能够正确识别和处理它们。

        2. 使用规则:React 自定义 Hook 只能在函数组件或其他自定义 Hook 中使用,而普通 JavaScript 函数可以在任何地方使用。React 自定义 Hook 可以使用 React 内置的 Hook,比如 useState、useEffect 等,而普通 JavaScript 函数则不能使用这些 Hook。

        3. 使用场景:React 自定义 Hook 主要用于将组件中共用的逻辑抽离出来,方便复用和维护,而普通 JavaScript 函数则可以处理任何数据和业务逻辑。

        4. 内部实现:自定义Hook可以访问React的state和其他的React特性,而普通的JavaScript函数则不能。此外,每次在组件中调用自定义Hook,它都会获取独立的state。即使两个组件使用了相同的Hook,它们也不会共享state。这是因为自定义Hook是一种重用状态逻辑的机制(例如设置为订阅并存储当前值),所以每次使用自定义Hook时,其中的所有state和副作用都是完全隔离的。

总之,React 自定义 Hook 是 React 特有的一种函数,用于处理组件共用的逻辑,与普通 JavaScript 函数有些许不同。

5、什么是useEffect和useLayoutEffect,它们与自定义Hook有什么关系?

useEffect和useLayoutEffect是React中的两个用于处理副作用(side effects)的函数。useEffect在全部渲染完毕后才会执行,而useLayoutEffect则会在浏览器layout之后,painting(绘制)之前执行。它们与自定义Hook的关系在于,你可以在自定义Hook中使用这些函数来处理副作用,例如在useEffect中订阅事件并在useLayoutEffect中获取布局信息。

6、在使用自定义Hook时如何处理副作用?

在处理副作用时,可以将副作用封装到一个单独的函数中,然后在需要的地方调用这个函数。这样做可以确保副作用不会影响到其他的代码逻辑。同时,如果在一个组件中使用多个自定义Hook,每个Hook的副作用都是独立的,不会互相影响。

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

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

相关文章

Mysql更新varchar存储的Josn数据

Mysql更新varchar存储的Josn数据 记录一次mysql操作varchar格式存储的json字符串数据 1、检查版本 -- 版本5.7以上才可以能执行json操作 select version(); 2、创建测试数据 -- 创建测试表及测试数据 CREATE TABLE test_json_table AS SELECT UUID(), {"test1": …

详解HTTP协议(介绍--版本--工作过程--Fiddler 抓包显示--请求响应讲解)

目录 一.HTTP协议的介绍 1.1HTTP是什么&#xff1f; 1.2HTTP版本的演变 二.HTTP的工作过程 三.使用Fiddler抓包工具 3.1简单讲解Fiddler 3.2Fiddler工作的原理 3.3抓包结果分析 四.HTTP请求 4.1认识URL 4.2关于URL encode 4.3认识方法 4.3.1认识get和post 4.3.…

Docker 安装kafka 并创建topic 进行消息通信

Apache Kafka是一个分布式流处理平台&#xff0c;用于构建高性能、可扩展的实时数据流应用程序。本文将介绍如何使用Docker容器化技术来安装和配置Apache Kafka。 一、使用镜像安装 1、kafka安装必须先安装Zookpper 2、下载镜像 docker pull wurstmeister/kafka 3、查看下载…

揭秘!9个月完成亚运会的整体数字化观测

项目背景与业务场景 2023 第 19 届亚运会在杭州举办&#xff0c;这将提高杭州的国际知名度&#xff0c;促进杭州经济、社会的全面发展&#xff0c;并将进一步推动奥林匹克运动在中国的发展&#xff0c;并且提升杭州城市形象和国际影响力。为亚运村村民提供便捷周到的服务和丰富…

分享几个可以免费使用GPT的网站

ChatGPT这个是国产的&#xff0c;里面可以使用3.5和4.0&#xff0c;免费用户每日都有各自的使用次数&#xff0c;反应迅速。文言一心国内百度的chart8新用户200次&#xff0c;但只能用3.5&#xff0c;响应速度有点慢 各有优缺点&#xff0c;大家看个人情况使用&#xff0c;个人…

不确定度校准和可靠性图简介

图片来源 项杰 一、说明 不确定性校准是机器学习中最容易被误解的概念之一。它可以概括为这个简单的问题&#xff1a;“鉴于上述下雨的可能性&#xff0c;您是否带伞&#xff1f;” 我们在日常生活中使用主观概率和不确定性校准的概念&#xff0c;但没有意识到它们。对于不确定…

第四节HarmonyOS 熟知开发工具DevEco Studio

一、设置主体样式 默认的代码主题样式是黑暗系的&#xff0c;如下图所示&#xff1a; 如果你不喜欢&#xff0c;可以按照一下步骤进行修改&#xff1a; 左上角点击Flie->Settings->Appearance&Behavior->Appearance&#xff0c;点击Theme&#xff0c;在弹出的下拉…

XXDD——UUII(交互设计)

今天我们再次回到Adobe全家桶的怀抱&#xff0c;今天介绍的这一位成员&#xff0c;是最直接帮助大家进行平面交互式设计的软件。他就是XD~ Adobe XD全称Adobe Experience Design CC&#xff0c; 官方版跨平台支持Win10 与 macOS&#xff0c;并且所有用户均可免费下载使用。Adob…

Linux fork笔试练习题

1.打印结果&#xff1f; #include <stdio.h> #include <unistd.h> #include <stdlib.h>int main() {int i0;for(;i<2;i){fork();printf("A\n");}exit(0); } 结果打印 A A A A A A 2.将上面的打印的\n去掉,结果如何? printf("…

解决No module named pip问题

pip更新指令&#xff1a;python -m pip install --upgrade pip输入运行后如果出现错误“no module named pip”&#xff0c;则运行以下指令&#xff1a;python -m ensurepipeasy_install pip然后再执行&#xff1a;python -m pip install --upgrade pip

Java小游戏 王者荣耀

GameFrame类 所需图片&#xff1a; package 王者荣耀;import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyAdapter; import java.awt.event.KeyEvent; import java.io.File; import java.util.ArrayLis…

Linux处理文本常见命令

目录 1 vim 2 echo 3 tee 4 cat 1 vim 编辑文本类的内容&#xff0c;使用的时候 vim [文件名]&#xff0c;比如 vim A.txt 进入vim界面后&#xff0c;按i可以开启编辑模式&#xff0c;按ESC可以关闭编辑模式&#xff0c;关闭编辑模式后:wq!保存并退出 2 echo ech…

1052 Linked List Sorting (巨坑题)

题意&#xff1a;以address,val,next_address的形式给定一个链表&#xff0c;同时给定头节点的address&#xff0c;求将该链表排序后的形式。 pat拿分简单&#xff0c;但是拿要高分确实难。。 坑点一&#xff1a;有的结点不在该链表上&#xff0c;需要遍历一遍链表排除掉。&a…

20.什么是bean装配?

什么是bean装配&#xff1f; 装配&#xff0c;或bean 装配是指在Spring 容器中把bean组装到一起&#xff0c;前提是容器需要知道bean的依赖关系&#xff0c;如何通过依赖注入来把它们装配到一起。 额外扩展 Bean中主要包含三种装配方式&#xff0c;分别为 基于XML的装配基于…

PTA: 螺旋矩阵

题目 所谓“螺旋矩阵”&#xff0c;是指对任意给定的N&#xff0c;将1到NN的数字从左上角第1个格子开始&#xff0c;按顺时针螺旋方向顺序填入NN的方阵里。本题要求构造这样的螺旋方阵。 格式 输入格式: 输入在一行中给出一个正整数N&#xff08;<10&#xff09;。 输出…

【C语言加油站】函数栈帧的创建与销毁 #保姆级讲解

函数栈帧的创建与销毁 导言一、计算机硬件1.冯•诺依曼机基本思想2.冯•诺依曼机的特点&#xff1a;3.存储器3.1 分类3.2 内存的工作方式3.3 内存的组成 4.寄存器4.1 基本含义4.2 寄存器的功能4.3 工作原理4.4 分类4.4.1 通用寄存器组AX(AH、AL)&#xff1a;累加器BX(BH、BL)&a…

Git——Git应用入门

将会介绍以下知识&#xff1a; 搭建Git环境和创建Git版本库&#xff08;init、clone&#xff09;。文件添加、状态检查、创建注释和查看历史记录。与其他Git版本库交互&#xff08;pull、push&#xff09;。解决合并冲突。创建分支列表、列表切换和合并。创建标签。 1、版本控…

AI技术如何助力实现智慧交通

人工智能的常见优势在于能够实时、高效地分析处理大量的数据&#xff0c;并结合算法模型提供个性化、专业化的服务。在智慧交通方面&#xff0c;人工智能同样可以发挥专长&#xff0c;助力打造智能高效的交通运输网络&#xff0c;本篇就为大家简单介绍一下AI技术如何促进智慧交…

Linux基本命令二

Linux基本命令二 1、head 命令 head ​ **作用&#xff1a;**用于查看文件的开头部分的内容&#xff0c;有一个常用的参数 -n 用于显示行数&#xff0c;默认为 10&#xff0c;即显示 10 行的内容 ​ **语法&#xff1a;**head [参数] [文件] ​ 命令参数&#xff1a; 参数…

Java核心知识点整理大全20-笔记

目录 17. 设计模式 17.1.1. 设计原则 17.1.24. 解释器模式 18. 负载均衡 18.1.1.1. 四层负载均衡&#xff08;目标地址和端口交换&#xff09; 18.1.1.2. 七层负载均衡&#xff08;内容交换&#xff09; 18.1.2. 负载均衡算法/策略 18.1.2.1. 轮循均衡&#xff08;Roun…