Какие преимущества дает useImperativeHandle по сравнению с назначением перенаправленного ref в useEffect?

Question

Пример, приведенный в документации, следующий:

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);

Возможное объяснение, которое используетImperativeHandle немного менее многословен, кажется мне слишком тривиальным. Что под капотом? Что делает это необходимым или лучше, чем версия useEffect? ​​

Answer 1

TLDR; Это то же самое, и useImperativeHandle просто обрабатывает все случаи ref и гарантирует, что переданное значение является ссылкой, а не просто любым значением.

Отвечая на ваш вопрос Я использую для вас все, что нужно при использовании ссылок, поэтому он сохраняет некоторый код.

---

Я искал исходный код хуков и выглядит под капотом, useImperativeHandle почти такой же, как ваш подход с useEffect.

Вы можете взглянуть на крючки и увидеть, что у них есть HooksDispatcherOnMount , HooksDispatcherOnUpdate и HooksDispatcherOnRerender .

Если вы посмотрите на связанные функции (fooImperativeHandle и fooEffect), вы увидите, что обе они вызывают одну и ту же функцию (* 1028) *).

Итак, очевидно, под капотом это то же самое, но с использованием useImperativeHandle вам не нужно обрабатывать часть .current, она уже проверяет значения null , проверяет, является ли это ref и устанавливает возвращаемое значение в .current, как вы см. здесь .

Это то, что я получил от просмотра исходного кода, но если я ошибаюсь, поправьте меня.