一、useImperativeHandle（）

useImperativeHandle(ref, createHandle, [deps])

useImperativeHandle 可以讓你在使用 ref 時自定義暴露給父組件的實例值。在大多數(shù)情況下，應(yīng)當(dāng)避免使用 ref

這樣的命令式代碼。 useImperativeHandle 應(yīng)當(dāng)與 forwardRef 一起使用。

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

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

二、forwardRef（）

React.forwardRef 會創(chuàng)建一個React組件，這個組件能夠?qū)⑵浣邮艿?ref 屬性轉(zhuǎn)發(fā)到其組件樹下的另一個組件中。

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

（1）轉(zhuǎn)發(fā) refs 到 DOM 組件

（2）在高階組件中轉(zhuǎn)發(fā) refs

React.forwardRef 接受渲染函數(shù)作為參數(shù)。React 將使用 props 和 ref 作為參數(shù)來調(diào)用此函數(shù)。此函數(shù)應(yīng)返回 React 節(jié)點。 FancyButton 使用 React.forwardRef 來獲取傳遞給它的 ref，然后轉(zhuǎn)發(fā)到它渲染的 DOM button。這樣，使用 FancyButton 的組件可以獲取底層 DOM 節(jié)點 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 作為第二個參數(shù)傳遞給 React.forwardRef 函數(shù)中的渲染函數(shù)。該渲染函數(shù)會將 ref 傳遞給 <button ref={ref}> 元素。 因此，當(dāng)React 附加了 ref 屬性之后，ref.current 將直接指向 <button> DOM 元素實例。 欲了解更多相關(guān)信息，請參閱官檔 refs 轉(zhuǎn)發(fā)。

以下是對上述示例發(fā)生情況的逐步解釋：（轉(zhuǎn)發(fā) refs 到 DOM 組件）

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

三、案例

父組件

1、注冊

2、定義

3、觸發(fā)

子組件

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

(1)

(2)

(3)父組件