Back to Home
React Hooks 完全指南

React Hooks 完全指南

April 10, 2024React, JavaScript, Technology

React Hooks 是 React 16.8 引入的新特性，它让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

useState

useState 是最基本的 Hook，用于在函数组件中添加状态。

const [count, setCount] = useState(0);

useEffect

useEffect 用于处理副作用，比如数据获取、订阅或者手动修改 DOM。

useEffect(() => {
  document.title = `You clicked ${count} times`;
}, [count]);

useContext

useContext 接收一个 context 对象并返回该 context 的当前值。

useMemo & useCallback

这两个 Hook 用于性能优化：

  • useMemo 缓存计算结果
  • useCallback 缓存函数引用

自定义 Hook

你可以创建自己的 Hook 来复用状态逻辑：

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