React Hooks 实战指南

为什么使用 Hooks？

Hooks 让函数组件拥有状态和生命周期，代码更简洁、逻辑更易复用。

核心 Hooks

useState - 状态管理

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

useEffect - 副作用处理

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}>Click</button>;
}

useReducer - 复杂状态

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

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });
  return <button onClick={() => dispatch({ type: "increment" })}>{state.count}</button>;
}

useCallback - 记忆回调

const handleClick = useCallback(() => {
  doSomething(a, b);
}, [a, b]);  // 仅当依赖变化时重新创建

useMemo - 记忆计算

const expensiveValue = useMemo(() => {
  return computeExpensiveValue(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];
}

Hooks 让 React 开发更高效！