”工欲善其事,必先利其器。“—孔子《论语.录灵公》
首页 > 编程 > 理解和创建 React 中的自定义 Hook

理解和创建 React 中的自定义 Hook

发布于2024-11-08
浏览:301

Understanding and Creating Custom Hooks in React

目录

  1. 先决条件
  2. 安装
  3. 介绍
  4. 什么是自定义 Hook?
  5. 什么时候应该创建自定义 Hook?
  6. 示例:创建自定义挂钩
    • 第 1 步:识别可重用逻辑
    • 第 2 步:将逻辑提取到自定义 Hook 中
    • 第 3 步:使用自定义 Hook
  7. 自定义 Hook 的好处
  8. 自定义 Hook 的最佳实践
  9. 结论

先决条件:

确保您具备以下方面必要的背景知识:

React基础知识
Node.js 和 npm

安装:

要开始使用 Vite 开始一个新的 React 项目,请按照以下步骤操作:

我。打开终端并运行以下命令来创建新项目:

   npm create vite@latest my-react-app --template react

ii.导航到您的项目目录:

     cd my-react-app


三.安装依赖项:安装项目所需的包:

   npm install

四.启动开发服务器: 运行开发服务器:

    npm run dev

您的 React 应用程序现在将运行,您可以在浏览器中查看它:http://localhost:5173。

介绍:

什么是 React Hook?:

React hooks 是特殊的函数,允许您在功能组件中使用状态和其他 React 功能。像 useState 和 useEffect 这样的钩子对于管理状态和副作用至关重要。

什么是自定义挂钩?:

自定义挂钩可以被描述为跨多个组件重用逻辑的一种方式。您可以将其封装在自定义挂钩中,而不是重复代码,从而使您的组件更清晰,代码更易于管理。就像使用自定义钩子时的 React hooks 一样,请确保您的组件名称以以下形式开头(use 后跟您想要为组件指定的名称,例如 useFetchData)。useFetchData 可以是一个自定义 Hook,它从 API 获取数据并将其返回给您的组件。成分。

了解 Hooks 吗?

了解 Hook:
useState、useEffect 和 useContext 等 Hook 允许您在不编写类的情况下使用状态和其他 React 功能。它们是让您以模块化方式处理组件逻辑的构建块。

什么时候应该创建自定义挂钩?

自定义挂钩让您可以在不同组件之间重用有状态逻辑。一个简单的例子是计数器组件,它具有递增、递减和重置功能,如果您需要在多个组件中使用相同的逻辑,则可以将逻辑移至自定义挂钩。另一个常用的示例是从 API 获取数据的组件,如果您需要在多个组件中使用相同的逻辑,则可以将该逻辑移动到自定义挂钩。

创建自定义钩子的示例

示例:让我们使用 React hook(useState) 创建一个简单的计数器应用程序。在 app.jsx 中

第 1 步确定可重用逻辑

import React, { useState } from "react";

import "./App.css";

function App() {
  // usestate hooks
  const [counterstate, setCounterstate] = useState(0);

  // function for increment,decrement and reset
  const increment = () => {
    setCounterstate((prev) => prev   1);
  };
  const decrement = () => {
    setCounterstate((prev) => prev - 1);
  };
  const reset = () => {
    setCounterstate(0);
  };
  return (
    

Counter App

{counterstate}

); } export default App;

在上面的代码中,可重用逻辑包括计数器状态、初始状态(o)、递增、递减和重置函数。增量在初始状态上加 1,减量从初始状态减 1,而复位则重置为第一个初始状态。

步骤 2 将逻辑提取到自定义钩子中

我们可以在 src 文件夹中创建一个名为 Hooks 的文件夹,然后为自定义钩子创建一个名为 useCouter.jsx 的文件,如下所示。

import React, { useState } from "react";

const useCounter = (initialvalue) => {
  const [value, setValue] = useState(initialvalue);
  const increment = () => {
    setValue((prev) => prev   1);
  };
  const decrement = () => {
    setValue((prev) => prev - 1);
  };
  const reset = () => {
    setValue(initialvalue);
  };

  return { value, increment, decrement, reset };
};

export default useCounter;

步骤 3 使用自定义钩子

现在,让我们在 App.jsx 中使用我们的自定义钩子。

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";

function App() {

  const { value, increment, decrement, reset } = useCounter(0);
    return (
    

Counter App

{value}

); } export default App;

示例 2.

让我们为所有 API 调用创建一个自定义钩子 useFetch。

import React, { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(url);
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, [url]);
  return { data, error, loading };
};

export default useFetch;

用法

在App.jsx中,我们可以使用这个自定义钩子从JSON占位符中获取用户名,如下所示;

import React, { useState } from "react";
import "./App.css";
import useCounter from "./Hooks/useCounter";
import useFetch from "./Hooks/useFetch";

function App() {
  const { value, increment, decrement, reset } = useCounter(0);
  const { data, error, loading } = useFetch(
    "https://jsonplaceholder.typicode.com/users"
  );

  return (
    

Counter Appp

{value}

{loading &&
Loading....
} {error &&
Error: {error.message}
} {data && data.length > 0 && (

Username: {data[0].username}

)}
); } export default App;

定制钩子的好处

可重复使用性:

主要好处之一是可重用性。您可以在多个组件中使用相同的自定义钩子,减少代码重复。

关注点分离:

自定义挂钩可帮助您将逻辑与 UI 分离。您的组件专注于渲染,而自定义挂钩处理逻辑。

清洁剂组件:

通过将复杂的逻辑转移到自定义挂钩,您的组件变得更简单、更容易理解。

自定义 Hook 的最佳实践

命名约定:

自定义挂钩应以“use”一词开头,以遵循 React 命名约定。这也有助于快速识别代码中的钩子。

示例:useFetch、useForm、useAuth。

处理依赖关系:

当在自定义钩子中使用 useEffect 等钩子时,请确保正确处理依赖关系以避免错误或不必要的重新渲染。

避免不必要的重新渲染:

通过记忆值或使用 useCallback 和 useMemo 等挂钩来优化您的自定义挂钩,以避免重新运行昂贵的计算或重新获取数据。

结论

我们探索了自定义钩子的概念及其在简化和增强 React 应用程序开发中的作用。通过创建自定义挂钩,您可以封装和重用有状态逻辑,这有助于保持组件的整洁和可维护性。

查看 GitHub 上的项目:我的 GitHub 存储库

版本声明 本文转载于:https://dev.to/adaobilynda/understanding-and-creating-custom-hooks-in-react-37pd?1如有侵犯,请联系[email protected]删除
最新教程 更多>
  • Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta 中的列偏移发生了什么?
    Bootstrap 4 Beta:列偏移的删除和恢复Bootstrap 4 在其 Beta 1 版本中引入了重大更改柱子偏移了。然而,随着 Beta 2 的后续发布,这些变化已经逆转。从 offset-md-* 到 ml-auto在 Bootstrap 4 Beta 1 中, offset-md-*...
    编程 发布于2024-12-23
  • 如何使用 jQuery 高效创建 DOM 元素?
    如何使用 jQuery 高效创建 DOM 元素?
    使用 jQuery 创建 DOM 元素如果您希望增强 JavaScript 代码,您会对利用 jQuery 的功能来简化 DOM 操作感到好奇.jQuery 确实提供了创建 DOM 元素的替代方法,正如您在 $.create("div") 中注意到的那样。然而,这种方法不是 jQ...
    编程 发布于2024-12-23
  • 如何在 Eclipse 中轻松配置 Java 项目的本机库路径?
    如何在 Eclipse 中轻松配置 Java 项目的本机库路径?
    Eclipse 中的 Java 库发现困境:揭开秘密许多开发人员都在努力解决在 Eclipse 中配置 Java 库路径的艰巨任务,当应用程序执行由于缺少 .dll/.so/.jnilib 文件而停止时,会遇到挫败感。针对特定运行配置调整 VM 参数的传统方法通常被证明是无效的。相反,关键在于 Ec...
    编程 发布于2024-12-23
  • CSS 样式只能设置半个字符吗?还是图像是唯一的选择?
    CSS 样式只能设置半个字符吗?还是图像是唯一的选择?
    CSS 只能应用于半个字符吗?许多人寻求一种技术来仅设计半个字符的样式,因为例如,通过使一半透明。然而,尽管搜索了诸如“将 CSS 应用到字符的 50%”之类的方法,但到目前为止,还没有找到运气。话虽这么说,是否存在 CSS 或 JavaScript 解决方案,还是求助于图像是唯一的选择?新颖的解决...
    编程 发布于2024-12-23
  • 大批
    大批
    方法是可以在对象上调用的 fns 数组是对象,因此它们在 JS 中也有方法。 slice(begin):将数组的一部分提取到新数组中,而不改变原始数组。 let arr = ['a','b','c','d','e']; // Usecase: Extract till index p...
    编程 发布于2024-12-23
  • 如何在 Ubuntu 10.04 LTS 上安装用于 C++ 开发的 OpenSSL 库?
    如何在 Ubuntu 10.04 LTS 上安装用于 C++ 开发的 OpenSSL 库?
    在 Ubuntu 10.04 LTS 上安装 OpenSSL 库以进行 C 开发正如您在询问中提到的,使用 OpenSSL 构建代码需要适当的库。在您的情况下,您遇到了指示 OpenSSL 库文件丢失的错误。本指南将通过解释如何在 Ubuntu 10.04 LTS 上安装所需的 OpenSSL C ...
    编程 发布于2024-12-23
  • 如何在 WordPress 中处理带有 IN() 条件的准备语句?
    如何在 WordPress 中处理带有 IN() 条件的准备语句?
    在 WordPress 中使用 IN() 条件处理准备语句WordPress 提供准备语句来防止 SQL 注入攻击并提高查询性能。但是,在字符串中使用具有多个值的 IN() 条件可能会带来挑战。问题陈述:考虑以下情况:$villes = '"paris","fes&qu...
    编程 发布于2024-12-23
  • 尽管代码有效,为什么 POST 请求无法捕获 PHP 中的输入?
    尽管代码有效,为什么 POST 请求无法捕获 PHP 中的输入?
    解决 PHP 中的 POST 请求故障在提供的代码片段中:action=''而不是:action="<?php echo $_SERVER['PHP_SELF'];?>";?>"检查 $_POST数组:表单提交后使用 var_dump 检查 $_POST 数...
    编程 发布于2024-12-23
  • 泛型如何提高 Go 中代码的可重用性和类型安全性?
    泛型如何提高 Go 中代码的可重用性和类型安全性?
    理解 Go 中的泛型:开发人员指南泛型是编程中的一个基本概念,它允许开发人员创建可与多种数据类型。在像 Ruby 这种动态类型语言这样的语言中,通用概念可能并不熟悉。本文将深入解释 Go 这种静态类型语言中泛型的含义。了解静态类型与动态类型在动态类型语言中,变量可以保存任何类型的数据,无需显式声明。...
    编程 发布于2024-12-23
  • Python 中的表达式和语句有什么区别?
    Python 中的表达式和语句有什么区别?
    Python 中的表达式与语句在 Python 中,表达式和语句构成了代码的基本构建块。虽然两者在程序中具有不同的用途,但区分它们对于有效的编码实践至关重要。理解表达式表达式是表示值或执行操作的语法结构。计算。它们通常由标识符、文字和运算符组成,例如算术和布尔运算符、函数调用、切片运算符等。表达式的...
    编程 发布于2024-12-23
  • C++跨平台如何获取当前时间和日期?
    C++跨平台如何获取当前时间和日期?
    在 C 跨平台中获取当前时间和日期C 标准库现在提供了一种方便且可移植的方式来检索当前时间并通过 std::chrono::system_clock 类获取日期。在 C 11 中引入,此类提供了一个独立于系统的接口,用于访问高分辨率计时信息。语法:auto now = std::chrono::sy...
    编程 发布于2024-12-23
  • JavaScript 对象解构如何简化函数参数?
    JavaScript 对象解构如何简化函数参数?
    解开函数参数中 JavaScript 对象解构的语法如果你想用这样的对象参数定义函数:function moo({ a, b, c }) { // valid syntax! print(a); // prints 4 }...你没有出现幻觉。这种语法称为解构,允许您将对象属性直接解压到函数...
    编程 发布于2024-12-23
  • 如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    如何修复 macOS 上 Django 中的“配置不正确:加载 MySQLdb 模块时出错”?
    MySQL配置不正确:相对路径的问题在Django中运行python manage.py runserver时,可能会遇到以下错误:ImproperlyConfigured: Error loading MySQLdb module: dlopen(/Library/Python/2.7/site-...
    编程 发布于2024-12-23
  • Node.js如何有效防范SQL注入攻击?
    Node.js如何有效防范SQL注入攻击?
    防范 Node.js 中的 SQL 注入攻击在 Web 开发中,防范 SQL 注入攻击至关重要。 Node.js 开发人员传统上在这方面面临困境,因为广泛使用的 node-mysql 模块缺乏与 PHP 的预处理语句相媲美的内置保护。Node-JS 可以防止 SQL 注入攻击吗? 幸运的是,node...
    编程 发布于2024-12-23
  • 如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 查找今天生日的用户?
    如何使用 MySQL 识别今天生日的用户使用 MySQL 确定今天是否是用户的生日涉及查找生日匹配的所有行今天的日期。这可以通过一个简单的 MySQL 查询来实现,该查询将存储为 UNIX 时间戳的生日与今天的日期进行比较。以下 SQL 查询将获取今天有生日的所有用户: FROM USERS ...
    编程 发布于2024-12-23

免责声明: 提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发到邮箱:[email protected] 我们会第一时间内为您处理。

Copyright© 2022 湘ICP备2022001581号-3