React Refs用法

快来打我* 2022-05-26 04:59 279阅读 0赞

## Refs介绍 ##

--------------------

**Refs**提供了一种访问在render方法中创建的DOM节点或者React元素的方法。在典型的数据流中，props是父子组件交互的唯一方式，想要修改子组件，需要使用新的pros重新渲染它。凡事有例外，某些情况下我们需要在典型数据流外，强制修改子代，这个时候可以使用Refs。

下面我将通过例子的方式详细介绍如何设置**Refs**以及如何访问**Refs**。

## Refs设置 ##

--------------------

设置**Refs**有两种方式：

1.  **Callback Refs**,通过这种方式，我们可以更细致的控制Refs的设置和置空；
2.  使用**React.createRef()**方法。

下面，我通过代码展示的形式，分别介绍如何设置**Refs**。

#### Callback Refs ####

**ref**属性接受一个回调函数，它在组件被加载或者卸载时会立即执行，当给HTML元素添加ref属性的时候，**Refs回调**接受了底层的Dom元素作为参数，当组件卸载时，**Refs回调**会接受null作为参数。回调函数会在componentDidMount或者componentDidUpdate这些生命周期之前回调之前执行。  
实例如下：

//CustomTextInput.js
    class CustomTextInput extends Component{ 
        constructor(props){
            super(props);
            this.textInput = null;
            this.focus = this.focus.bind(this);
        }
    
        focus(){
            if(this.textInput){
                this.textInput.focus();
            }
       }
        render(){
            return(
                <div>
                    <input type="text"  ref = {(input) => {
       this.textInput = input}}/>
                    <input type="button" value = "Focus the text input" onClick={
       this.focus}/>
                </div>
            )
        }
    }

> 注意：如果ref回调以内联函数的方式定义，在更新期间，它会被调用两次，第一次参数是null，之后参数是DOM元素，这是因为每次渲染中都会创建一个新的函数实例。因此，React需要清理旧的**ref**，然后设置成新的。通过将**Refs回调**定义成类的绑定函数的形式可以解决这个问题，不过通常情况下无关紧要。

#### React.createRef ####

当**ref**属性用于class声明的自定义组件时，**ref**接受的是已经加载的组件实例，这种方法只对**class**声明的组件有效，我们不能在函数式组件上使用**ref**，因为它们没有实例，但我们可以在函数式组件内部使用**ref**。

下面的例子，我通过使用**React.createRef()**方法为一个类组件添加**ref**：

//AutoFocusTextInput.js
    import { CustomTextInput } from "./CustomTextInput"
    class AutoFocusTextInput extends Component{ 
        constructor(props){
            super(props);
            this.textInput = React.createRef()
        }
    
        componentDidMount(){
            this.textInput.current.textInput.focus();
        }
    
        render(){
            return(
                <CustomTextInput ref = {
       this.textInput}/>
            )
        }
    }
    export default AutoFocusTextInput;

## 访问Refs ##

--------------------

**ref**的值取决于节点的类型：当**ref**属性被用于一个普通的HTML元素时，创建**Refs**时将接受底层的Dom元素作为它的**current**属性来创建，当**ref**属性被用于一个自定义组件的时候，创建**Refs**时将接受自定义组件的实例作为它的**current**。

从上面可以得知，可以使用**ref**中的**current属性**对节点的引用进行访问，比如说：

const node  = this.myRef.current

## Refs传递问题 ##

--------------------

关于**Refs**，有一点需要注意：**ref**和**props**具有一个不同之处：**ref**是不能像**props**那样传递的，**ref**和**key**类似，都是直被React操作。如果我们把给高阶组件生成的组件添加**ref**，那么这个**ref**指向的是高阶组件新的容器组件，而不是被包裹的组件。React为我们提供了一种解决方法：  
**Ref forwarding**可以把一个组件的**ref**传递给它的子组件，对高阶组件很有用。**React.forwardRef**接受一个**render函数**作为参数，返回一个组件实例。**render函数**接收**props**和**ref**作为参数，返回一个React节点。  
下面我将对上一篇文章[React Context和高阶组件HOC用法][React Context_HOC]中的高阶组件，实现把**ref**传递给被包裹的组件。代码如下：

export function WithTheme(Component) { 
         class WithThemeComponent extends Component{ 
            render(){
                const { forwardedRef ,...rest } = this.props;
                return(
                    <ThemeContext.Consumer>
                        {theme => <Component {...rest} theme = {theme} ref = {forwardedRef}/>}
                    </ThemeContext.Consumer>
                )
            }
        }
    
        function forwardRef(props,ref){ 
             return <WithThemeComponent {...props} forwardedRef = {ref}/>
        }
        return React.forwardRef(forwardRef);
    }

## 注意 ##

--------------------

如果可以使用**声明式**实现，那么就尽量避免使用**Refs**。例如：当设计一个Dialog组件的时候，不要直接暴露open和close方法，最好传递isOpen属性。牢记**声明式**是**React**的一大优点。

[React Context_HOC]: https://blog.csdn.net/csdnxcn/article/details/80075378