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

Hooks 的出现

React 16.8 引入 Hooks，让函数组件拥有状态和生命周期。

useState 基础

import { useState } from "react";

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

useEffect 副作用处理

import { useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  
  useEffect(() => {
    fetchUser(userId).then(setUser);
  }, [userId]); // 依赖数组
  
  return <div>{user?.name}</div>;
}

useContext 状态共享

const ThemeContext = createContext("light");

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

useReducer 复杂状态

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

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

自定义 Hook

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    return localStorage.getItem(key) || initialValue;
  });
  
  useEffect(() => {
    localStorage.setItem(key, value);
  }, [key, value]);
  
  return [value, setValue];
}

Hooks 规则

1. 只在顶层调用（不在循环/条件中）
2. 只在 React 函数中调用
3. 依赖数组要完整

Hooks 让 React 代码更简洁、更易复用！