前端/移动开发面试题更新 2026-08-05

请阐述 React 中 useRef 这个概念,并说明它的主要用途。

前端/移动开发技术原理React

考察说明

考查对 React useRef 的理解,包括其定义和核心应用场景。

回答思路

  1. 【回答框架 1】useRef 是 React 提供的 Hook,用于在函数组件中创建一个可变的 ref 对象,其 .current 属性初始化为传入的参数,且在组件的整个生命周期内保持不变。
  2. 【回答框架 2】它主要有两个作用:一是用于访问 DOM 元素或子组件实例,例如通过 ref 属性绑定到元素上,然后通过 ref.current 获取对应的 DOM 节点进行操作;二是用于保存跨渲染的可变数据,且更新 ref.current 不会触发组件重新渲染。
  3. 【回答框架 3】与 useState 不同,useRef 的更新不会引起组件重新渲染,因此适合存储不涉及 UI 的临时数据,比如定时器 ID、上一次的 props 等。
  4. 【回答框架 4】使用 useRef 时,需要注意 ref 对象在每次渲染时是同一个引用,因此可以在 effect 中安全地保存和读取值。
  5. 【关键点 1】useRef 返回一个可变的 ref 对象,其 .current 属性初始化为传入参数。
  6. 【关键点 2】修改 ref.current 不会触发组件重新渲染。
  7. 【关键点 3】常用于访问 DOM 元素或保存跨渲染的可变数据。
  8. 【易错点 1】不要过度依赖 useRef 来存储渲染相关的数据,因为它的更新不会触发渲染,可能导致 UI 与数据不一致。
  9. 【易错点 2】避免在渲染阶段直接修改 ref.current,应将其放在事件处理或 effect 中。