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