React Ref: работа с ссылками в React.js

React ref - это механизм, который позволяет нам получать прямой доступ к DOM-элементам или компонентам React внутри нашего приложения. Он является одним из основных инструментов для работы с DOM-узлами в React.

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

При использовании ref мы можем получить ссылку на DOM-элемент или компонент React, чтобы взаимодействовать с ними. Обычно ref используется таким образом, что мы определяем его внутри компонента и затем можем получить доступ к этому компоненту или DOM-узлу используя this.refName.current, где refName - это имя, которое мы присваиваем рефу.

Давайте посмотрим на примеры кода, чтобы лучше понять, как работает React ref.

DOM-элементы:

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

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

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <button onClick={() => inputRef.current.value = ""}>
        Очистить поле ввода
      </button>
    </div>
  );
};

export default MyComponent;

В этом примере мы создаем реф inputRef и присваиваем его свойству ref для input элемента. Мы используем useEffect для вызова метода focus нашего рефа после первого рендера компонента, чтобы установить фокус внутри input. Мы также используем реф для установки пустого значения в поле ввода, когда нажимаем на кнопку "Очистить поле ввода".

Компоненты React:

import React, { useRef } from "react";

const MyComponent = () => {
  const childRef = useRef(null);

  const handleClick = () => {
    childRef.current.methodName();
  };

  return (
    <div>
      <ChildComponent ref={childRef} />
      <button onClick={handleClick}>
        Вызвать метод компонента ChildComponent
      </button>
    </div>
  );
};

const ChildComponent = React.forwardRef((props, ref) => {
  const methodName = () => {
    console.log("Вызван метод ChildComponent");
  };

  React.useImperativeHandle(ref, () => ({
    methodName
  }));

  return <div>Child Component</div>;
});

export default MyComponent;

В этом примере мы создаем реф childRef и присваиваем его свойству ref для компонента ChildComponent. Мы затем создаем метод methodName внутри ChildComponent, который просто выводит сообщение в консоль. Далее мы используем React.forwardRef, чтобы передать реф в компонент ChildComponent. Затем мы используем React.useImperativeHandle, чтобы сообщить React, какие методы должны быть видимы через реф. Теперь мы можем вызывать этот метод, используя childRef.

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