SuperAPI AI 工具集

react-useref

前端与建站

查看项目

更新于 10-15 20:05

技能介绍

用途:帮助在 React 中判断何时用 useRef、何时用 useState。核心规则是:值变化需要更新 UI 就用 useState;不需要触发重渲染就用 useRef。useRef 是一个跨渲染存活、但修改不会触发重渲染的“盒子”。

主要能力与用法:一是 DOM 访问,如 inputRef.current?.focus()、scrollIntoView、ResizeObserver、测量元素尺寸;二是跨渲染保存可变值,如定时器 ID(setInterval/clearInterval)、上一次的值、首次渲染标记;三是集成非 React 库(D3、Chart.js、Google Maps)时获取 DOM 节点;四是 React 19.2+ 中,原先用 useRef 保存稳定回调的写法由 useEffectEvent 取代,且 useEffectEvent 只能在 effect 内调用,不能用于 UI 事件处理器。

限制与反模式:不要把 useRef 当作“隐藏的 useState”,若值影响 UI 却只改 ref.current,界面不会更新,应改用 useState。跟踪上一次值时写入应放在 effect 中,不在渲染期间写。资料未提供安装命令、版本要求、收费或平台信息。