自定义 Hook

1. Hook 使用规则

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

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

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

不要在循环、条件语句或嵌套函数中调用 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;