React Hooks 是什么？常用的 Hooks 有哪些？

1. Hooks 的核心概念

React Hooks 于 React 16.8（2019 年）正式引入，允许在函数组件中使用状态和其他 React 特性，而无需编写类组件。Hooks 的本质是一些特殊的函数，它们让你"钩入"（Hook into）React 的状态管理和生命周期能力。

2. 基础必用 Hooks

• useState：为函数组件添加局部状态，返回当前状态值和更新函数。支持函数式更新（依赖上一次状态值）和惰性初始化（避免每次渲染重复计算）
• useEffect：处理副作用，替代类组件的生命周期方法。通过依赖数组控制执行时机：空数组等价于 componentDidMount，无依赖数组则在每次渲染后执行，指定依赖则在依赖变化时执行
• useContext：读取 React Context 的值，解决 Props 深层透传（Prop Drilling）问题
• useReducer：适用于复杂状态逻辑，工作方式类似 Redux，通过 dispatch 发送 action 由 reducer 函数计算新状态

3. 性能优化 Hooks

• useMemo：缓存计算结果，避免每次渲染都执行昂贵的计算。仅在依赖项变化时重新计算
• useCallback：缓存函数引用，避免每次渲染都创建新的函数实例，配合 React.memo 使用可防止子组件不必要重渲染
• useMemo 和 useCallback 应基于性能分析结果有选择地使用，而非默认包裹所有函数和计算结果

4. 引用与 ID 类 Hooks

• useRef：返回一个在组件整个生命周期内持续存在的可变对象，常用于访问 DOM 元素、存储定时器 ID 或上一次渲染的值
• useId：生成跨服务端和客户端渲染一致的全局唯一 ID，主要用于无障碍访问（Accessibility）场景中的表单标签关联

5. React 18/19 新增 Hooks

• useTransition：将状态更新标记为非紧急，保持 UI 交互响应（如搜索输入时的标签页切换）
• useDeferredValue：延迟更新某个值，类似防抖但由 React 渲染管道原生支持
• useOptimistic（React 19+）：在服务器确认之前立即显示乐观更新结果，自动在请求失败时回滚
• useActionState（React 19+）：简化表单状态管理，自动处理 pending 状态、错误和乐观更新
• use()（React 19+）：读取 Promise 或 Context 的值，可在条件语句和循环内调用（不受 Hooks 规则约束），与 Suspense 和 Error Boundary 集成，是 useContext 的增强替代方案