React Refs的作用和用法详解 – ReactJS实战教程

上一章ReactJS实战教程请查看：React key的作用和用法

Refs是React中引用（references）的缩写，它类似于React中的keys。它是一个属性，可以存储对特定DOM节点或React元素的引用。它提供了访问React DOM节点或React元素以及如何与之交互的方法，当我们想要更改子组件的值时使用它，而不需要使用props。

何时使用应用refs

refs可用于以下情况:

• 当需要管理焦点、文本选择或媒体播放等DOM度量时。
• 它用于触发命令式动画。
• 与第三方DOM库集成时。
• 它也可以用作回调。

何时不使用refs

• 对于任何可以声明性地进行的操作，都应该避免使用它。例如，你不需要在对话框组件上使用open()和close()方法，而是需要向它传递一个isOpen prop。
• 你应该避免过度使用refs。

如何创建引用refs？

在React中，可以使用React.createref()创建Refs，可以通过ref属性将其分配给React元素。它通常在创建组件时分配给实例属性，然后可以在整个组件中引用。

class MyComponent extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRef = React.createRef();  
  }  
  render() {  
    return <div ref={this.callRef} />;  
  }  
}  

如何访问Refs

在React中，当ref被传递给render方法中的元素时，可以通过ref的当前属性访问节点的引用。

const node = this.callRef.current;  

引用当前属性

ref值根据节点的类型不同而不同:

• 当在HTML元素中使用ref属性时，使用React.createref()创建的ref将接收作为其当前属性的底层DOM元素。
• 如果在自定义类组件上使用ref属性，则ref对象将该组件的挂载实例作为其当前属性接收。
• ref属性不能用于函数组件，因为它们没有实例。

向DOM元素添加Ref

在下面的示例中，我们添加了一个ref来存储对DOM节点或元素的引用。

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRef = React.createRef();  
    this.addingRefInput = this.addingRefInput.bind(this);  
  }  
   
  addingRefInput() {  
    this.callRef.current.focus();  
  }  
   
  render() {  
    return (  
      <div>  
        <h2>向DOM元素添加Ref</h2>  
        <input  
          type="text"  
          ref={this.callRef} />  
        <input  
          type="button"  
          value="添加文本输入"  
          onClick={this.addingRefInput}  
        />  
      </div>  
    );  
  }  
}  
export default App;  

将Ref添加到类组件

在下面的示例中，我们添加了一个ref来存储对类组件的引用。

例子

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
function CustomInput(props) {  
  let callRefInput = React.createRef();  
   
  function handleClick() {  
    callRefInput.current.focus();  
  }  
   
  return (  
    <div>  
      <h2>将Ref添加到类组件</h2>  
      <input  
        type="text"  
        ref={callRefInput} />  
      <input  
        type="button"  
        value="Focus input"  
        onClick={handleClick}  
      />  
    </div>  
  );  
}  
class App extends React.Component {  
  constructor(props) {  
    super(props);  
    this.callRefInput = React.createRef();  
  }  
   
  focusRefInput() {  
    this.callRefInput.current.focus();  
  }  
   
  render() {  
    return (  
      <CustomInput ref={this.callRefInput} />  
    );  
  }  
}  
export default App;  

回调refs

在react中，有另一种使用refs的方法，称为“回调refs”，它在设置和取消设置refs时提供了更多的控制。React不使用createRef()方法创建引用，而是允许通过向组件的ref属性传递回调函数来创建引用。它看起来像下面的代码。

<input type="text" ref={element => this.callRefInput = element} />  

回调函数用于在实例属性中存储对DOM节点的引用，可以在其他地方访问。可以按如下方式访问：

this.callRefInput.value  

下面的示例有助于理解回调引用的工作原理。

import React, { Component } from 'react';  
import { render } from 'react-dom';  
   
class App extends React.Component {  
    constructor(props) {  
    super(props);  
  
    this.callRefInput = null;  
  
    this.setInputRef = element => {  
      this.callRefInput = element;  
    };  
  
    this.focusRefInput = () => {  
      //使用原始DOM API聚焦input
      if (this.callRefInput) this.callRefInput.focus();  
    };  
  }  
  
  componentDidMount() {  
    //自动聚焦  
    this.focusRefInput();  
  }  
  
  render() {  
    return (  
      <div>  
    <h2>回调Refs例子</h2>  
        <input  
          type="text"  
          ref={this.setInputRef}  
        />  
        <input  
          type="button"  
          value="Focus input text"  
          onClick={this.focusRefInput}  
        />  
      </div>  
    );  
  }  
}  
export default App;  

在上面的例子中，React将调用“ref”回调，以在组件挂载时存储对输入DOM元素的引用，当组件卸载时，用null调用它。Refs总是在componentDidMount或componentDidUpdate触发之前更新的。组件之间传递的回调refs与处理对象refs相同，后者是用React.createref()创建的。

将Ref从一个组件转发到另一个组件

Ref转发是一种技术，用于将一个Ref通过一个组件传递给它的一个子组件，它可以通过使用React.forwarding()方法来执行。这种技术对于高阶组件特别有用，特别用于可重用的组件库。最常见的例子如下。

例子

import React, { Component } from 'react';  
import { render } from 'react-dom';  
  
const TextInput = React.forwardRef((props, ref) => (  
  <input type="text" placeholder="Hello World" ref={ref} />  
));  
  
const inputRef = React.createRef();  
  
class CustomTextInput extends React.Component {  
  handleSubmit = e => {  
    e.preventDefault();  
    console.log(inputRef.current.value);  
  };  
  render() {  
    return (  
      <div>  
        <form onSubmit={e => this.handleSubmit(e)}>  
          <TextInput ref={inputRef} />  
          <button>提交</button>  
        </form>  
      </div>  
    );  
  }  
}  
export default App;  

在上面的示例中，有一个组件TextInput，它的输入字段是一个子字段。现在，要将ref向下传递或转发到输入，首先创建一个ref，然后将你的ref向下传递到<TextInput ref={inputRef}>。之后，React将ref作为第二个参数转发到forwarding函数。接下来，我们将这个ref参数转发到<input ref={ref}>。现在，可以在inputRef.current访问DOM节点的值。

React使用useRef()

在React 16.7及以上版本中有介绍。它有助于访问DOM节点或元素，然后我们可以与该DOM节点或元素进行交互，比如聚焦输入元素或访问输入元素值。它返回ref对象，其.current属性初始化为传递的参数。返回的对象在组件的生命周期内保持不变。

语法

const refContainer = useRef(initialValue);  

例子

在下面的代码中，useRef是一个函数，它被分配给一个变量inputRef，然后附加到HTML元素中要引用的一个名为ref的属性。

function useRefExample() {  
  const inputRef= useRef(null);  
  const onButtonClick = () => {  
    inputRef.current.focus();  
  };  
  return (  
    <>  
      <input ref={inputRef} type="text" />  
      <button onClick={onButtonClick}>提交</button>  
    </>  
  );  
}