Refs 是可在render方法里创建、让我们访问DOM节点或class实例的一种元素。
我的理解是：React的应用级组件是很抽象的，而有些组件却要用到DOM操作，DOM是底层的节点不能直接操作，想要操作的话可以通过Refs来操作。其必须指向一个DOM元素或class组件
Refs创建
1 | this.myRef = React.createRef(); |
Refs访问
- 作为传递给
render的元素时，可用current属性访问DOM节点；1
const node = this.myRef.current;
class组件的ref接受组件的挂载实例作为他的current属性；1
2
3componentDidMount() {
this.textInput.current.focusTextInput();
}- 不能在函数组件上使用 ref 属性，因为它们没有实例。在函数组件中使用ref，可以使用
forwardRef； - 在父节点中访问子节点的DOM节点，可以通过ref转发暴露子节点的ref。（在子组件中增加一些代码的时候用的）
Refs回调
- 用于设置refs和解除refs；
- 通过传递函数的方式，接受react组件或者HTML DOM节点为参数；
Refs的使用场景
- 管理焦点、文本选择、媒体播放
- 触发强制动画
- 集成第三方DOM库