Useref: использование useRef в React

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

Один из наиболее частых случаев использования useRef - управление фокусом на элементе. Когда компонент монтируется, мы можем использовать useRef, чтобы получить ссылку на DOM-элемент, и затем задать его в качестве активного элемента. Таким образом, мы можем установить фокус на этом элементе при загрузке страницы или после определенного действия пользователя.

Вот пример кода, иллюстрирующий использование useRef для управления фокусом:

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

    const App = () => {
      const inputRef = useRef(null);
      

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

      return (
        <div>
          <input ref={inputRef} type="text" />
          <button onClick={() => inputRef.current.focus()}>Нажми, чтобы задать фокус</button>
        </div>
      );
    };
    

    export default App;

В этом примере мы используем useRef, чтобы создать ссылку с именем inputRef. Затем мы устанавливаем это значение в качестве атрибута ref для input элемента. В useEffect мы задаем фокус на этом элементе при загрузке страницы благодаря вызову метода focus() у inputRef.current. Также у нас есть кнопка, при нажатии которой также будет установлен фокус на input элементе.

Еще одна область применения useRef - сохранение некоторого предыдущего значения переменной между рендерами компонента. К примеру, мы можем сохранить предыдущее значение счетчика, чтобы отображать информацию о его изменении.

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

    const Counter = () => {
      const [count, setCount] = useState(0);
      const prevCountRef = useRef();
      

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

      const prevCount = prevCountRef.current;
      

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

    export default Counter;

В этом примере мы используем useRef, чтобы сохранить ссылку на предыдущее значение счетчика. В useEffect мы просто обновляем значение предыдущего счетчика при каждом изменении значения count. Затем мы получаем это значение из prevCountRef.current и отображаем его на странице. Таким образом, каждый раз, когда мы увеличиваем счетчик, мы также можем увидеть его предыдущее значение.

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

Useref: использование useRef в React

Похожие вопросы на: "useref "