创建 Refs 的几种方式

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