React 中的自定义 Hook

React 中的自定义 Hook 是一项强大的功能，允许您跨多个组件提取和重用逻辑。它们使您能够封装复杂的状态逻辑，使您的组件更干净且更易于维护。以下是如何创建和使用自定义挂钩的快速概述和示例。

创建自定义钩子

自定义钩子本质上是一个 JavaScript 函数，其名称以 use 开头，并且可以调用其中的其他钩子。这是管理计数器的自定义挂钩的简单示例：

import { useState } from 'react';

// Custom Hook: useCounter
function useCounter(initialValue = 0) {
    const [count, setCount] = useState(initialValue);

    const increment = () => setCount(c => c + 1);
    const decrement = () => setCount(c => c - 1);
    const reset = () => setCount(initialValue);

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

export default useCounter;

使用自定义挂钩

您可以在任何功能组件中使用 useCounter 钩子：

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

function CounterComponent() {
    const { count, increment, decrement, reset } = useCounter(0);

    return (
        <div>
            <h1>Count: {count}</h1>
            <button onClick={increment}>Increment</button>
            <button onClick={decrement}>Decrement</button>
            <button onClick={reset}>Reset</button>
        </div>
    );
}

export default CounterComponent;

要点

1. 命名约定：自定义钩子的名称始终以 use 开头，以遵循 React 的约定。
2. 可重用性：自定义挂钩可以在多个组件中重用，促进 DRY（不要重复自己）代码。
3. 状态管理：您可以管理状态、执行副作用以及利用自定义挂钩中的其他挂钩。

高级示例：获取数据

这是一个用于获取数据的更高级的自定义挂钩：

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;

用法

您可以在组件中使用 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)}

); } export default DataFetchingComponent;

登录后复制

自定义挂钩是以干净且可维护的方式封装逻辑并在组件之间共享功能的好方法。

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