Изучение хука useRef в React: методы и примеры

Хук

в библиотеке React, который позволяет создавать изменяемую ссылку на значение или элемент DOM внутри функционального компонента.

Вот несколько методов, связанных с useRefв React:

  1. Создание ссылки:

    import React, { useRef } from 'react';
    const MyComponent = () => {
     const myRef = useRef();
     // ...
    };
  2. Доступ к значению Ref:

    const MyComponent = () => {
     const myRef = useRef();
     // Access the current value
     console.log(myRef.current);
     // ...
    };
  3. Установка значения Ref:

    const MyComponent = () => {
     const myRef = useRef();
     // Set the value
     myRef.current = 'Hello, useRef!';
     // ...
    };
  4. Ссылки и элементы DOM:

    const MyComponent = () => {
     const inputRef = useRef();
    
     const handleClick = () => {
       inputRef.current.focus(); // Focus the input element
     };
    
     return (
       <div>
         <input ref={inputRef} type="text" />
         <button onClick={handleClick}>Focus input</button>
       </div>
     );
    };

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