一、useRef

学习 useImperativeHandle，得从 useRef 说起。我们前面已经学习过了 useRef，它能够结合元素组件的 ref 属性帮我们拿到该元素组件对应的真实 DOM。

例如，我想要拿到一个 input 元素的真实 DOM 对象，并调用 input 的 .focus() 方法，让 input 获得焦点。

import {useRef} from "react";

export default function Demo() {
  const inputRef = useRef<HTMLInputElement>(null);

  const focusTextInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }

  return (
    <>
      <input type="text" ref={inputRef} />
      <button onClick={focusTextInput}>
        点击我让input组件获得焦点
      </button>
    </>
  );
}