Людям, приходящим в React, потратив много времени на jquery или ванильный javascript, придется пройти несколько болезненных этапов обучения. Одна вещь, которая стоит в верхней части списка, заключается в том, что мы не должны использовать глобальные селекторы, такие как document.querySelector () или document.getElementById ().
Ваше приложение для реагирования может по-прежнему работать с этими глобальными селекторами, но это считается плохой практикой с наивысшим рейтингом.
Почему?
Как мы уже много раз слышали ранее, все в React является компонентом. И каждый компонент работает независимо, и у них есть автономный код. Но глобальные селекторы ищут не только в вашем компоненте, они ищут на уровне глобального документа и выбирают доменное имя, которое может принадлежать какому-то другому компоненту. А это приведет к множеству непредсказуемых ошибок.
Очень простой пример: если у нас есть два экземпляра одного и того же компонента, селектор для второго экземпляра может получить узлы dom из первого экземпляра, что совершенно неожиданно.
Способ реакции
React советует использовать «состояние» для сопоставления dom с переменными. Конечно, это дает множество преимуществ, таких как «единый источник истины», мгновенная проверка, меньше ошибок и т. Д. Но обратная сторона заключается в том, что это занимает немного времени, когда мы спешим создать что-то быстро и быстро.
Есть некоторые допустимые варианты использования, в которых мы не хотим делать это по принципу реакции. Один из примеров: допустим, у нас есть форма, и мы не хотим выполнять мгновенную проверку всех полей, а просто хотим читать значения полей на кнопке отправки.
В случае, если вы не хотите сопоставлять свой дом с состоянием, (по какой бы то ни было причине) response предоставляет альтернативу.
ссылка
Проще говоря, «ref» используется для идентификации узлов dom в компоненте.
<input type= "text" ref={ n => {this.myRef = n }} />
В приведенном выше примере this.myRef будет иметь ссылку на поле ввода текста. Его значение присваивается через функцию обратного вызова, что вполне понятно. Узел dom будет недоступен во время рендеринга. Он будет доступен только после рендеринга, и тогда будет вызвана функция обратного вызова, назначенная для «ref».
Примечание. Поскольку мы не сопоставляем состояние с dom, мы не можем использовать this.setState () для обновления. В этой ситуации у нас будут некоторые переменные уровня компонента (не переменные состояния) и мы будем обновлять их по мере необходимости, а для повторного рендеринга компонента мы вызовем this.forceUpdate ()
Когда размер компонента становится большим, мы можем захотеть провести рефакторинг нашего компонента и переместить нашу ссылку на наш дочерний компонент.
В родительском компоненте:
<Child childComponentRef={ n => this.childComponentRef = n} />
В дочернем компоненте:
<input type = "text" ref={props.childComponentRef} />
Пожалуйста, прочтите этот фрагмент, чтобы увидеть полный пример.
Здесь атрибут «ref» отображается с переменной props вместо функции обратного вызова. Это важное различие, о котором следует помнить. Но сама переменная props - это функция обратного вызова, присутствующая в родительском компоненте. (Новым разработчикам потребуется время, чтобы освоиться с этой логикой). Но поверьте мне, это слишком прямолинейно. Ссылки связаны с функцией обратного вызова, которая будет вызываться после завершения рендеринга.
Примечание: React советует использовать «ref» с осторожностью;)
