一、useImperativeHandle（）

useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle 可以讓你在使用 ref 時自定義暴露給父組件的實例值。在大多數情況下，應當避免使用 ref

這樣的命令式代碼。 useImperativeHandle 應當與 forwardRef 一起使用。

function FancyInput(props, ref) {
? const inputRef = useRef();
? useImperativeHandle(ref, () => ({
? ? focus: () => {
? ? ? inputRef.current.focus();
? ? }
? }));
? return <input ref={inputRef} ... />;
}
FancyInput = forwardRef(FancyInput);

在本例中，渲染 的父組件可以調用 inputRef.current.focus()。

二、forwardRef（）

React.forwardRef 會創建一個React組件，這個組件能夠將其接受的 ref 屬性轉發到其組件樹下的另一個組件中。

這種技術并不常見，但在以下兩種場景中特別有用：

（1）轉發 refs 到 DOM 組件

（2）在高階組件中轉發 refs

React.forwardRef 接受渲染函數作為參數。React 將使用 props 和 ref 作為參數來調用此函數。此函數應返回 React 節點。 FancyButton 使用 React.forwardRef 來獲取傳遞給它的 ref，然后轉發到它渲染的 DOM button。這樣，使用 FancyButton 的組件可以獲取底層 DOM 節點 button 的 ref，并在必要時訪問，就像其直接使用 DOM button 一樣。

const FancyButton = React.forwardRef((props, ref) => ( ? // Step:3
? <button ref={ref} className="FancyButton"> ? ?// Step:4
? ? ? {props.children}
? </button>
));
const ref = React.createRef(); // Step:1
<FancyButton ref={ref}>Click me!</FancyButton>; // Step:2

在上述的示例中，React 會將 <FancyButton ref={ref}> 元素的 ref 作為第二個參數傳遞給 React.forwardRef 函數中的渲染函數。該渲染函數會將 ref 傳遞給 <button ref={ref}> 元素。 因此，當React 附加了 ref 屬性之后，ref.current 將直接指向 <button> DOM 元素實例。 欲了解更多相關信息，請參閱官檔 refs 轉發。

以下是對上述示例發生情況的逐步解釋：（轉發 refs 到 DOM 組件）

• 我們通過調用 React.createRef 創建了一個 React ref 并將其賦值給 ref 變量。
• 我們通過指定 ref 為JSX 屬性，將其向下傳遞給 <FancyButton ref={ref}>。
• React 傳遞 ref 給 forwardRef 內函數 (props, ref) => ...，作為其第二個參數。
• 我們向下轉發該 ref 參數到 <button ref={ref}>，將其指定為 JSX 屬性。
• 當 ref 掛載完成，ref.current 將指向 <button> DOM 節點。

三、案例

父組件

1、注冊

2、定義

3、觸發

子組件

1、暴露子組件方法，將 forwardRef 接受的 ref 屬性轉發到其組件樹下的另一個組件中

(1)

(2)

(3)父組件