useRef as Container ref 作容器
最后更新：2026-10-28
useRef as Container ref 作容器
useRef 不只挂 DOM：它是跨渲染的「便签盒」，适合存定时器 id、上一次的值、是否已挂载等「变了但不想引起重渲染」的数据。比 state 轻量，比模块级变量安全（组件实例间隔离）。
| 分组 | 副作用与性能 |
|---|---|
| 类型 | 模式 |
ℹ️ 说明 编辑器将 JSX 转译为 JavaScript 后在沙箱中渲染真实界面；组件自动挂载，无需手写 render 调用。
📝 语法
const timerRef = useRef(null)
timerRef.current = setInterval(...) // 存
clearInterval(timerRef.current) // 取
// 惰性初始化惯用法：
if (ref.current === null) ref.current = expensiveInit()返回值：无返回值，作为编码模式使用。
▶ 示例
示例可直接运行：展开后自动渲染，编辑代码即时生效。
输出结果：
每次点 +1，「当前」加 1，而「上一次」显示变更前的值——ref 保存历史快照且不引发额外渲染。💡 要点
💡 提示 判断存 state 还是 ref：UI 要随它变就 state；只是过程数据（定时器 id、快照）就 ref。
ℹ️ 说明 ref 比模块级变量安全：同一组件多实例时各自隔离，不会互相污染。
⚠️ 注意 并发渲染下 ref.current 可能被其他渲染读取，不要把 ref 当渲染的主要数据源。
🏷️ 副作用与性能相关
💡 相关案例
更多案例整理中，敬请期待。
📚 相关教程
❓ 常见问题
Q ref 存值和 state 存值怎么选？
A 影响渲染的内容用 state；只在事件处理器/effect 里使用的中间数据（id、标记、快照）用 ref。
Q 为什么修改 ref.current 不触发渲染？
A React 只追踪 state/props 的变更；ref 是普通可变对象，修改它是纯 JS 行为，不进入渲染调度。
Q 渲染期间可以写 ref 吗？
A 除惰性初始化（if (ref.current === null)）外不可以；写入应放在事件处理器或 useEffect 中。
