使用自定义 Hook 提升您的 React 游戏：有趣且实用的指南

嘿，React 爱好者们！如果您像我一样，您会喜欢 React 如何让构建用户界面变得轻而易举。但有时，我们发现自己在不同的组件中重复相同的逻辑。这就是自定义钩子的用武之地——它们就像秘密的超能力，使我们的代码更干净、更高效。让我们深入了解自定义 Hook 的世界，看看它们如何提升我们的 React 游戏。

到底什么是 Hook？

首先，让我们快速回顾一下 Hooks 是什么。 React 16.8 中引入了钩子，让您无需编写类即可使用状态和其他 React 功能。一些最流行的内置钩子是 useState、useEffect 和 useContext。

内置钩子示例

从 'react' 导入 React, { useState, useEffect };

function ExampleComponent() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

在这个简单的示例中，useState 和 useEffect 协同工作来管理状态和副作用。它干净、简单、功能强大。

为什么要关心自定义 Hook？

自定义挂钩都是为了可重用性和保持组件清洁。它们允许您在组件之间提取和共享逻辑。将它们视为您的个人工具箱，您可以在其中存储方便的功能并在需要时使用它们。

定制 Hook 的好处

• 可重用性：编写一次，随处使用。在不同组件之间共享逻辑，无需重复代码。
• 可读性：让您的组件专注于渲染，使它们更易于阅读和维护。
• 可维护性：在一处更新逻辑，并在使用钩子的所有地方反映出来。

让我们一起构建自定义 Hook

假设您有多个组件需要从 API 获取数据。您可以创建一个自定义挂钩来处理它，而不是在每个组件中编写相同的获取逻辑。让我们创建 useFetch。

逐步：创建 useFetch

1. 创建 Hook：首先创建一个名为 useFetch.js 的新文件。

import { useState, useEffect } from 'react';

    function useFetch(url) {
      const [data, setData] = useState(null);
      const [loading, setLoading] = useState(true);
      const [error, setError] = useState(null);

      useEffect(() => {
        const fetchData = async () => {
          try {
            const response = await fetch(url);
            if (!response.ok) {
              throw new Error('Network response was not ok');
            }
            const result = await response.json();
            setData(result);
          } catch (error) {
            setError(error);
          } finally {
            setLoading(false);
          }
        };

        fetchData();
      }, [url]);

      return { data, loading, error };
    }

    export default useFetch;

1. 使用 Hook：现在，让我们在组件中使用 useFetch。

import React from 'react';
    import useFetch from './useFetch';

    function DataFetchingComponent() {
      const { data, loading, error } = useFetch('https://api.example.com/data');

      if (loading) return <p>Loading...</p>;
      if (error) return <p>Error: {error.message}</p>;

      return (
        <div>
          <h1>Data</h1>
          <pre class="brush:php;toolbar:false">{JSON.stringify(data, null, 2)}