React中ref的四种使用方法

在React中，ref是一个特殊的属性，它允许我们访问DOM元素或者在render方法之外的地方保持组件的引用。以下是React中ref的四种使用方法：

1. 字符串形式的ref

这是最简单的形式，你可以通过一个字符串来标记ref。

class MyComponent extends React.Component {
  render() {
    return (
      <input ref="myInput" />
    );
  }
}
 
let component = ReactDOM.render(<MyComponent />, document.getElementById('example'));
let inputNode = component.refs.myInput;

2. 回调形式的ref

你也可以传递一个函数作为ref的值，这个函数会在组件挂载后立即执行，并接收作为参数被挂载的DOM元素或组件的实例。

class MyComponent extends React.Component {
  render() {
    return (
      <input ref={(input) => this.myInput = input} />
    );
  }
}
 
let component = ReactDOM.render(<MyComponent />, document.getElementById('example'));
let inputNode = component.myInput;

3. createRef 的使用

React 16.3 版本引入了 createRef 方法，可以用来创建 ref 引用。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return (
      <input ref={this.myRef} />
    );
  }
}
 
let component = ReactDOM.render(<MyComponent />, document.getElementById('example'));
let inputNode = component.myRef.current;

4. useRef 的使用

如果你在使用函数组件，可以使用 React 16.8 引入的 Hooks 特性中的 useRef。

function MyComponent() {
  const myRef = useRef(null);
  useEffect(() => {
    myRef.current.focus();
  }, []);
  return (
    <input ref={myRef} />
  );
}
 
ReactDOM.render(<MyComponent />, document.getElementById('example'));

以上就是React中ref的四种使用方法，每种方法都有其特定的使用场景，你可以根据实际需求选择合适的方法。