自定义 Hook

1. Hook 使用规则

在使用 Hook 时，需要遵循一些基本规则，以确保代码的正确性和性能。

1. 只能在函数组件或自定义 Hook 中调用 Hook：不能在普通的 JavaScript 函数中调用 Hook，只能在函数组件的顶层或自定义 Hook 中调用。

   // 正确
   function MyComponent() {
     const [count, setCount] = useState(0);
     // ...
   }
   
   // 错误
   function myFunction() {
     const [count, setCount] = useState(0); // 错误，不能在普通函数中调用
     // ...
   }
   

2. 不要在循环、条件语句或嵌套函数中调用 Hook：要确保 Hook 每次渲染时都以相同的顺序调用，这样 React 才能正确地维护 Hook 的状态。

   // 正确
   function MyComponent() {
     const [count, setCount] = useState(0);
     if (count > 0) {
       useEffect(() => {
         // ...
       }, [count]);
     }
   }
   
   // 错误
   function MyComponent() {
     if (condition) {
       const [count, setCount] = useState(0); // 错误，不能在条件语句中调用 Hook
     }
   }
   

2. 自定义 Hook

自定义 Hook 是以 use 开头的函数，内部可以调用其他 Hook。自定义 Hook 用于提取和复用逻辑，使代码更加简洁和模块化。

创建自定义 Hook

自定义 Hook 的创建非常简单，只需创建一个函数并在内部使用其他 Hook。以下是自定义 Hook 的示例。

• 案例如下：

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 () => {
      setLoading(true);
      try {
        const response = await fetch(url);
        const result = await response.json();
        setData(result);
      } catch (error) {
        setError(error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

3. 案例

下面是使用上述自定义 Hook 的示例。

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 (
    <ul>
      {data.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

export default DataFetchingComponent;

总结

自定义 Hook 是React中一个强大的特性，可以让我们提取和复用组件逻辑，从而使代码更加模块化和易于维护。遵循Hook的使用规则，确保在函数组件或自定义Hook中调用Hook，并避免在循环、条件语句或嵌套函数中调用Hook。