React Hooks 完全指南：从 useState 到自定义 Hook

Hooks 带来的变革

Hooks 让函数组件拥有状态管理能力，代码更简洁、逻辑更易复用。

基础 Hooks

useState - 状态管理

function Counter() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      点击 {count} 次
    </button>
  );
}

useEffect - 副作用处理

useEffect(() => {
  // 组件挂载和依赖变化时执行
  console.log("Effect ran");
  
  return () => {
    // 清理函数
    console.log("Cleanup");
  };
}, [dependency]); // 依赖数组

useContext - 全局状态

const ThemeContext = createContext("light");

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return <button className={theme}>按钮</button>;
}

高级 Hooks

useReducer - 复杂状态管理

function reducer(state, action) {
  switch (action.type) {
    case "increment":
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const [state, dispatch] = useReducer(reducer, { count: 0 });

useMemo - 性能优化

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(a, b);
}, [a, b]);

useCallback - 缓存函数

const handleClick = useCallback(() => {
  doSomething(a, b);
}, [a, b]);

自定义 Hook

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const stored = localStorage.getItem(key);
    return stored ? JSON.parse(stored) : initialValue;
  });

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value));
  }, [key, value]);

  return [value, setValue];
}

// 使用
const [name, setName] = useLocalStorage("name", "");

Hooks 使用规则

1. 只在顶层调用 Hooks
2. 只在 React 函数中调用 Hooks
3. 自定义 Hook 以 use 开头

掌握 Hooks，写出更优雅的 React 代码！