Для чего использует ref?

Question

В React ref используется для получения прямого доступа к DOM-элементам или управления ими, а также для хранения данных, которые не влияют на перерисовку компонента. Например, с помощью ref можно фокусировать элементы ввода, отслеживать состояние анимации или сохранять значения между рендерами без их обновления.import React, { useRef } from "react"; function App() { const inputRef = useRef(null); const focusInput = () => { inputRef.current.focus(); }; return (

); }

YeaHub · Accepted Answer

ref (сокращение от reference) — это способ работы с элементами DOM или сохранения значений между рендерами без их участия в процессе обновления интерфейса. В React ref создаётся с помощью функции useRef или компонента React.createRef.Когда использовать ref?Доступ к DOM-элементамКогда нужно управлять DOM-элементами напрямую, например, устанавливать фокус, прокручивать элементы или изменять их размеры.Хранение изменяемых данныхЕсли нужно сохранить значение, которое не должно вызывать повторный рендер (например, идентификаторы таймеров).Интеграция с библиотекамиКогда React-компонент взаимодействует с библиотеками, которые требуют прямого доступа к DOM (например, анимации с помощью сторонних библиотек).Пример использования для управления DOMimport React, { useRef } from "react"; function App() { const divRef = useRef(null); const highlight = () => { divRef.current.style.backgroundColor = "yellow"; }; return (

Это элемент

); }Пример для хранения изменяемого значенияimport React, { useRef, useState } from "react"; function Counter() { const countRef = useRef(0); const [renderCount, setRenderCount] = useState(0); const increment = () => { countRef.current += 1; // Изменение значения без рендера console.log("Текущее значение:", countRef.current); }; const reRender = () => setRenderCount((prev) => prev + 1); return (

); }Пример интеграции с библиотекойimport React, { useRef, useEffect } from "react"; import Chart from "chart.js/auto"; function ChartComponent() { const canvasRef = useRef(null); useEffect(() => { new Chart(canvasRef.current, { type: "bar", data: { labels: ["A", "B", "C"], datasets: [{ label: "Данные", data: [10, 20, 30] }], }, }); }, []); return

; }Особенности использования refНе изменяет поток данных ReactИспользование ref обходит механизм React, так как оно работает напрямую с DOM.Изменение через currentЗначение ref хранится в объекте ref.current. Это значение можно изменять, не вызывая повторного рендера. Поддержка классовых компонентовДля классовых компонентов используется React.createRef для создания рефа:class MyComponent extends React.Component { constructor(props) { super(props); this.myRef = React.createRef(); } componentDidMount() { console.log(this.myRef.current); } render() { return

Привет!

; } }Когда не стоит использовать ref?Если задачу можно решить через стейт или пропсы.Для управления данными, которые должны вызывать рендер.Если прямое взаимодействие с DOM не требуется.ref — инструмент для решения задач, связанных с DOM или сохранением значений между рендерами. Однако его использование должно быть оправданным, чтобы не усложнять архитектуру приложения.