React useRef 的三个实战场景:DOM 引用、保存上一次值、避免闭包陷阱

React useRef 的三个实战场景:DOM 引用、保存上一次值、避免闭包陷阱很多人对useRef的认知停留在「拿 DOM 节点」这一层,结果遇到「定时器里读到旧 state」「想存个值但不想触发重渲染」这类问题就抓瞎。其实 useRef 的核心能力是:提供一个跨渲染周期稳定存在、且修改不触发重渲染的容器。理解这一点,三个高频场景就都通了。这篇用可运行的代码把它们讲透。先厘清 useRef 到底是什么useRef(initialValue)返回一个对象{ current: initialValue }。它有两个关键特性:同一个组件实例,每次渲染拿到的是同一个 ref 对象(引用稳定,不像普通变量每次渲染重新创建)。修改ref.current不会触发重渲染(不像setState)。对比一下就清楚了:function Demo() { const [count, setCount] useState(0); // 改了会重渲染 const renderCount useRef(0); // 改了不重渲染 renderCount.current 1; // 每次渲染 1,但自己不会引起渲染 console.log(渲染次数:, renderCount.current); return button onClick{() setCount(count 1)}count: {count}/button; }renderCount就是个「渲染次数计数器」,用 state 存它会导致无限重渲染,用 ref 存刚刚好。场景一:引用 DOM 节点(最基础但有坑)拿 DOM 做聚焦、测量尺寸、调用第三方库,是 ref 最常见的用途:import { useRef, useEffect } from react; function SearchBox() { const inputRef useRef(null); useEffect(() { // 挂载后自动聚焦。必须在 effect 里,渲染阶段 DOM 还没生成 inputRef.current?.focus(); }, []); return input ref{inputRef} placeholder自动聚焦 /; }坑点:不要在渲染阶段直接读inputRef.current,那时 DOM 还没挂载,是null。只能在useEffect或事件回调里访问。用可选链?.兜底能避免偶发的空引用报错。场景二:保存「上一次的值」React 没有内置「拿上一次 props/state」的 API,标准做法就是用 ref:import { useRef, useEffect, useState } from react; function usePrevious(value) { const ref useRef(); useEffect(() { ref.current value; // 渲染完成后才更新,所以下次渲染读到的是上一次的值 }, [value]); return ref.current; } function Price({ price }) { const prevPrice usePrevious(price); const trend prevPrice undefined ? : price prevPrice ? ↑涨 : price prevPrice ? ↓跌 : 持平; return div当前价 {price} {trend}(上次 {prevPrice ?? -})/div; }原理是时序:组件渲染时先读ref.current(还是旧值),渲染结束后 effect 才把它更新成新值。于是「读到的永远比当前渲染晚一拍」,正好就是上一次的值。这个usePrevious是可以直接抄进项目的常用工具 Hook。场景三:破解 setInterval 的闭包陷阱这是 useRef 最能体现价值、也最容易踩坑的场景。先看错误写法:function BrokenCounter() { const [count, setCount] useState(0); useEffect(() { const id setInterval(() { console.log(count); // 永远打印 0! setCount(count 1); // count 永远是 0,所以永远设成 1 }, 1000); return () clearInterval(id); }, []); // 空依赖:effect 只跑一次 return div{count}/div; }因为 effect 只在挂载时执行一次,那个setInterval回调闭包捕获了第一次渲染时的count(值为 0),之后无论重渲染多少次,回调里的count永远是 0。界面能勉强从 0 跳到 1,然后就卡死。修法一:函数式更新。如果只是要基于旧值更新 state,用函数式 setter 就绕开了闭包:setCount((c) c 1); // c 是 React 给的最新值,不依赖闭包里的 count但如果你在回调里需要读取最新的 count(比如打日志、做判断),函数式更新救不了你,这时候就得靠 ref:function GoodCounter() { const [count, setCount] useState(0); const countRef useRef(count); countRef.current count; // 每次渲染同步最新值到 ref useEffect(() { const id setInterval(() { console.log(最新 count:, countRef.current); // 总是最新值 setCount((c) c 1); }, 1000); return () clearInterval(id); }, []); // 依赖仍为空,interval 不重建 return div{count}/div; }countRef是稳定引用,回调闭包捕获的是 ref 对象本身;而ref.current在每次渲染都被更新成最新 count。于是回调始终能通过countRef.current读到最新值,又不用把 count 加进依赖数组、避免定时器反复销毁重建。什么时候该用 ref,什么时候不该一个判断标准:这个值变化时,界面需不需要跟着更新?需要更新界面 → 用useState。只是幕后数据(DOM 节点、定时器 id、上一次的值、第三方实例),变了不该触发渲染 → 用useRef。反面教材:别把该渲染的数据塞进 ref。下面这段改了 ref 界面不会变,是新手常犯的错:function Wrong() { const textRef useRef(); return ( input onChange{(e) { textRef.current e.target.value; }} // 界面不会更新! value{textRef.current} / ); }用户输入了,textRef.current变了,但 React 不知道要重渲染,输入框看起来「打不了字」。这种要显示的值,老老实实用 state。小结useRef的本质:一个跨渲染稳定、修改不触发重渲染的{ current }容器。场景一 DOM 引用:只能在 effect 或事件回调里读.current,渲染阶段是 null。场景二 保存上一次值:靠「effect 晚一拍更新」的时序,封装成usePrevious直接复用。场景三 闭包陷阱:优先用函数式更新setCount(c c1);需要读最新值就把值同步进 ref,回调读ref.current。判断口诀:值变了要刷新界面用 state,幕后数据不刷界面用 ref。一句话记忆点:useState 管「显示什么」,useRef 管「记住什么」——搞反了不是打不了字,就是读到旧值。