forwardRef和useImperativeHandle到底能做啥

线上个官网例子
App.js

import { useRef } from 'react';
import MyInput from './MyInput.js';

export default function Form() {
  const ref = useRef(null);

  function handleClick() {
    ref.current.focus();
    // This won't work because the DOM node isn't exposed:
    // ref.current.style.opacity = 0.5;
  }

  return (
    <form>
      <MyInput placeholder="Enter your name" ref={ref} />
      <button type="button" onClick={handleClick}>
        Edit
      </button>
    </form>
  );
}

Myinput.js

import { forwardRef, useRef, useImperativeHandle } from 'react';

const MyInput = forwardRef(function MyInput(props, ref) {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => {
    return {
      focus() {
        inputRef.current.focus();
      },
      scrollIntoView() {
        inputRef.current.scrollIntoView();
      },
    };
  }, []);

  return <input {...props} ref={inputRef} />;
});

export default MyInput;

forwardRef是React 提供的一个高阶函数,配合useImperativeHandle, 可以让父组件拿到子组件中某个element暴露的方法,比如input的focus事件, 父子组件都需要申明一个ref,forwardRef可以用来包裹子组件,并且把父组件的ref传递到子组件中, 两个ref通过useImperativeHandle进行联动