javascript - 在 useCallback 钩子(Hook)中获取 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} />

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

这只是一个例子，展示了我想要实现的目标。

Answer 1

问题不在于他没有传入 null 值，而是默认将 ref 初始化为 null。

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

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

您正在寻找的是 Callback Ref

我想指出的另一件事是 useCallback 钩子(Hook)对于这个用例来说不是必需的，并且不会提供任何好处。 useCallback() 唯一正确的用法是缓存昂贵的函数调用的结果，这样它们就不会在每次调用 render 时重新计算(这称为内存)。

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