React Hooks 使用指南

Hooks 让函数组件拥有状态和生命周期。本文介绍常用 Hooks 的使用。

useState 基础

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

useEffect 副作用

useEffect(() => {
  // 组件挂载时执行
  const subscription = api.subscribe();
  
  return () => {
    // 清理函数
    subscription.unsubscribe();
  };
}, []); // 空依赖数组只执行一次

自定义 Hooks

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

其他常用 Hooks

• useContext：上下文访问
• useReducer：复杂状态管理
• useMemo：记忆化计算
• useCallback：记忆化函数

合理使用 Hooks 可以让代码更简洁、可复用。