使用前向引用和使用固定處理的示例.在 React 的典型數(shù)據(jù)流中，道具是父子組件交互的唯一方式，要修改子組件，可以使用新道具重新渲染它。

　　除了典型的 React 數(shù)據(jù)流之外，在某些情況下(例如，專注于一個 DOM 元素等)為了修改子組件，我們可能需要另一種方式：Ref 方式。引用提供了一種訪問 DOM 節(jié)點或 React 元素的方法。

　　*由于本文使用了功能組件，因此我將重點介紹它們。讓我們從第一個示例開始，以便我們可以更好地理解。

　　示例一：對焦輸入

　　當用戶單擊按鈕時將光標聚焦在輸入上

　　假設(shè)我們有一個輸入字段，我們希望當用戶開始鍵入或單擊按鈕時光標聚焦于該字段。僅修改輸入字段更有意義，而不是更改狀態(tài)(通過 props)導(dǎo)致組件重新渲染，這可以通過創(chuàng)建 ref 來完成。

　　我們可以使用 useRef() 鉤子來創(chuàng)建一個 ref，該引用返回一個可變對象，其當前屬性設(shè)置為我們傳遞給鉤子的初始值，并在 DOM 元素<輸入>上使用它：

　　控制臺.log(輸入引用)

　　很簡單，當用戶開始鍵入時，輸入字段是聚焦的，但是由于某種原因，當用戶單擊按鈕時，此輸入字段也應(yīng)該具有焦點，我們的輸入字段位于名為 InputWrapper 的反應(yīng)子組件中。

　　也許我們會嘗試這樣做：

　　這行不通，因為默認情況下，refs只在原生HTML元素中工作，我們不能為React組件提供引用(在我們的例子中是InpinTraapper)，并且由于函數(shù)組件沒有實例，我們也可能不會在其上使用屬性，這意味著：ref

　　常規(guī)函數(shù)或類組件不接收參數(shù)，并且 ref 在 props 中也不可用。ref

　　因此，我們需要將輸入包裝器傳遞到 forwardRef 中，它接收傳遞給功能組件的 prop 和引用，并返回 JSX。它的元素。

　　const InputWrapper = forwardRef((props, ref) => {…})

　　創(chuàng)建 ref 并將其傳遞給應(yīng)用組件內(nèi)的輸入包裝器

應(yīng)用內(nèi)觸發(fā)焦點的按鈕事件處理程序

將引用轉(zhuǎn)發(fā)到輸入 DOM 元素

　　通過這樣做，我們告訴 React，這個組件可以接收一個 ref，而我們的第二個參數(shù)將是傳入的 ref。 InputWrapperrefforwardRef

　　*在類組件上也可以進行引用轉(zhuǎn)發(fā)

　　示例二：播放/暫停視頻和對焦輸入

　　使用使用對多個引用使用簡化處理

　　在這個例子中，我們有一個視頻播放器和2個播放/暫停視頻的按鈕，當我們點擊播放按鈕時，我們還想聚焦下面的輸入字段，這意味著我們將有多個引用(視頻，輸入)。

　　如何轉(zhuǎn)發(fā)多個引用?

　　第一個解決方案：我們可以創(chuàng)建 ref 并將它們傳遞到一個對象中，然后使用與上面示例中相同的邏輯。

　　家長應(yīng)用程序：

　　兒童視頻包裝：

　　第二種解決方案：使用反應(yīng)鉤子useImperativeHandle

　　使用反轉(zhuǎn)手處理自定義在使用 ref 時向父組件公開的實例值，它應(yīng)該與轉(zhuǎn)發(fā)引用一起使用。

　　這聽起來可能令人困惑，讓我們先更新組件：

　　在應(yīng)用程序內(nèi)創(chuàng)建一個引用并將其傳遞給視頻包裝器：

　　在視頻包裝器組件中，我們可以確定哪些屬性將使用使用在引用上公開翻譯手柄鉤子(您可以隨意調(diào)用它們：播放視頻，焦點此輸入，暫停Me等)

　　上面的代碼是什么意思?我們在鉤子內(nèi)添加方法，然后它們將被其父級公開和使用。useImperative Handle

　　如上面的示例所示，我們可以使用鉤子 forwardRef 訪問 React 函數(shù)子組件的基礎(chǔ) DOM 元素，我們可以處理多個引用，甚至可以通過將引用傳遞給其子級來修改父組件有權(quán)訪問的引用。

　　注意：使用ImperativeHandle啟用了命令性代碼，這與 React 的聲明性本質(zhì)背道而馳，這使得它非常獨特。由于這個原因，除非絕對需要，否則通常建議避免這種鉤子。

　　您可以查看結(jié)果并在此處嘗試。