javascript - 与在useEffect中分配转发的ref相比，useImperativeHandle有什么好处？

docs中提供的示例如下:

function FancyInput(props, ref) {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));
  return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);

据我所见，我可以用

function FancyInput(props, ref) {
  const inputRef = useRef();
  useEffect(() => {
    if (ref) {
      ref.current = {
        focus: () => {
          inputRef.current.focus();
        }
      };
    }
  }, [ref]);
  return <input ref={inputRef} />;
}
FancyInput = forwardRef(FancyInput);

useImperativeHandle不太冗长的可能解释对我来说似乎微不足道。到底是什么？是什么使它比useEffect版本必要或更好？

最佳答案

TLDR； 相同，并且useImperativeHandle仅处理所有ref情况，并确保传递的值是ref而不是任何值。
回答您的问题它可以为您处理使用引用时所需要的一切，因此可以节省一些代码。

我看着挂钩的source code，看起来像是在引擎盖下，useImperativeHandle几乎与您使用useEffect的方法相同。
您可以看一下挂钩，看看它们有HooksDispatcherOnMount，HooksDispatcherOnUpdate和HooksDispatcherOnRerender。
如果查看相关的函数(fooImperativeHandle和fooEffect)，您会看到两者都调用了相同的函数(fooEffectImpl)。
因此，显然，这是一回事，但是使用useImperativeHandle时，您不需要处理.current的一部分，它已经检查了null值，检查了它是否是ref，并在您设置.current时返回了值可以看到here。
那是我从源代码中获得的，但是如果我错了，请更正我。