. 保存定时器 ID

 import { us eE ffect,us eR ef } from 'react';export default function Polling{
const timerR ef = us eR ef;

us eE ffect=>{ timerR ef .c u rrent = setInterval=> console .log,1000);return=>{ if{clearI nterval;} }，},);return

轮询中

Pain point忘记在 cleanup 中清理导致内存泄漏。使用 Ref 保存 ID 能确保即使组件多次重渲染，也能拿到同一个 ID 并正确清理。

. 保存上一次输入值

 import { us eE ffect,us eR ef} from 'react';function SearchResult{
const prevK eywordR ef = us eR ef;us eE ffect=>{
if{
console.log;}
prevK eywordR ef .c u rrent=keyword;},)，return 

再看当前关键词，{keyword}
}

Why not put it in state?话说回来， 因为我们只关心“变化是否发生”。 而不是把旧值展示来，State 会导致额外一次渲染，而 Ref 则保持轻量。

. 保存最新回调或标记位

js const configRef = useRef;useEffect=>{ configRef.current = latestConfig;},)，说起来，

// 在事件处理函数内部随时读取最新配置 function handleClick{ doSomething;}

提醒这种写法绕开了 React 响应式模型。只适合 “读取最新值” 的场景，不要把业务状态全部塞进 Ref。

从面孔三来看，外部对象——把 Web Worker 挂在 Ref 上

. 为什么需要 Worker？

. 主线程负责 UI 渲染与交互。如果在主线程执行大量同步计算，会导致页面卡顿甚至失去响应。说起来，Promise/async 并不能把同步任务搬到别的线程。它们仍然占用主线程时间片。Worker 提供独立线程，用于耗时计算，同时保持 UI 流畅。

主线程 Worker
──────postMessage───►
…耗时计算，◀──────onmessage─────
setResult

. 错误写法——在渲染函数里创建 Worker

jsx function App{ const workerR ef = us eR ef;// ❌ 每次组件函数执行都可能创建新 Worker → 重复线程 + 内存泄漏 workerR ef .c u rrent = new Worker);return

Pain pointStrictMode 会双倍执行函数。使得意外产生多个 Worker；副作用应放在 useEffect 中。

. 正确写法——在 Effect 中创建并在 Cleanup 中销毁

jsx import { useEffect。useRef,useState } from 'react';

export default function WorkerDemo { const workerR ef = us eR ef;const = us eS t ate;const = us eS t ate;

us eE ffect=>{ const w = new Worker,{type:'module'});workerR ef .c u rrent = w;

w.onmessage = ev=>{ setResult;setStatus，};w.onerror = =>{ setStatus;}，

setStatus;w.postMessage;

return=>{ w.terminate;不过，workerR ef .c u rrent=null;}，},);

return (

对应 worker.js

js self.onmessage = ev=>{ ifreturn;let sum=0，for{ sum+=i;} self.postMessage;}，

为什么不用 State 保存 Worker？ 虽然 useState 一样可以保存引用，但它暗示该值是 UI 状态。Worker 本身不参与 UI 渲染。用 Ref 更能表达 “这是外部可变实例，不驱动界面”。只要初始化方式正确，State 一样不会每次渲染都重新创建，但语义上更易混淆。

三个 Hook 如何配合？

常见误区与对策

. ref 改了为什么页面不更新？说起来，🛑  痛点来源于误以为 ref 能驱动视图刷新​.

​

​​​​​​​

​​​

八 、 面试如何快速回答 useRef

text "useRef 返回一个跨渲染保持稳定的对象，通过 current 保存任意值。修改 current 不会触发组件重新渲染，所以适合： • 持有真实 DOM 节点；• 保存 timerId / 上一次 props；• 持有 WebWorker / WebSocket 等外部实例。若数据变化需立即反映 UI，应使用 useState；若涉及创建/订阅/销毁资源，则配合 useEffect 完成生命周期管理。”

此答案覆盖四个关键点：

1️⃣ 稳定引用           ✅ 2️⃣ 可变 current 不触发渲染 ✅ 3️⃣ 常见用途✅ 4️⃣ 与 state/effect 协同使用 ✅