认识ref及其使用场景

本文是参考自-《React进阶之路》

1. 简介

Ref是react提供的是一种特殊属性，可以获取任意DOM元素甚至可以获取组件的实例，灵活使用ref可以给我们带来便利，例如控制元素的焦点或者文本的选择等，ref会设置一个回调函数，这个回调函数会在组件挂载的时候接收DOM元素或者实例作为参数，这样我们就可以去操作它们了，下面我们具体介绍它的使用场景。

1. 使用场景

1. 在DOM元素上使用ref

这个场景是最常使用的，如下代码所示，为input元素定义一个ref，因为ref获取的是组件的真实DOM而不是虚拟DOM，所以在组件被挂载以后，ref才会通过设置的myInput获取到了input元素节点，然后去执行回调函数，实现这里挂载完成后在componentDidMount中自动获取input焦点的功能；

  

在某些时候我们可能会遇到，ref值设置的是一个字符串，而并非回调函数，如下：

                    

       我们可以通过this.refs.myInput拿到这个DOM节点，然后去执行这个元素的方法，this.refs.myInput.focus()，这种方式尽量不要去使用。

 

1. 在组件上使用ref

有些时候我们需要在父组件中使用子组件的方法，例如：在1）中例子的基础上，在外层定义一个父组件，在父组件中执行它失去焦点的动作，我们这样去做，在父组件中引用子组件，并且像获取input元素时一样给它设置一个ref的回调函数，再在父组件中写一个按钮，当点击的时候让input失去焦点，如下代码所示

• • 首先在子组件中定义一个失去焦点的方法

• • 其次引入子组件并给组件定义ref，然后写一个button，在点击事件中获取声明的子组件实例并执行子组件中的方法

 

注：ref获取子组件实例只能用于子组件是class组件，函数组件是没有用的，但是不影响在函数组件内部获取DOM元素或者组件实例

 

1. 在父组件中拿到子组件的DOM元素

这个是一种特殊的情景，在2）中我们只能拿到子组件的实例，并不能获取组件中的DOM元素，下面介绍这种间接获取的方式。

在调用子组件的时候自定义给子组件一个属性例如propsRef，将定义的获取DOM元素的回调函数，传入子组件，将这个回调函数赋值给子组件的DOM元素的ref属性，这样就间接的实现了获取子组件的DOM元素。

                           

                    

注：子组件无论是class还是函数组件都可以使用