forwardRef useRef useImperativeHandle

这三者 forwardRef、useRef、useImperativeHandle 经常一起使用，目的是：

让父组件通过 ref 访问子组件内部的 DOM 或方法

 

forwardRef 负责 “传递 ref”，
useRef 负责 “引用内部 DOM 或变量”，
useImperativeHandle 负责 “自定义 ref 暴露给外部的内容”

# 子组件
import { forwardRef, useRef, useImperativeHandle } from 'react';

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

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => inputRef.current.value = '',
    getValue: () => inputRef.current.value,
  }));

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

# forwardRef 让 ref 从父组件传进来
# useRef 获取内部 DOM 引用
# useImperativeHandle 决定暴露哪些方法

# 父组件
const inputRef = useRef();

<MyInput ref={inputRef} />

<button onClick={() => inputRef.current.focus()}>聚焦</button>
<button onClick={() => inputRef.current.clear()}>清空</button>
<button onClick={() => alert(inputRef.current.getValue())}>获取值</button>