React Hooks 入门指南

React Hooks 让函数组件拥有了状态管理和副作用处理能力，从此告别繁琐的 Class 组件。

useState：状态管理

import { useState } from "react";

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

useEffect：副作用

处理数据请求、订阅、DOM 操作：

useEffect(() => {
  fetch("/api/data").then(res => res.json()).then(setData);
  return () => cleanup();  // 清理函数
}, []);  // 空依赖 = 仅挂载时执行

自定义 Hooks

将逻辑抽成可复用的函数：

function useWindowSize() {
  const [size, setSize] = useState({ w: 0, h: 0 });
  useEffect(() => {
    const handler = () => setSize({ w: innerWidth, h: innerHeight });
    window.addEventListener("resize", handler);
    return () => window.removeEventListener("resize", handler);
  }, []);
  return size;
}

Hooks 是现代 React 开发的基石，让代码更简洁、逻辑复用更优雅。