В этой статье мы углубимся в мир React и TypeScript, уделив особое внимание хуку useRef. useRef— мощный инструмент, который позволяет нам поддерживать изменяемые значения при различных рендерингах в функциональном компоненте. Мы рассмотрим различные методы использования useRefс TypeScript, сопровождаемые примерами кода, которые помогут вам понять и эффективно использовать этот крючок в своих проектах.

Метод 1: базовое использование
Наиболее распространенным вариантом использования useRefявляется доступ к элементам DOM и их изменение. Давайте посмотрим на простой пример:

import React, { useRef } from 'react';
const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };
  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

В этом примере мы создаем ссылку, используя useRef, и присваиваем ее переменной inputRef. Обращаясь к свойству currentссылки, мы можем взаимодействовать с элементом ввода, например фокусировать его при нажатии кнопки.

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

import React, { useRef, useEffect } from 'react';
const MyComponent: React.FC = () => {
  const countRef = useRef<number>(0);
  useEffect(() => {
    countRef.current += 1;
  });
  return <div>Render count: {countRef.current}</div>;
};

В этом примере мы инициализируем ссылку значением 0. Внутри хука useEffectзначение ссылки увеличивается каждый раз при рендеринге компонента. Это позволяет нам отслеживать количество рендерингов компонента.

Метод 3: сохранение предыдущих значений
useRefможно использовать для хранения и доступа к предыдущим значениям состояния или свойства. Вот пример:

import React, { useRef, useEffect } from 'react';
interface Props {
  value: string;
}
const MyComponent: React.FC<Props> = ({ value }) => {
  const previousValueRef = useRef<string>('');
  useEffect(() => {
    previousValueRef.current = value;
  }, [value]);
  return (
    <div>
      Previous value: {previousValueRef.current}
    </div>
  );
};

В этом примере мы создаем ссылку с именем previousValueRefи инициализируем ее пустой строкой. Всякий раз, когда свойство valueизменяется, мы обновляем ссылку новым значением. Это позволяет нам сравнивать текущие и предыдущие значения свойства внутри компонента.

В этой статье мы рассмотрели различные методы использования useRefв React с TypeScript. Мы рассмотрели базовое использование для взаимодействия с элементами DOM, сохранения значений при рендеринге и хранения предыдущих значений состояния или свойств. Используя useRef, вы можете повысить функциональность и производительность своих приложений React. Поэкспериментируйте с этими примерами и адаптируйте их к своим конкретным случаям использования, чтобы раскрыть весь потенциал useRefв своих проектах.