React Hooks 功能分类总结表
类别
Hook 名称
核心作用与描述
状态管理
useState
管理组件内的基础状态。
useReducer
管理复杂状态逻辑,类似 Redux 的理念。
useActionState
管理与表单服务端动作(Server Action)相关的状态。
useOptimistic
实现乐观更新,在操作完成前先行更新 UI。
**useTransition**
将状态更新标记为非阻塞的过渡,保持 UI 响应。
副作用处理
useEffect
处理数据获取、订阅、手动更改 DOM 等副作用。
useLayoutEffect
在浏览器绘制前同步执行副作用,用于测量布局等。
useInsertionEffect
主要用于 CSS-in-JS 库,在布局生效前插入样式。
useEffectEvent
定义不触发 Effect 重新执行的、持有最新值的事件函数。
性能优化
useCallback
缓存函数,避免非必要的子组件重渲染。
useMemo
缓存计算结果,避免重复的复杂计算。
useDeferredValue
延迟更新某个不紧急的值,用于节流渲染。
访问引用与上下文
useContext
读取 React 上下文(Context)的值。
useRef
创建可变的 ref 对象,用于访问 DOM 或存储任意值。
useImperativeHandle
自定义暴露给父组件的 ref 实例值。
工具与调试
**useId**
生成在客户端和服务器端都稳定的唯一 ID。
useDebugValue
在 React 开发者工具中为自定义 Hook 添加调试标签。
useSyncExternalStore
供第三方库使用,用于安全地订阅外部数据源。