导入
简介
让我们来看一下如何直接访问 DOM 元素。
什么是 Refs？
Refs 允许我们直接访问在渲染过程中创建的 DOM 元素。尽管大多数情况下并不需要这样做，但在某些无法避免的场景下非常有用。例如，计算某个元素的位置或尺寸以基于该元素显示提示框（tooltip），或在组件加载完成后通过 .focus() 方法将焦点定位到表单字段上。
多年来，React 不断发展，处理 Refs 的方式也随之演进。但它们都有一个共同点：Refs 始终通过 JSX 中 DOM 元素的 ref 属性来定义，更准确地说，是通过 createElement() 来实现的。
何时使用 Refs？
在继续之前，请注意一点：尽管 Refs 存在，但我们应谨慎使用，仅在无法通过声明式地更新状态和属性来重新渲染组件时才考虑使用。对属性值的操作、添加或移除 CSS 类名、绑定事件监听器，或修改如 aria-hidden 等属性，都应始终通过 props、state、JSX 和组件重渲染以声明式的方式完成。
然而，仍有少数情况使用 Refs 是合理甚至必要的，包括：
- 为输入框元素设置焦点（如调用
input.focus()），或调用视频、音频元素的方法（如.play()或.pause()）。 - 触发命令式动画。
- 读取当前存在于 DOM 中元素的属性（例如调用
.getBoundingClientRect()）。