在 useCallback 钩子中获取 ref null答案

【问题标题】：Getting ref null inside useCallback hook在 useCallback 钩子中获取 ref null
【发布时间】：2020-04-12 13:42:08
【问题描述】：

我正在尝试使用 ref 设置输入的值，但我在 useCallback Hook 中得到了 ref null。

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

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

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

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

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案1】：

问题不在于他没有传入一个空值，一个ref默认初始化为null。

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

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

你要找的是Callback Ref

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

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

【讨论】：