Различия между `useRef` и переменной ref в ReactJS - PullRequest
Новая
       26

Различия между `useRef` и переменной ref в ReactJS

0 голосов
/ 12 июня 2019

У меня есть 

const CompA = () => {
  let _input;
  return (
    <input ref={el => _input = el} type="text" />
  );
}

А это 

const CompB = () => {
  const _input = useRef(null);
  return (
    <input ref={_input} type="text" />
  );
}

Два _input - это объект ref тега input, и я не могу найти различия между ними.

Мой вопрос: в чем разница между двумя _input и тем, который _input лучше?

Ответы [ 2 ]

1 голос
/ 12 июня 2019

Два способа определения ссылок не эквивалентны.

Рассмотрим первый пример 

const CompA = () => {
  let _input;
  return (
    <input ref={el => _input = el} type="text" />
  );
}

В этом примере всякий раз, когда CompA выполняет повторный рендеринг, создается новая переменная _input, например, если у вас есть useEffect в CompA, которое предназначено для запуска при начальном рендеринге, и оно выполняет что-то с интервалом, используя эту ссылку переменная, это приведет к несоответствиям.

Теперь рассмотрим второй случай 

const CompA = () => {
  const _input = useRef(null);
  return (
    <input ref={_input} type="text" />
  );
}

В этом случае, даже если переменная _input создается при каждом рендеринге, useRef гарантирует, что он получит ту же ссылку, что и в первый раз, и не инициализирует ее снова. useRef - это правильный способ определения ссылок для functional Components. Для компонентов класса вы можете использовать createRef или шаблон обратного вызова, который вы упомянули

0 голосов
/ 12 июня 2019

Из документов :

Это работает, потому что useRef () создает простой объект JavaScript. Единственное отличие между useRef () и созданием объекта {current: ...} заключается в том, что useRef будет выдавать вам один и тот же объект ref при каждом рендеринге.

Другими словами, useRef будет сохранять ссылку на каждый рендер / обновление, изменяя реквизиты или состояние. С другой стороны, простая ref как переменная будет стираться при каждом цикле компонента.

...