在 useCallback 掛鈎中獲取 ref null

Question

我正在嘗試使用 ref 設置輸入的值，但我在 useCallback Hook 中得到了 ref null。

let inputRef = useRef();
const search = useCallback(
        (data) => {
            console.log(inputRef);
        },
        [inputRef],
    );

return <input type="text" ref={inputRef} />

當我調用此 function 時，它在瀏覽器控制台中顯示null 。

這只是一個例子，展示了我想要實現的目標。

Answer 1

問題不在於他沒有傳入 null 值，默認情況下將 ref 初始化為null 。

問題是useCallback()在第一次渲染之前，在這個 ref 被分配到的組件被掛載之前，記憶並緩存了這個回調 function 的結果。 然后它等待inputRef更改，但inputRef只是對 object 的引用； 即使inputRef.current指向的組件發生變化， inputRef的值也不會改變，因為它只是通過引用相等性進行比較。

因此，由於 function 沒有理由更新，因為inputRef的值不會改變 - 它評估search回調的緩存結果，該結果在 DOM 安裝之前計算和緩存，並將null輸出到控制台。

您正在尋找的是回調參考

我想指出的另一件事是 useCallback 鈎子對於這個用例來說不是必需的，並且不會提供任何好處。 useCallback()唯一正確的用法是緩存昂貴的 function 調用的結果，這樣它們就不會在每次調用 render 時都重新計算（這稱為 memoization）。

useCallback() 鈎子的任意使用是一種反模式——React 中絕大多數回調都不需要它，並且在使用不正確時會通過產生額外的開銷而降低性能。