Сохранение значений без повторного рендеринга
Сохраняйте изменяемые значения между рендерами, не вызывая повторный рендеринг; сравните useRef и useState на простых счётчиках и идентификаторе таймера.
«Сохранение значений без повторного рендеринга» — бесплатный урок React Academy на CoddyKit. Это урок 1 из 3. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения React Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс React Academy содержит 3 уроков всего.
Зачем нужен useRef?
Цель: хранить значения, которые сохраняются между рендерами, не вызывая новый рендер. useRef предоставляет стабильный контейнер .current.
- Сохраняется между рендерами
- Изменение не вызывает повторный рендер
- Отлично подходит для таймеров и предыдущих значений
Реф и состояние
Обновления useState повторно отображают интерфейс. Обновления useRef этого не делают. Выбирайте реф для изменяемых вспомогательных значений (идентификаторов и счётчиков для логики), а не для данных интерфейса.
Демонстрация: счётчик рендеров с рефом
Мы увеличиваем renderCount в эффекте и храним его в рефе; он сохраняется между рендерами, но не вызывает их повторно.
<div id="root"></div>
Когда использовать useRef
Подходящие случаи:
- Идентификаторы таймеров и интервалов
- Кэш предыдущих значений
- Флаги между рендерами (например, isMounted)
Не подходит для данных, которые должны отображаться в интерфейсе.
Демонстрация: идентификатор таймера в рефе
Храните идентификатор интервала в рефе, чтобы запускать и останавливать таймер без лишних рендеров.
<div id="root"></div>
Типичные ошибки и советы
Типичные ошибки:
- Не считывайте значение рефа для управления интерфейсом без состояния — интерфейс не обновится.
- Сбрасывайте рефы при размонтировании, если в них хранятся идентификаторы или ресурсы.
- Не превращайте рефы в глобальные контейнеры.
Проверка понятия useRef
Итоги
Итоги: используйте useRef для изменяемых значений, которые сохраняются между рендерами, например идентификаторов, предыдущих значений или флагов, не вызывая повторные рендеры. Для видимого интерфейса используйте состояние.
Часто задаваемые вопросы
Урок «Сохранение значений без повторного рендеринга» бесплатный?
Да — полный текст урока «Сохранение значений без повторного рендеринга» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс React Academy, подпишись на CoddyKit PRO. Курс React Academy содержит 3 уроков всего.
Чему я научусь в уроке «Сохранение значений без повторного рендеринга»?
Сохраняйте изменяемые значения между рендерами, не вызывая повторный рендеринг; сравните useRef и useState на простых счётчиках и идентификаторе таймера. Ты практикуешь React Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать React Academy?
Предыдущий опыт не требуется. React Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 3.
Сколько времени занимает урок «Сохранение значений без повторного рендеринга»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке React Academy?
Да. Каждый урок React Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Сохранение значений без повторного рендеринга
- Доступ к узлам DOM, измерение и фокусировка
- Изменяемые ссылки для таймеров и идентификаторов