ReactJS - Использование useRef: Пособие для начинающих

Здравствуйте, будущие разработчики React! Сегодня мы отправимся в увлекательное путешествие в мир React hooks, конкретно hook useRef. Не волнуйтесь, если вы новички в программировании – я буду вашим доброжелательным проводником, объясняя все шаг за шагом. Так что возьмите杯 кофе (или чай, если это ваш выбор) и погружайтесь с нами!

Что такое useRef?

Прежде чем мы начнем программировать, давайте поймем, что такое useRef. Представьте, что у вас есть магическая коробка, которая может удерживать любое значение, которое вы хотите, и эта коробка не изменяется даже когда ваш компонент перерисовывается. Вот что useRef делает для нас в React!

useRef – это hook, который предоставляет способ создания изменяемой ссылки, которая persists между перерисовками компонентов. Это как secret compartment в вашем компоненте, где вы можете хранить информацию, не вызывая перерисовку, когда эта информация изменяется.

Сигнатура hook useRef

Давайте посмотрим, как мы используем hook useRef:

const refContainer = useRef(initialValue);

Здесь initialValue – это значение, с которым вы хотите начать, а refContainer – это объект с одним свойством,叫做 current. Это свойство current хранит фактическое значение, на которое вы ссылаетесь.

Представьте это как special box с этикеткой на ней, говорящей "current". Whatever вы положите внутрь этой коробки становится значением current.

Применение hook useRef

Теперь давайте посмотрим, как мы можем использовать useRef в реальном сценарии. Представим, что мы хотим создать простое текстовое поле, которое при нажатии автоматически фокусируется и позволяет пользователю начать вводить текст.

import React, { useRef, useEffect } from 'react';

function AutoFocusInput() {
const inputRef = useRef(null);

useEffect(() => {
inputRef.current.focus();
}, []);

return <input ref={inputRef} />;
}

Давайте разберем это:

1. Мы импортируем useRef вместе с useEffect из React.
2. Мы создаем ref под названием inputRef с помощью useRef(null).
3. Мы используем hook useEffect, чтобы фокусироваться на вводе, когда компонент монтируется.
4. В JSX мы привязываем наш ref к элементу ввода с помощью атрибута ref.

Когда этот компонент отрисовывается, ввод автоматически получит фокус. Это как магия, не правда ли? Но это не магия – это сила useRef!

Сценарии использования useRef

Теперь, когда мы видели базовый пример, давайте рассмотрим еще несколько сценариев использования useRef. Поверьте мне, этот hook versatile kuin швейцарский армейский нож!

1. Хранение Previous Values

Иногда вам может понадобиться отслеживать значение с предыдущего рендера. useRef идеально подходит для этого!

import React, { useState, useRef, useEffect } from 'react';

function CounterWithPrevious() {
const [count, setCount] = useState(0);
const prevCountRef = useRef();

useEffect(() => {
prevCountRef.current = count;
}, [count]);

return (
<div>
<p>Текущее значение: {count}</p>
<p>Предыдущее значение: {prevCountRef.current}</p>
<button onClick={() => setCount(count + 1)}>Увеличить</button>
</div>
);
}

В этом примере мы используем useRef для хранения предыдущего значения нашего счетчика. Каждый раз, когда значение счетчика изменяется, мы обновляем наш ref в hook useEffect. Таким образом, у нас всегда есть доступ к текущему и предыдущему значению счетчика.

2. Доступ к DOM Elementам

useRef также великолепен для прямого доступа к DOM элементам. Давайте создадим компонент видеоплеера в качестве примера:

import React, { useRef } from 'react';

function VideoPlayer() {
const videoRef = useRef(null);

const playVideo = () => {
videoRef.current.play();
};

const pauseVideo = () => {
videoRef.current.pause();
};

return (
<div>
<video ref={videoRef} src="path/to/your/video.mp4" />
<button onClick={playVideo}>Play</button>
<button onClick={pauseVideo}>Pause</button>
</div>
);
}

Здесь мы используем useRef для получения ссылки на элемент видео. Это позволяет нам вызывать методы, такие как play() и pause(), напрямую на элементе видео при нажатии кнопок.

3. Сохранение значений между рендерами

useRef также полезен, когда вам нужно сохранить значение между рендерами, не вызывая перерисовку. Давайте рассмотрим пример:

import React, { useState, useRef, useEffect } from 'react';

function IntervalCounter() {
const [count, setCount] = useState(0);
const intervalRef = useRef();

useEffect(() => {
intervalRef.current = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);

return () => clearInterval(intervalRef.current);
}, []);

return <div>Счетчик: {count}</div>;
}

В этом примере мы используем useRef для хранения ID интервала, возвращаемого setInterval. Это позволяет нам清除 интервал в функции清理ки нашего hook useEffect, предотвращая утечки памяти.

Заключение

И вот оно, ребята! Мы отправились в путешествие по стране useRef, исследуя его сигнатуру, как его применять и некоторые распространенные сценарии использования. Помните, useRef – это как верный напарник в ваших приключениях с React – всегда рядом, когда вам нужно отслеживать что-то, не вызывая перерисовку.

Вот быстрый обзор методов, которые мы рассмотрели:

Метод	Описание
useRef(initialValue)	Создает ref объект с предоставленным начальным значением
ref.current	Доступ к текущему значению ref
<element ref={refObject}>	Привязка ref к DOM элементу

Пока вы продолжаете свое путешествие с React, вы найдете множество других творческих способов использования useRef. Это мощный инструмент, который, при правильном использовании, может решить многие сложные проблемы в разработке React.

Помните, ключ к maîtriser React (или любую концепцию программирования) – это практика. Так что вперед, попробуйте эти примеры, экспериментируйте со своими идеями и не бойтесь犯错误. Именно так мы все учимся и растем как разработчики.

Счастливого кодирования, и пусть ref будут с вами!

Credits: Image by storyset