在useCallback挂钩中获取ref null

Question

我正在尝试使用ref设置input的值，但是我在useCallback Hook中获得ref null。

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

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

并且当我调用此函数时，它在浏览器控制台中显示null。

这只是一个示例，展示了我正在努力实现的目标。

Answer 1

可能您需要先将null传递给useRef()。然后，您可以使用inputRef.current进行访问。

尝试以下操作：

let inputRef = useRef(null);

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

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

摘自useRef()的文档：

useRef返回一个可变的ref对象，该对象的.current属性被初始化为传递的参数（initialValue）。返回的对象将在组件的整个生命周期中保持不变。

我希望这会有所帮助！

Answer 2

问题不在于他没有传入空值，默认情况下将 ref 初始化为 null。

问题是 useCallback() 在第一次渲染之前，在分配了这个 ref 的组件被挂载之前，记住并缓存这个回调函数的结果。然后等待 inputRef 改变，但 inputRef 只是一个对象的引用；即使 inputRef.current 指向的组件发生变化，inputRef 的值也不会改变，因为它只是通过引用相等性进行比较。

因此，由于函数没有理由更新，因为 inputRef 的值不会改变——它计算 search 回调的缓存结果，该回调在 null 回调之前计算和缓存DOM 已安装，并将 useCallback() 输出到控制台。

您正在寻找的是 Callback Ref

我想指出的另一件事是 useCallback 钩子对于这个用例不是必需的，并且不会提供任何好处。 filter 的唯一正确用法是缓存代价高昂的函数调用的结果，这样它们就不会在每次调用渲染时重新计算（这称为记忆化）。

随意使用 useCallback() 钩子是一种反模式——React 中的绝大多数回调都不需要它，如果使用不当会产生额外的开销，从而降低性能。