【 React 】对React refs的理解？应用场景？

1. 是什么

Refs在计算机中称为弹性文件系统(英语：Resilient File System,简称ReFS)
React中的Refs提供了一种方式，允许我们访问DOM节点或在render方法中创建的React元素
本质为ReactDOM.render()返回的组件实例，如果是渲染组件则返回的是组件实例，如果渲染dom则返回的是具体的dom节点

2. 如何使用

创建ref的形式有三种：

• 传入字符串，使用时通过this.refs.传入的字符串的格式获取对应的元素
• 传入对象，对象是通过React.createRef()方式创建出来，使用时获取到创建的对象中存在current属性就是对应的元素
• 传入函数，该函数会在DOM被挂载时进行回调，这个函数会传入一个元素对象，可以自己保存，使用时，直接拿到之前保存的元素对象即可
• 传入hook,hook是通过useRef()方式创建，使用时通过生成hook对象的current属性就是对应的元素

2.1 传入字符串

只需要在对应元素或组件中ref属性

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef(); 
    }
    render() {
        return <div ref="myref" />; 
    }
}
1
2
3
4
5
6
7
8
9

访问当前节点的方式如下:

this.refs.myref.innerHTML = "hello";
1

2.2 传入对象

refs通过React,createRef() 创建，然后将ref属性添加到React元素中，如下：

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef(); 
    }
    render() {
        return <div ref={this.myRef} />; 
    } 
}
1
2
3
4
5
6
7
8
9

当ref被传递给render中的元素时，对该节点的引用可以在ref的current属性中访问

const node = this.myRef.current;
1

2.3 传入函数

当ref传入为一个函数的时候，在渲染过程中，回调函数参数会传入一个元素对象，然后通过实例将对象进行保存

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef(); 
    }
    render() {
        return <div ref={element => this.myref = element} />;
    } 
}
1
2
3
4
5
6
7
8
9

获取ref对象只需要通过先前存储的对象即可

const node = this.myref
1

2.4 传入hook

通过useRef创建一个ref ,整体使用方式与React.createRef一致

function App(props) {
    const myref = useRef()
    return ( 
    <>
        <div ref={myref}></div>
    </> 
    ) 
}
1
2
3
4
5
6
7
8

获取ref属性也是通过hook对象的current属性

const node = myref.current;
1

上述三种情况都是ref属性用于原生HTML元素上，如果ref设置的组件为一个类组件的时候，ref对象接收到的是组件的挂载实例
注意的是，不能在函数组件上使用ref属性，因为他们并没有实例

3. 应用场景

在某些情况下，我们会通过使用refs来更新组件，但这种方式并不推荐，更多情况我们是通过props与state的方式进行去重新渲染子元素
过多使用refs,会使组件的实例或者是DOM结构暴露，违反组件封装的原则
例如，避免在Dialog组件里暴露open()和close()方法，最好传递isOpen属性但下面的场景使用refs非常有用：

• 对Dom元素的焦点控制、内容选择、控制
• 对Dom元素的内容设置及媒体播放