自定义 Hook

什么是自定义 Hook

自定义Hook是可以用于在组件间复用状态处理逻辑的函数。

注意

• 自定义 Hook 的函数名称必须以 use 开头，后跟大写字母开头。
• 自定义 Hook 共享的是状态处理逻辑，而不是状态本身。

基本用例

自定义一个 useTheme Hook，用于在组件中切换主题。

import { useEffect, useState } from "react";

// 自定义 Hook：主题切换
function useTheme(defaultTheme = 'light') {
    const [theme, setTheme] = useState(() => {
        const storedTheme = window.localStorage.getItem('theme');
        return storedTheme || defaultTheme;
    });

    useEffect(() => {
        window.localStorage.setItem('theme', theme);
    }, [theme]);

    return { theme, setTheme };
}

export default function CustomHookWithTheme() {
    const {theme, setTheme} = useTheme();

    function toggleTheme() {
        setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'));
    }

    const currentTheme = {
        backgroundColor: theme === 'light' ? '#fff' : '#333',
        color: theme === 'light' ? '#000' : '#fff'
    };

    return (
        <div style={currentTheme}>
            <p>当前主题是：{theme}</p>
            <button onClick={toggleTheme}>切换主题</button>
        </div>
    );
}