React中ref的使用

Posted 2023-03-23

参考技术A

ref是React提供的用来操纵React组件实例或者DOM元素的接口。

ref可以作用于：

React组件有两种定义方式：

将ref回调函数作用于某一个React组件，此时回调函数会在当前组件被实例化并挂载到页面上才会被调用。

ref回调函数被调用时，会将当前组件的 实例 作为参数传递给函数。

首先，能够使用ref的child Component必然是一个类，如果要实现，必然要破坏child component的封装性，直接到child component中获取其中DOM。

Forwarding Refs，React.forwardRef类似一个HOC，参数是一个 function ，这个function包含两个参数props和ref，返回Component，可以将这个ref用于任何子组件或者DOM

注意React.forwardRef参数必须是function，而这个API通常用来解决HOC中丢失ref的问题。

我们使用ref的时候，正常理解是，ref的回调函数在组件被mount的时候调用一次，将组件的ref赋值个Parent Component的某一个属性，自此之后再不会被重新调用，除非赋了ref的组件被移除。

但是如果使用inline function 作为ref回调函数：

所以尽量避免使用inline function作为Component props

React 中ref的 React.createRef() 方法

参考技术A 在React 16.3版本后，使用此方法来创建ref。将其赋值给一个变量，通过ref挂载在dom节点或组件上，该ref的current属性将能拿到dom节点或组件的实例