React 内置 Hooks 列表React 提供了多种多样内置 Hooks，分为基本 Hooks 和额外 Hooks，

React 内置 Hooks 列表

React 提供了多种内置 Hooks，分为基本 Hooks 和额外 Hooks，适用于不同场景。以下是截至目前（React 18）的完整列表：

这些是使用最频繁的核心 Hooks：

useState
- 用途：为函数组件添加状态。
- 用法：const [state, setState] = useState(initialState)。
- 例子：计数器、表单输入。
useEffect
- 用途：处理副作用（如数据请求、订阅）。
- 用法：useEffect(() => { ... }, [dependencies])。
- 例子：组件挂载时拉数据。
useContext
- 用途：访问 Context 的值，简化状态共享。
- 用法：const value = useContext(MyContext)。
- 例子：主题切换、全局配置。

这些 Hooks 提供更多功能，适用于特定需求：

useReducer
- 用途：管理复杂状态逻辑，类似 Redux。
- 用法：const [state, dispatch] = useReducer(reducer, initialState)。
- 例子：Todo List 的状态管理。
useCallback
- 用途：缓存函数，避免不必要的重新创建。
- 用法：const cachedFn = useCallback(fn, [dependencies])。
- 例子：优化子组件的 props。
useMemo
- 用途：缓存计算结果，避免重复计算。
- 用法：const cachedValue = useMemo(() => compute(), [dependencies])。
- 例子：昂贵计算的结果缓存。
useRef
- 用途：创建可变的引用对象，常用于访问 DOM 或保存值。
- 用法：const ref = useRef(initialValue)。
- 例子：聚焦输入框。
useImperativeHandle
- 用途：自定义通过 ref 暴露给父组件的值或方法。
- 用法：useImperativeHandle(ref, createHandle, [dependencies])。
- 例子：封装组件的自定义接口。
useLayoutEffect
- 用途：类似 useEffect，但在 DOM 更新后同步运行。
- 用法：useLayoutEffect(() => { ... }, [dependencies])。
- 例子：测量 DOM 布局。
useDebugValue
- 用途：在 React 开发者工具中显示自定义 Hook 的调试信息。
- 用法：useDebugValue(value)。
- 例子：调试自定义 Hooks。

useTransition（React 18）
- 用途：标记非紧急更新，提升用户体验。
- 用法：const [isPending, startTransition] = useTransition()。
- 例子：延迟加载列表。
useDeferredValue（React 18）
- 用途：延迟渲染值的变化，优化性能。
- 用法：const deferredValue = useDeferredValue(value)。
- 例子：输入时延迟搜索。
useId（React 18）
- 用途：生成唯一的 ID，保证服务端和客户端一致。
- 用法：const id = useId()。
- 例子：表单元素的唯一标识。