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

目录

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

iii.安装依赖项：安装项目所需的包：

   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 (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{counterstate}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

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 (
    <div className="container">
      <div>
        <h1>Counter App </h1>
        <h2>{value}</h2>
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

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 (
    <div className="container">
      <div>
        <h1>Counter Appp </h1>
        <h2>{value}</h2>
        {loading && <div>Loading....</div>}
        {error && <div>Error: {error.message}</div>}
        {data && data.length > 0 && (
          <div>
            <h2>Username: {data[0].username}</h2>
          </div>
        )}
        <div>
          <button onClick={increment}>increment</button>
          <button onClick={decrement}>decrement</button>
          <button onClick={reset}>Reset</button>
        </div>
      </div>
    </div>
  );
}

export default App;

定制钩子的好处

可重复使用性：

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

关注点分离：

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

清洁剂组件：

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

自定义 Hook 的最佳实践

命名约定：

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

示例：useFetch、useForm、useAuth。

处理依赖关系：

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

避免不必要的重新渲染：

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

结论

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

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

以上是理解和创建 React 中的自定义 Hook的详细内容。更多信息请关注PHP中文网其他相关文章！