1 added
1 removed
Original
2026-01-01
Modified
2026-02-26
1
<p>Иногда в компонентах нам нужен доступ к DOM-элементам - например, чтобы вызывать методы этого элемента. Элементы DOM не являются частью React, поэтому напрямую в компоненте к ним нет доступа. Но для этого есть хук useRef(), который позволяет получить доступ к таким элементам.</p>
1
<p>Иногда в компонентах нам нужен доступ к DOM-элементам - например, чтобы вызывать методы этого элемента. Элементы DOM не являются частью React, поэтому напрямую в компоненте к ним нет доступа. Но для этого есть хук useRef(), который позволяет получить доступ к таким элементам.</p>
2
<p>С помощью useRef() можно получить доступ к DOM-элементам, чтобы использовать их в useEffect() или обработчиках событий:</p>
2
<p>С помощью useRef() можно получить доступ к DOM-элементам, чтобы использовать их в useEffect() или обработчиках событий:</p>
3
<p>Значение внутри inputEl появляется после монтирования компонента, но до вызова хуков. Для этого нужно не забывать установить на нужный элемент атрибут ref. С помощью этого атрибута устанавливается связь между хуком и элементом, к которому мы хотим получить доступ.</p>
3
<p>Значение внутри inputEl появляется после монтирования компонента, но до вызова хуков. Для этого нужно не забывать установить на нужный элемент атрибут ref. С помощью этого атрибута устанавливается связь между хуком и элементом, к которому мы хотим получить доступ.</p>
4
<p>Другой вариант использования хука useRef() - хранение любых данных между вызовами компонента. Этот хук возвращает обычный объект со свойством current внутри. Единственное отличие этого объекта от создаваемого вручную { current: ... } в том, что хук возвращает один и тот же объект при каждом вызове компонента. По своему поведению useRef() похож на использование обычного свойства внутри классового компонента (this.someproperty).</p>
4
<p>Другой вариант использования хука useRef() - хранение любых данных между вызовами компонента. Этот хук возвращает обычный объект со свойством current внутри. Единственное отличие этого объекта от создаваемого вручную { current: ... } в том, что хук возвращает один и тот же объект при каждом вызове компонента. По своему поведению useRef() похож на использование обычного свойства внутри классового компонента (this.someproperty).</p>
5
<p>Ниже пример того, как можно сохранять предыдущее состояние с помощью useRef():</p>
5
<p>Ниже пример того, как можно сохранять предыдущее состояние с помощью useRef():</p>
6
-
<p><a>https://codepen.io/hexlet/pen/yLzNYaG</a></p>
6
+
<p><a>Попрактиковаться</a></p>
7
<h2>Рекомендуемые программы</h2>
7
<h2>Рекомендуемые программы</h2>