本文的大部分方式都从官网整合而来

一、字符串形式

过时的API，如需了解请至官网

二、回调 Refs

官网描述足矣

关于 refs 回调执行两次的说明

如果 ref 回调函数是以内联函数的方式定义的，在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。这是因为在每次渲染时会创建一个新的函数实例，所以 React 清空旧的 ref 并且设置新的。通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，但是大多数情况下它是无关紧要的。

三、在类组件中使用React.createRef()

官网描述足矣

四、React.forwardRef()

Refs转发

五、useRef()

存储DOM节点

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内持续存在。

本质上，useRef 就像是可以在其 .current 属性中保存一个可变值的“盒子”。

存储任何可变值

官网描述足矣