React Hooks 核心用法全解析

什么是 Hooks？

Hooks 是 React 16.8 引入的新特性，让函数组件拥有状态管理能力。

基础 Hooks

useState - 状态管理

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

useEffect - 副作用处理

useEffect(() => {
  // 组件挂载时执行
  fetchData();
  
  return () => {
    // 组件卸载时清理
    cleanup();
  };
}, [dependency]); // 依赖数组

useContext - 状态共享

const theme = useContext(ThemeContext);

进阶 Hooks

useReducer - 复杂状态

const [state, dispatch] = useReducer(reducer, initialState);

useMemo - 性能优化

const memoizedValue = useMemo(() => computeExpensive(a), [a]);

useCallback - 函数缓存

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

自定义 Hook

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

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