React Hooks概览

25 阅读1分钟

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

供第三方库使用,用于安全地订阅外部数据源。