React — 通用hooks封装

1.UseLocalStorage：该 Hook 用于在本地存储中存储和检索数据。在组件之间共享和保持状态，并且在页面重新加载时保持数据的持久性。

import { useState } from 'react';

const useLocalStorage = (key, initialValue) => {
    const [storedValue, setStoredValue] = useState(() => {
        try {
            const item = window.localStorage.getItem(key);
            return item ? JSON.parse(item) : initialValue;
        } catch (error) {
            console.error(error);
            return initialValue;
        }
    });

    const setValue = (value) => {
        try {
            setStoredValue(value);
            window.localStorage.setItem(key, JSON.stringify(value));
        } catch (error) {
            console.error(error);
        }
    };

    return [storedValue, setValue];
};

export default useLocalStorage;

2.UseFetch：这个 Hook 用于进行网络请求并获取数据。在组件中发起异步请求，并管理数据的加载状态，使得处理网络请求变得更加简单和方便。

import { useState, useEffect } from 'react';

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

    useEffect(() => {
        const fetchData = async () => {
            try {
                const response = await fetch(url);
                const result = await response.json();
                setData(result);
                setLoading(false);
            } catch (error) {
                console.error(error);
                setLoading(false);
            }
        };

        fetchData();

    }, [url]);

    return { data, loading };
};

export default useFetch;

3.UseDebounce：此 Hook 用于延迟某个值的更新，通常用于处理用户输入的延迟搜索或其他需要防抖的场景。它可以帮助减少不必要的请求或计算，提高性能并提升用户体验。

import { useState, useEffect } from 'react';

const useDebounce = (value, delay) => {
    const [debouncedValue, setDebouncedValue] = useState(value);

    useEffect(() => {
        const handler = setTimeout(() => {
            setDebouncedValue(value);
        }, delay);

        return () => {
            clearTimeout(handler);
        };
    }, [value, delay]);

    return debouncedValue;
};

export default useDebounce;