在 React 的生態(tài)系統(tǒng)中匆篓，forwardRef 是一個強大的工具颂碧，尤其是當你需要在組件之間傳遞 ref 時鳍置。在本文中弦聂，我們將深入探討 forwardRef 的各種用法。
什么是 forwardRef?
forwardRef 是一個函數(shù)，它接收一個渲染函數(shù)作為參數(shù)。這個渲染函數(shù)接收 props 和 ref 作為參數(shù)，并返回一個 React 節(jié)點桃焕。
React.forwardRef((props, ref) => {
return <div ref={ref} />;
});
為什么要使用 forwardRef?
在 React 中，ref 是一個特殊的屬性捧毛，它可以用來引用組件或 DOM 元素观堂。當你在組件中使用 ref 時，你可以通過 ref.current 來訪問組件或 DOM 元素呀忧。
用法
1. 傳遞 ref 給 DOM 元素
forwardRef 的主要功能是將引用 (ref) 從父組件轉(zhuǎn)發(fā)到子組件师痕。這對于訪問子組件的 DOM 元素非常有用。
::: details demo 代碼 <<< @/components/react/hooks/forwardRef/ForwardRefDom.jsx :::
在這個例子中而账，F(xiàn)ancyButton 組件使用 forwardRef 來接收一個 ref 并將其傳遞給內(nèi)部的 Button 組件胰坟。由于 ref 已經(jīng)被轉(zhuǎn)發(fā)到 Button 組件，我們可以直接通過 ref.current 訪問到 DOM 元素泞辐。在 App 組件中笔横，當按鈕被點擊時，我們使用 ref.current 來更改按鈕的字體顏色和背景色咐吼。
2. 在高階組件中使用 forwardRef
forwardRef 也可以在高階組件中使用吹缔。在這種情況下，ref 參數(shù)不會作為 props 傳遞給組件锯茄，而是作為第二個參數(shù)傳遞給渲染函數(shù)厢塘。
::: details demo 代碼 <<< @/components/react/hooks/forwardRef/WithBorderApp.jsx :::
在這個例子中，我們創(chuàng)建了一個 withBorder 高階組件肌幽，它為傳入的組件添加了一個藍色的邊框晚碾。在 App 組件中，我們創(chuàng)建了一個 ref 并將其傳遞給 ButtonWithBorder喂急。然后格嘁，我們可以使用這個 ref 來訪問 SimpleButton 的 DOM 元素，并調(diào)用其 innerText 更改按鈕的文本廊移。
3. 與 useImperativeHandle 配合使用
forwardRef 還可以與 useImperativeHandle 配合使用讥蔽。useImperativeHandle 可以讓你在使用 ref 時自定義暴露給父組件的實例值。
::: details demo 代碼 <<< @/components/react/hooks/forwardRef/ForwardedInput.jsx :::
總結(jié)
forwardRef 提供了一種在 React 組件中傳遞 ref 的強大方法画机。通過上述示例，我們可以看到它在各種場景中的應用新症，從基本的函數(shù)組件到高階組件步氏，再到與其他 React Hooks 的結(jié)合使用。掌握 forwardRef 可以幫助你更好地管理組件間的交互和引用徒爹，從而提高應用的靈活性和可維護性荚醒。
