Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

到目前为止，我们有三种方式创建 Refs 。

1

回调 Refs

2

createRef API 的方式

3

使用 useRef() hook

回调 Refs

现在有一段代码，需要实现的功能是点击 button 按钮然后给 input 表单获取焦点。代码结构如下：

import React, { Component } from "react";

class CallbackRefExample extends Component {
 constructor(props) {
   super(props);
 }

render() {
   return (
     <div>
       回调 Refs:
       <br />
       <input type="text" />
       <button>Click</button>
     </div>
   );
 }
}

export default CallbackRefExample;

要实现这个功能，首先需要创建一个回调函数，并通过 ref 属性附加到 React 元素。然后给按钮绑定点击事件即可。

import React, { Component } from "react";

class CallbackRefExample extends Component {

constructor(props) {

super(props);

this.inputElementRef = this.inputElementRef.bind(this);

this.handleClick = this.handleClick.bind(this);

}

inputElementRef(inputElement) {

this.inputRef = inputElement;

}

handleClick() {

this.inputRef.focus();

}

render() {

return (

<div>

回调 Refs :

<br />

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

<button onClick={this.handleClick}>

Click

</button>

</div>

);

}

}

export default CallbackRefExample;

React 将在组件挂载时，会调用 ref 回调函数并传入 DOM 元素，当卸载时调用它并传入 null。

在 componentDidMount 或 componentDidUpdate 触发前，React 会保证 refs 一定是最新的。

createRef API 的方式

在 React 16.3 版本中新增 React.createRef() API 用来创建 Refs 。我们不需要再创建回调函数并将其分配给ref prop。只需通过 React.createRef() 创建一个 ref 并将其存储到某个变量中，然后将此变量分配给DOM元素的ref prop。因此，我们将以相同的示例为例。

import React, { Component } from "react";

export default function CallbackRefApiExample() {

let inputRef = React.createRef();

const handleClick = () => {

inputRef.current.focus();

};

return (

<div>

createRef API 的方式:

<br />

<input type="text" ref={inputRef} />

<button onClick={handleClick}>

Click

</button>

</div>

);

}

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

使用 useRef() hook

Hook 是 React 16.8 的新增特性。React 提供了 React 中内置的 Hook API。useRef 是其中一个，用法类似于React.createRef()。

import React, { useRef } from "react";

export default function UseRefHookExample() {

let inputRef = useRef(null);

const handleClick = () => {

inputRef.current.focus();

};

return (

<div>

使用 useRef() hook:

<br />

<input type="text" ref={inputRef} />

<button onClick={handleClick}>

Click

</button>

</div>

);

}

End