理解 React Hook

最新推荐文章于 2026-06-23 10:19:26 发布

原创最新推荐文章于 2026-06-23 10:19:26 发布 · 682 阅读

16 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#react.js #前端 #前端框架

“Hook 不是魔法，它只是让函数组件更强大的方法。”

一、React Hook 是什么？

React Hook 是 React 16.8 引入的新特性，它的出现解决了两个痛点：

函数组件无法拥有状态（state）与生命周期逻辑
逻辑复用困难，HOC（高阶组件）和 render props 会导致组件嵌套过深

Hook 用函数的形式，把状态、副作用、上下文等功能“钩”进函数组件，让你不用写 class 就能享受这些特性。

简单来说：

以前：需要 class 才能管理 state 和生命周期
现在：函数组件 + Hook 就能搞定

二、Hook 的分类

1. React 内置 Hook

状态管理类

useState
让函数组件拥有本地状态
```
const [count, setCount] = useState(0);
```

useReducer
复杂状态管理，类似 Redux 的 reducer 模式

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

副作用类

useEffect
处理副作用（数据请求、订阅、DOM 操作等）

useEffect(() => {
  document.title = `Count: ${count}`;
}, [count]);

useLayoutEffect
同步触发副作用（DOM 更新前后需要精确测量的场景）

性能优化类

useMemo
缓存计算结果，避免重复运算
useCallback
缓存函数引用，避免子组件重复渲染

引用类

useRef
保存可变值或直接访问 DOM
```
const inputRef = useRef();
```

其他

useContext
订阅 React Context
useImperativeHandle
自定义暴露给父组件的 ref API
useId
生成稳定的唯一 ID（React 18）

2. 自定义 Hook

自定义 Hook 是一个命名以 use 开头的普通函数，可以在里面使用其他 Hook，从而实现逻辑复用。

例子：封装窗口大小监听

function useWindowSize() {
  const [size, setSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

  useEffect(() => {
    const onResize = () => setSize({ width: window.innerWidth, height: window.innerHeight });
    window.addEventListener('resize', onResize);
    return () => window.removeEventListener('resize', onResize);
  }, []);

  return size;
}

// 使用
function App() {
  const { width, height } = useWindowSize();
  return <p>{width} x {height}</p>;
}