React Refs-知识点整理记录

一、Refs的作用

通过Refs，可以访问到

1. DOM节点。

2. render方法中创建的React元素。（class组件的实例）

二、访问节点或者实例有什么用？为什么要使用Refs来访问？

访问节点或者实例的需求场景：

• 管理焦点，文本选择或媒体播放。
• 触发强制动画。
• 集成第三方 DOM 库

因为有些场景，在React中，不使用Refs就无法解决。

三、零碎知识点

1. class组件

Refs可以在DOM元素或者class组件上使用。

2. function组件

Refs不可以在function组件上使用。（因为function组件没有实例)

function组件上无法使用，但是function组件内的DOM和class组件可以使用。

通过forwardRef，可以将ref转发给function组件内的DOM元素或者class组件。

通过useImperativeHandle可以使function组件的父组件 获得 该function组件的子组件中的DOM元素或者class组件的操作方法。

参考资料：

[1] Refs and the DOM.https://reactjs.bootcss.com/docs/refs-and-the-dom.html

[2] Refs转发.https://reactjs.bootcss.com/docs/forwarding-refs.html

[3] useImperativeHandle.https://reactjs.bootcss.com/docs/hooks-reference.html#useimperativehandle