Что такое refs и как они используются?

Refs в React предоставляют способ получения доступа к DOM-элементам или экземплярам классовых компонентов. Они создаются с помощью React.createRef() или хуком useRef() в функциональных компонентах.

Пример использования refs с классовым компонентом:

class MyComponent extends React.Component {
 	constructor(props) {
   		super(props);
   		this.inputRef = React.createRef();
 	}

 	focusInput = () => {
   		this.inputRef.current.focus();
 	};

 	render() {
   		return (
     			<div>
       				<input ref={this.inputRef} type="text" />
       				<button onClick={this.focusInput}>Focus Input</button>
     			</div>
   		);
 	}
}

В этом примере inputRef используется для получения доступа к инпуту и фокусировки на нем при нажатии на кнопку.

В функциональных компонентах это делается с помощью useRef:

import React, { useRef } from 'react';

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

 	const focusInput = () => {
   		inputRef.current.focus();
 	};

 	return (
   		<div>
     			<input ref={inputRef} type="text" />
     			<button onClick={focusInput}>Focus Input</button>
   		</div>
	 );
}

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