useToggle;
useLocalStorageState;
useFetch;
useWindowResize;
useMousePosition;

// 自定义 Hook 标准模板
import { useState, useEffect } from "react";

// 1. 函数名以 use 开头，后面大驼峰
function useCustomHook(initialValue) {
  // 2. 内部可以调用其他 Hook
  const [state, setState] = useState(initialValue);

  useEffect(() => {
    // 副作用逻辑
  }, []);

  // 3. 返回组件需要的状态、函数、计算值
  return [state, setState];
}

export default useCustomHook;

import { useState, useCallback } from "react";

/**
 * useToggle：通用的布尔值开关 Hook
 * @param {boolean} defaultValue - 默认值，默认为 false
 * @returns {[boolean, { toggle, setTrue, setFalse }]} - 当前状态 + 操作函数
 */
function useToggle(defaultValue = false) {
  // 1. 内部使用 useState 管理布尔值
  const [value, setValue] = useState(defaultValue);

  // 2. 用 useCallback 缓存函数，避免每次渲染都创建新函数
  const toggle = useCallback(() => {
    setValue((prev) => !prev);
  }, []);

  const setTrue = useCallback(() => {
    setValue(true);
  }, []);

  const setFalse = useCallback(() => {
    setValue(false);
  }, []);

  // 3. 返回状态和操作函数
  return [value, { toggle, setTrue, setFalse }];
}

export default useToggle;

import useToggle from "./useToggle";

function ModalDemo() {
  // 组件 A 使用 useToggle，拥有自己的状态
  const [isVisible, { toggle, setTrue, setFalse }] = useToggle(false);

  return (
    <div>
      <button onClick={setTrue}>打开弹窗</button>
      {isVisible && (
        <div className="modal">
          <p>这是一个弹窗</p>
          <button onClick={setFalse}>关闭</button>
          <button onClick={toggle}>切换</button>
        </div>
      )}
    </div>
  );
}

function MenuDemo() {
  // 组件 B 也使用 useToggle，状态完全独立
  const [isOpen, { toggle }] = useToggle(true);

  return (
    <div>
      <button onClick={toggle}>{isOpen ? "折叠菜单" : "展开菜单"}</button>
      {isOpen && (
        <ul>
          <li>菜单项</li>
        </ul>
      )}
    </div>
  );
}

function App() {
  return (
    <div>
      <ModalDemo />
      <MenuDemo />
    </div>
  );
}

export default App;

import { useState, useEffect, useCallback } from "react";

/**
 * useLocalStorageState：状态与 localStorage 双向同步的 Hook
 * @param {string} key - 存储在 localStorage 中的键名
 * @param {*} defaultValue - 默认值
 * @returns {[any, Function]} - 当前值 + 设置值函数
 */
function useLocalStorageState(key, defaultValue) {
  // 1. 初始化状态：尝试从 localStorage 读取，读取失败则使用默认值
  const [value, setValue] = useState(() => {
    try {
      const storedValue = window.localStorage.getItem(key);
      // 如果有存储值，解析 JSON；否则返回默认值
      return storedValue ? JSON.parse(storedValue) : defaultValue;
    } catch (error) {
      // 捕获解析异常（比如存储值被破坏）
      console.error(`读取 localStorage 失败，key: ${key}`, error);
      return defaultValue;
    }
  });

  // 2. 设置值时同步更新 localStorage
  const setStoredValue = useCallback(
    (newValue) => {
      try {
        // 如果传入的是函数，先执行函数拿到新值
        const valueToStore =
          newValue instanceof Function ? newValue(value) : newValue;

        setValue(valueToStore);
        window.localStorage.setItem(key, JSON.stringify(valueToStore));
      } catch (error) {
        console.error(`写入 localStorage 失败，key: ${key}`, error);
      }
    },
    [key, value],
  );

  // 3. 监听其他标签页或脚本修改 localStorage 时同步更新状态
  useEffect(() => {
    const handleStorageChange = (event) => {
      if (event.key === key) {
        try {
          setValue(event.newValue ? JSON.parse(event.newValue) : defaultValue);
        } catch (error) {
          console.error(`同步 localStorage 失败，key: ${key}`, error);
        }
      }
    };

    window.addEventListener("storage", handleStorageChange);

    return () => {
      window.removeEventListener("storage", handleStorageChange);
    };
  }, [key, defaultValue]);

  return [value, setStoredValue];
}

export default useLocalStorageState;

import useLocalStorageState from "./useLocalStorageState";

function ThemeSettings() {
  // 使用自定义 Hook，页面刷新后主题偏好自动恢复
  const [theme, setTheme] = useLocalStorageState("theme", "light");

  return (
    <div
      style={{
        background: theme === "dark" ? "#333" : "#fff",
        color: theme === "dark" ? "#fff" : "#333",
      }}
    >
      <p>当前主题：{theme}</p>
      <button onClick={() => setTheme("light")}>浅色</button>
      <button onClick={() => setTheme("dark")}>深色</button>
    </div>
  );
}

function LanguageSettings() {
  // 另一个组件也复用同一个 Hook，key 不同，互不干扰
  const [language, setLanguage] = useLocalStorageState("language", "zh");

  return (
    <div>
      <p>当前语言：{language}</p>
      <button onClick={() => setLanguage("zh")}>中文</button>
      <button onClick={() => setLanguage("en")}>英文</button>
    </div>
  );
}

function App() {
  return (
    <div>
      <ThemeSettings />
      <LanguageSettings />
    </div>
  );
}

export default App;

import { useState, useEffect, useCallback, useTransition } from "react";

/**
 * useFetch：通用数据请求 Hook
 * @param {string} url - 请求地址
 * @param {object} options - fetch 配置（method、headers、body 等）
 * @returns {object} - { data, loading, error, refresh }
 */
function useFetch(url, options = {}) {
  // 1. 定义状态
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  // 2. React 19 的 useTransition：让 loading 过渡更平滑，避免阻塞 UI
  const [isPending, startTransition] = useTransition();

  // 3. 请求逻辑封装在 useCallback 中，方便复用和刷新
  const fetchData = useCallback(
    async (signal) => {
      setLoading(true);
      setError(null);

      try {
        const response = await fetch(url, { ...options, signal });

        if (!response.ok) {
          throw new Error(`请求失败，状态码：${response.status}`);
        }

        const result = await response.json();

        // 使用 startTransition 让状态更新有过渡效果
        startTransition(() => {
          setData(result);
        });
      } catch (err) {
        // 如果是主动取消请求，不设置为错误
        if (err.name !== "AbortError") {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    },
    [url, options],
  );

  // 4. 手动刷新函数
  const refresh = useCallback(() => {
    fetchData();
  }, [fetchData]);

  // 5. 组件挂载或 url/options 变化时发起请求
  useEffect(() => {
    // 创建 AbortController，用于取消请求
    const controller = new AbortController();

    fetchData(controller.signal);

    // 组件卸载或依赖变化时取消请求，避免竞态问题
    return () => {
      controller.abort();
    };
  }, [fetchData]);

  return {
    data,
    loading,
    error,
    refresh,
    isPending, // React 19 过渡状态
  };
}

export default useFetch;

import useFetch from './useFetch';

// 列表页
function UserList() {
  const { data, loading, error, refresh } = useFetch(
    'https://jsonplaceholder.typicode.com/users'
  );

  if (loading) return <p>加载中...</p>;
  if (error) return <p>出错了：{error}</button>;

  return (
    <div>
      <button onClick={refresh}>刷新列表</button>
      <ul>
        {data?.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

// 详情页
function UserDetail({ userId }) {
  const { data, loading, error } = useFetch(
    `https://jsonplaceholder.typicode.com/users/${userId}`
  );

  if (loading) return <p>加载中...</p>;
  if (error) return <p>出错了：{error}</p>;

  return (
    <div>
      <h1>{data?.name}</h1>
      <p>邮箱：{data?.email}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <UserList />
      <UserDetail userId={1} />
    </div>
  );
}

export default App;

// React 19 新特性：用 use 读取 Promise
import { use } from "react";

function useUserData(promise) {
  // use 会阻塞渲染，直到 Promise 完成
  const data = use(promise);
  return data;
}

import { useState, useTransition } from "react";

function useSlowData() {
  const [data, setData] = useState(null);
  const [isPending, startTransition] = useTransition();

  const updateData = (newData) => {
    startTransition(() => {
      setData(newData);
    });
  };

  return { data, isPending, updateData };
}

function useWrongHook(value) {
  if (value) {
    // ❌ 错误：Hook 在条件中调用
    const [state, setState] = useState(0);
  }
  return state;
}

function useWrongHook(items) {
  // ❌ 错误：Hook 在循环中调用
  for (let i = 0; i < items.length; i++) {
    useEffect(() => {}, []);
  }
}

function useRightHook(value) {
  // ✅ 正确：在 Hook 的最顶层调用
  const [state, setState] = useState(0);

  useEffect(() => {
    if (value) {
      setState(value);
    }
  }, [value]);

  return state;
}

import useToggle from "./useToggle";

function ComponentA() {
  const [on] = useToggle(false);
  return <p>A: {on ? "开" : "关"}</p>;
}

function ComponentB() {
  const [on] = useToggle(false);
  return <p>B: {on ? "开" : "关"}</p>;
}

function useCountMessage(count) {
  useEffect(() => {
    console.log("count:", count);
  }, []); // ❌ 漏了 count
}

function useCountMessage(count) {
  useEffect(() => {
    console.log("count:", count);
  }, [count]); // ✅ 依赖项完整
}

// ❌ 不推荐：虽然能运行，但失去了 Hook 规则保护
function localStorageState(key) {
  const [value, setValue] = useState(() => {
    return localStorage.getItem(key);
  });
  return [value, setValue];
}

import { useState, useEffect, useCallback } from "react";

interface UseFetchResult<T> {
  data: T | null;
  loading: boolean;
  error: string | null;
  refresh: () => void;
}

function useFetch<T = any>(
  url: string,
  options?: RequestInit,
): UseFetchResult<T> {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const fetchData = useCallback(
    async (signal?: AbortSignal) => {
      setLoading(true);
      setError(null);

      try {
        const response = await fetch(url, { ...options, signal });
        if (!response.ok) {
          throw new Error(`请求失败：${response.status}`);
        }
        const result = (await response.json()) as T;
        setData(result);
      } catch (err: any) {
        if (err.name !== "AbortError") {
          setError(err.message);
        }
      } finally {
        setLoading(false);
      }
    },
    [url, options],
  );

  const refresh = useCallback(() => fetchData(), [fetchData]);

  useEffect(() => {
    const controller = new AbortController();
    fetchData(controller.signal);
    return () => controller.abort();
  }, [fetchData]);

  return { data, loading, error, refresh };
}

export default useFetch;

interface User {
  id: number;
  name: string;
  email: string;
}

const { data } = useFetch<User>("/api/user/1");
// data 的类型是 User | null

import { useState, useCallback } from "react";

function useCounter(initialValue = 0, options = {}) {
  const { step = 1, min = -Infinity, max = Infinity } = options;
  const [count, setCount] = useState(initialValue);

  const increment = useCallback(() => {
    setCount((prev) => Math.min(prev + step, max));
  }, [step, max]);

  const decrement = useCallback(() => {
    setCount((prev) => Math.max(prev - step, min));
  }, [step, min]);

  const reset = useCallback(() => {
    setCount(initialValue);
  }, [initialValue]);

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

export default useCounter;

import { useState, useEffect } from "react";

function useWindowResize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight,
  });

  useEffect(() => {
    const handleResize = () => {
      setSize({
        width: window.innerWidth,
        height: window.innerHeight,
      });
    };

    window.addEventListener("resize", handleResize);

    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);

  return size;
}

export default useWindowResize;