我正在尝试使用 ref 设置输入的值,但在 useCallback Hook 中得到 ref null。
let inputRef = useRef();
const search = useCallback(
(data) => {
console.log(inputRef);
},
[inputRef],
);
return <input type="text" ref={inputRef} />
当我调用此函数时,它在浏览器控制台中显示 null
。
这只是一个例子,展示了我想要实现的目标。
最佳答案
问题不在于他没有传入 null 值,而是默认将 ref 初始化为 null
。
问题在于,useCallback()
在第一次渲染之前、在挂载此引用所分配到的组件之前,会记住并缓存此回调函数的结果。然后它等待 inputRef
更改,但 inputRef
只是对对象的引用;即使 inputRef.current
指向的组件发生变化,inputRef
的值也不会变化,因为它只是通过引用相等性进行比较。
因此,由于该函数没有理由更新,因为 inputRef
的值不会改变 - 它会评估 search
回调的缓存结果,在 DOM 安装之前计算并缓存,并将 null
输出到控制台。
您正在寻找的是 Callback Ref
我想指出的另一件事是 useCallback 钩子(Hook)对于这个用例来说不是必需的,并且不会提供任何好处。 useCallback()
唯一正确的用法是缓存昂贵的函数调用的结果,这样它们就不会在每次调用 render 时重新计算(这称为内存)。
任意使用 useCallback() 钩子(Hook)是一种反模式——React 中的绝大多数回调都不需要它,并且如果使用不当,会产生额外的开销,从而降低性能。
关于javascript - 在 useCallback 钩子(Hook)中获取 ref null,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61172383/