精通 React Hooks：自定义 Hook 实战指南

Hooks 是 React 16.8 引入的革命性特性。它让我们在不编写 Class Component 的情况下使用 State 和其他 React 特性。

1. useLocalStorage

这是一个非常实用的 Hook，用于在 LocalStorage 中持久化状态。

typescript
import { useState, useEffect } from 'react';

function useLocalStorage<T>(key: string, initialValue: T) {
  // 获取初始值
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key);
      return item ? JSON.parse(item) : initialValue;
    } catch (error) {
      console.log(error);
      return initialValue;
    }
  });

  // 监听变化并更新 LocalStorage
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      const valueToStore = value instanceof Function ? value(storedValue) : value;
      setStoredValue(valueToStore);
      window.localStorage.setItem(key, JSON.stringify(valueToStore));
    } catch (error) {
      console.log(error);
    }
  };

  return [storedValue, setValue] as const;
}

export default useLocalStorage;
展开代码 (29 行)

使用方法非常简单：

tsx
const [name, setName] = useLocalStorage('name', 'Bob');

2. useDebounce

在处理搜索输入等高频事件时，防抖（Debounce）是必不可少的。

typescript
import { useState, useEffect } from 'react';

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

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

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

  return debouncedValue;
}