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

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

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

　　示例一：對(duì)焦輸入

　　當(dāng)用戶單擊按鈕時(shí)將光標(biāo)聚焦在輸入上

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

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

　　控制臺(tái).log(輸入引用)

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

　　也許我們會(huì)嘗試這樣做：

　　這行不通，因?yàn)槟J(rèn)情況下，refs只在原生HTML元素中工作，我們不能為React組件提供引用(在我們的例子中是InpinTraapper)，并且由于函數(shù)組件沒有實(shí)例，我們也可能不會(huì)在其上使用屬性，這意味著：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ā)焦點(diǎn)的按鈕事件處理程序

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

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

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

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

　　使用使用對(duì)多個(gè)引用使用簡(jiǎn)化處理

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

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

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

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

　　兒童視頻包裝：

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

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

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

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

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

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

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

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

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