React createRef: вичерпний посібник із прямої взаємодії з компонентами та DOM-елементами

У широкому та часто складному ландшафті сучасної веб-розробки React став домінантною силою, яку цінують насамперед за її декларативний підхід до створення користувацьких інтерфейсів. Ця парадигма заохочує розробників описувати, яким має бути їхній UI на основі даних, а не вказувати, як досягти цього візуального стану через прямі маніпуляції з DOM. Ця абстракція значно спростила розробку UI, зробивши додатки більш передбачуваними, легшими для розуміння та високопродуктивними.

Однак реальний світ веб-додатків рідко буває повністю декларативним. Існують специфічні, але поширені сценарії, коли пряма взаємодія з базовим DOM (Document Object Model) елементом або екземпляром класового компонента стає не просто зручною, а абсолютно необхідною. Ці «аварійні виходи» з декларативного потоку React відомі як рефи. Серед різноманітних механізмів, які React пропонує для створення та керування цими посиланнями, React.createRef() є фундаментальним API, особливо актуальним для розробників, які працюють із класовими компонентами.

Цей вичерпний посібник має на меті стати вашим головним ресурсом для розуміння, впровадження та освоєння React.createRef(). Ми розпочнемо детальне дослідження його призначення, заглибимося в синтаксис та практичні застосування, розглянемо найкращі практики та відрізнимо його від інших стратегій управління рефами. Незалежно від того, чи є ви досвідченим розробником React, який прагне зміцнити своє розуміння імперативних взаємодій, чи новачком, який хоче осягнути цю ключову концепцію, ця стаття надасть вам знання для створення більш надійних, продуктивних та глобально доступних додатків React, які витончено справляються зі складними вимогами сучасного користувацького досвіду.

Розуміння рефів у React: міст між декларативним та імперативним світами

За своєю суттю, React підтримує декларативний стиль програмування. Ви визначаєте свої компоненти, їхній стан та спосіб їх рендерингу. Потім React бере на себе ефективне оновлення фактичного DOM браузера, щоб відобразити оголошений вами UI. Цей шар абстракції є надзвичайно потужним, захищаючи розробників від складнощів та пасток продуктивності прямого маніпулювання DOM. Саме тому додатки на React часто здаються такими плавними та чутливими.

Односпрямований потік даних та його обмеження

Архітектурна сила React полягає в його односпрямованому потоці даних. Дані передбачувано передаються вниз від батьківських компонентів до дочірніх через пропси, а зміни стану всередині компонента викликають повторний рендеринг, що поширюється на його піддерево. Ця модель сприяє передбачуваності та значно полегшує налагодження, оскільки ви завжди знаєте, звідки походять дані та як вони впливають на UI. Однак не кожна взаємодія ідеально вписується в цей потік даних зверху вниз.

Розглянемо такі сценарії:

• Програмне фокусування на полі введення, коли користувач переходить до форми.
• Виклик методів play() або pause() на елементі <video>.
• Вимірювання точних розмірів у пікселях відрендереного <div> для динамічного коригування макета.
• Інтеграція складної сторонньої JavaScript-бібліотеки (наприклад, бібліотеки для створення діаграм, як D3.js, або інструменту візуалізації карт), яка очікує прямого доступу до DOM-контейнера.

Ці дії є за своєю суттю імперативними – вони передбачають пряму команду елементу щось зробити, а не просто оголошення його бажаного стану. Хоча декларативна модель React часто може абстрагувати багато імперативних деталей, вона не усуває потребу в них повністю. Саме тут у гру вступають рефи, надаючи контрольований «аварійний вихід» для виконання цих прямих взаємодій.

Коли використовувати рефи: навігація між імперативною та декларативною взаємодією

Найважливіший принцип при роботі з рефами — використовуйте їх помірковано і лише за абсолютної необхідності. Якщо завдання можна виконати за допомогою стандартних декларативних механізмів React (стан і пропси), це завжди має бути вашим пріоритетним підходом. Надмірне покладання на рефи може призвести до коду, який важче розуміти, підтримувати та налагоджувати, підриваючи самі переваги, які надає React.

Однак для ситуацій, які дійсно вимагають прямого доступу до вузла DOM або екземпляра компонента, рефи є правильним і передбаченим рішенням. Ось більш детальний опис відповідних випадків використання:

• Керування фокусом, виділенням тексту та відтворенням медіа: Це класичні приклади, де потрібно імперативно взаємодіяти з елементами. Подумайте про автоматичне фокусування на рядку пошуку при завантаженні сторінки, виділення всього тексту в полі введення або керування відтворенням аудіо- чи відеоплеєра. Ці дії зазвичай викликаються подіями користувача або методами життєвого циклу компонента, а не просто зміною пропсів чи стану.
• Запуск імперативних анімацій: Хоча багато анімацій можна реалізувати декларативно за допомогою CSS-переходів/анімацій або бібліотек анімації для React, деякі складні, високопродуктивні анімації, особливо ті, що використовують HTML Canvas API, WebGL, або вимагають тонкого контролю над властивостями елементів, якими краще керувати поза циклом рендерингу React, можуть потребувати рефів.
• Інтеграція зі сторонніми DOM-бібліотеками: Багато перевірених часом JavaScript-бібліотек (наприклад, D3.js, Leaflet для карт, різноманітні застарілі UI-тулкіти) розроблені для прямого маніпулювання конкретними DOM-елементами. Рефи надають необхідний міст, дозволяючи React відрендерити елемент-контейнер, а потім надаючи сторонній бібліотеці доступ до цього контейнера для її власної імперативної логіки рендерингу.
• Вимірювання розмірів або позиції елемента: Для реалізації розширених макетів, віртуалізації або кастомної поведінки прокрутки часто потрібна точна інформація про розмір елемента, його положення відносно вікна перегляду або висоту прокрутки. API, такі як getBoundingClientRect(), доступні лише на реальних вузлах DOM, що робить рефи незамінними для таких обчислень.

І навпаки, вам слід уникати використання рефів для завдань, які можна виконати декларативно. Це включає:

• Зміну стилю компонента (використовуйте стан для умовного стилю).
• Зміну текстового вмісту елемента (передавайте як пропс або оновлюйте стан).
• Складну комунікацію між компонентами (пропси та колбеки, як правило, кращі).
• Будь-який сценарій, де ви намагаєтеся відтворити функціональність управління станом.

Заглиблення в React.createRef(): сучасний підхід для класових компонентів

React.createRef() було представлено в React 16.3, що забезпечило більш явний і чистий спосіб керування рефами порівняно зі старими методами, такими як рядкові рефи (зараз застарілі) та колбек-рефи (все ще дійсні, але часто більш громіздкі). Він розроблений як основний механізм створення рефів для класових компонентів, пропонуючи об'єктно-орієнтований API, який природно вписується в структуру класу.

Синтаксис та базове використання: трикроковий процес

Робочий процес використання createRef() є простим і включає три ключові кроки:

1. Створення об'єкта рефа: У конструкторі вашого класового компонента ініціалізуйте екземпляр рефа, викликавши React.createRef() і присвоївши його повернуте значення властивості екземпляра (наприклад, this.myRef).
2. Прикріплення рефа: У методі render вашого компонента передайте створений об'єкт рефа атрибуту ref елемента React (або HTML-елемента, або класового компонента), на який ви хочете посилатися.
3. Доступ до цілі: Як тільки компонент буде змонтовано, посилання на вузол DOM або екземпляр компонента буде доступне через властивість .current вашого об'єкта рефа (наприклад, this.myRef.current).

import React from 'react';

class FocusInputOnMount extends React.Component {
constructor(props) {
super(props);

this.inputElementRef = React.createRef(); // Крок 1: Створіть об'єкт рефа в конструкторі
console.log('Constructor: Ref current value is initially:', this.inputElementRef.current); // null
}

componentDidMount() {

if (this.inputElementRef.current) {
this.inputElementRef.current.focus();
console.log('ComponentDidMount: Input focused. Current value:', this.inputElementRef.current.value);
}
}

handleButtonClick = () => {

if (this.inputElementRef.current) {
alert(`Input value: ${this.inputElementRef.current.value}`);
}
};

render() {
console.log('Render: Ref current value is:', this.inputElementRef.current); // Все ще null під час початкового рендерингу
return (
<div style={{ padding: '20px', border: '1px solid #ccc', borderRadius: '8px' }}>
<h3>Поле введення з авто-фокусом</h3>
<label htmlFor="focusInput">Введіть ваше ім'я:</label><br />
<input
id="focusInput"
type="text"
ref={this.inputElementRef} // Крок 2: Прикріпіть реф до елемента <input>
placeholder="Ваше ім'я тут..."
style={{ margin: '10px 0', padding: '8px', borderRadius: '4px', border: '1px solid #ddd' }}
/><br />
<button
onClick={this.handleButtonClick}
style={{ padding: '10px 15px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
Показати значення
</button>
<p><em>Це поле введення автоматично отримає фокус, коли компонент завантажиться.</em></p>
</div>
);
}
}

У цьому прикладі this.inputElementRef — це об'єкт, яким React буде керувати внутрішньо. Коли елемент <input> відрендериться і буде змонтований у DOM, React присвоїть цей фактичний вузол DOM властивості this.inputElementRef.current. Метод життєвого циклу componentDidMount є ідеальним місцем для взаємодії з рефами, оскільки він гарантує, що компонент та його дочірні елементи були відрендерені в DOM, і що властивість .current доступна та заповнена.

Прикріплення рефа до DOM-елемента: прямий доступ до DOM

Коли ви прикріплюєте реф до стандартного HTML-елемента (наприклад, <div>, <p>, <button>, <img>), властивість .current вашого об'єкта рефа буде містити фактичний базовий DOM-елемент. Це дає вам необмежений доступ до всіх стандартних браузерних DOM API, дозволяючи виконувати дії, які зазвичай виходять за межі декларативного контролю React. Це особливо корисно для глобальних додатків, де точний макет, прокрутка або керування фокусом можуть бути критично важливими в різноманітних користувацьких середовищах та типах пристроїв.

import React from 'react';

class ScrollToElementExample extends React.Component {
constructor(props) {
super(props);
this.targetDivRef = React.createRef();
this.state = { showScrollButton: false };
}

componentDidMount() {
// Показувати кнопку прокрутки, лише якщо є достатньо контенту для прокручування
// Ця перевірка також гарантує, що реф уже є актуальним.
if (this.targetDivRef.current && window.innerHeight < document.body.scrollHeight) {
this.setState({ showScrollButton: true });
}
}

handleScrollToTarget = () => {
if (this.targetDivRef.current) {
// Використання scrollIntoView для плавної прокрутки, що широко підтримується у всіх браузерах глобально.
this.targetDivRef.current.scrollIntoView({
behavior: 'smooth', // Анімує прокрутку для кращого користувацького досвіду
block: 'start' // Вирівнює верхню частину елемента по верхній частині вікна перегляду
});
console.log('Scrolled to target div!');
} else {
console.warn('Target div not yet available for scrolling.');
}
};

render() {
return (
<div style={{ padding: '15px' }}>
<h2>Прокрутка до конкретного елемента за допомогою рефа</h2>
<p>Цей приклад демонструє, як програмно прокрутити до DOM-елемента, що знаходиться за межами екрана.</p>

{this.state.showScrollButton && (
<button
onClick={this.handleScrollToTarget}
style={{ marginBottom: '20px', padding: '10px 20px', background: '#28a745', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
Прокрутити до цільової області
</button>
)}

<div style={{ height: '1500px', background: '#f8f9fa', padding: '20px', marginBottom: '20px', border: '1px dashed #6c757d' }}>
<p>Контент-заповнювач для створення вертикального простору для прокрутки.</p>
<p>Уявіть собі довгі статті, складні форми або деталізовані панелі інструментів, які вимагають від користувачів навігації по великому обсягу контенту. Програмна прокрутка гарантує, що користувачі можуть швидко дістатися до відповідних розділів без ручних зусиль, покращуючи доступність та потік користувача на всіх пристроях та розмірах екранів.</p>
<p>Ця техніка особливо корисна в багатосторінкових формах, покрокових майстрах або односторінкових додатках з глибокою навігацією.</p>
</div>

<div
ref={this.targetDivRef} // Прикріпіть реф тут
style={{
minHeight: '300px',
background: '#e9ecef',
padding: '30px',
border: '2px solid #007bff',
borderRadius: '10px',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center'
}}
>
<h3>Ви досягли цільової області!</h3>
<p>Це розділ, до якого ми прокрутили програмно.</p>
<p>Можливість точно контролювати поведінку прокрутки є вирішальною для покращення користувацького досвіду, особливо на мобільних пристроях, де простір на екрані обмежений, а точна навігація є першочерговою.</p>
</div>
</div>
);
}
}

Цей приклад чудово ілюструє, як createRef надає контроль над взаємодіями на рівні браузера. Такі можливості програмної прокрутки є критично важливими в багатьох додатках, від навігації по довгій документації до ведення користувачів через складні робочі процеси. Опція behavior: 'smooth' в scrollIntoView забезпечує приємний, анімований перехід, покращуючи користувацький досвід універсально.

Прикріплення рефа до класового компонента: взаємодія з екземплярами

Крім нативних DOM-елементів, ви також можете прикріпити реф до екземпляра класового компонента. Коли ви це робите, властивість .current вашого об'єкта рефа буде містити сам інстанційований класовий компонент. Це дозволяє батьківському компоненту безпосередньо викликати методи, визначені в дочірньому класовому компоненті, або отримувати доступ до його властивостей екземпляра. Хоча це потужна можливість, її слід використовувати з великою обережністю, оскільки вона дозволяє порушити традиційний односпрямований потік даних, що потенційно може призвести до менш передбачуваної поведінки додатка.

import React from 'react';

// Дочірній класовий компонент
class DialogBox extends React.Component {
constructor(props) {
super(props);
this.state = { isOpen: false, message: '' };
}

// Метод, доступний батьківському компоненту через реф
open(message) {
this.setState({ isOpen: true, message });
}

close = () => {
this.setState({ isOpen: false, message: '' });
};

render() {
if (!this.state.isOpen) return null;

return (
<div style={{
position: 'fixed', top: '50%', left: '50%', transform: 'translate(-50%, -50%)',
padding: '25px 35px', background: 'white', border: '1px solid #ddd', borderRadius: '8px',
boxShadow: '0 5px 15px rgba(0,0,0,0.2)', zIndex: 1000, maxWidth: '400px', width: '90%', textAlign: 'center'
}}>
<h4>Повідомлення від батьківського компонента</h4>
<p>{this.state.message}</p>
<button
onClick={this.close}
style={{ marginTop: '15px', padding: '8px 15px', background: '#dc3545', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}
>
Закрити
</button>
</div>
);
}
}

// Батьківський класовий компонент
class AppWithDialog extends React.Component {
constructor(props) {
super(props);
this.dialogRef = React.createRef();
}

handleOpenDialog = () => {
if (this.dialogRef.current) {
// Отримайте доступ до екземпляра дочірнього компонента та викличте його метод 'open'
this.dialogRef.current.open('Привіт від батьківського компонента! Це діалогове вікно було відкрито імперативно.');
}
};

render() {
return (
<div style={{ padding: '20px', textAlign: 'center' }}>
<h2>Комунікація батько-дитина через реф</h2>
<p>Це демонструє, як батьківський компонент може імперативно керувати методом свого дочірнього класового компонента.</p>
<button
onClick={this.handleOpenDialog}
style={{ padding: '12px 25px', background: '#007bff', color: 'white', border: 'none', borderRadius: '6px', cursor: 'pointer', fontSize: '1.1em' }}
>
Відкрити імперативне діалогове вікно
</button>
<DialogBox ref={this.dialogRef} /> // Прикріпіть реф до екземпляра класового компонента
</div>
);
}
}

Тут AppWithDialog може безпосередньо викликати метод open компонента DialogBox через його реф. Цей патерн може бути корисним для запуску дій, таких як показ модального вікна, скидання форми або програмне керування зовнішніми елементами UI, інкапсульованими в дочірньому компоненті. Однак, зазвичай, рекомендується надавати перевагу комунікації на основі пропсів для більшості сценаріїв, передаючи дані та колбеки вниз від батька до дитини для підтримки чіткого та передбачуваного потоку даних. Звертайтеся до рефів для методів дочірніх компонентів лише тоді, коли ці дії є дійсно імперативними і не вписуються в типовий потік пропсів/стану.

Прикріплення рефа до функціонального компонента (важлива відмінність)

Поширеною помилкою і важливим моментом для розрізнення є те, що ви не можете безпосередньо прикріпити реф за допомогою createRef() до функціонального компонента. Функціональні компоненти за своєю природою не мають екземплярів так само, як класові компоненти. Якщо ви спробуєте призначити реф безпосередньо функціональному компоненту (наприклад, <MyFunctionalComponent ref={this.myRef} />), React видасть попередження в режимі розробки, оскільки немає екземпляра компонента для присвоєння .current.

Якщо ваша мета — дозволити батьківському компоненту (який може бути класовим компонентом, що використовує createRef, або функціональним компонентом, що використовує useRef) отримати доступ до DOM-елемента, відрендереного всередині функціонального дочірнього компонента, ви повинні використовувати React.forwardRef. Цей компонент вищого порядку дозволяє функціональним компонентам надавати реф на конкретний вузол DOM або імперативний хендл всередині себе.

Альтернативно, якщо ви працюєте всередині функціонального компонента і вам потрібно створити та керувати рефом, відповідним механізмом є хук useRef, який буде коротко розглянуто в наступному розділі порівняння. Важливо пам'ятати, що createRef фундаментально пов'язаний з класовими компонентами та їхньою природою, заснованою на екземплярах.

Доступ до вузла DOM або екземпляра компонента: пояснення властивості `.current`

Ядро взаємодії з рефами обертається навколо властивості .current об'єкта рефа, створеного за допомогою React.createRef(). Розуміння його життєвого циклу та того, що він може містити, є першочерговим для ефективного управління рефами.

Властивість `.current`: ваш шлях до імперативного контролю

Властивість .current — це змінний об'єкт, яким керує React. Вона служить прямим зв'язком з елементом або екземпляром компонента, на який посилається реф. Її значення змінюється протягом життєвого циклу компонента:

• Ініціалізація: Коли ви вперше викликаєте React.createRef() в конструкторі, створюється об'єкт рефа, і його властивість .current ініціалізується значенням null. Це відбувається тому, що на цьому етапі компонент ще не відрендерився, і не існує DOM-елемента або екземпляра компонента, на який міг би вказувати реф.
• Монтування: Як тільки компонент рендериться в DOM і створюється елемент з атрибутом ref, React присвоює фактичний вузол DOM або екземпляр класового компонента властивості .current вашого об'єкта рефа. Це зазвичай відбувається відразу після завершення методу render і перед викликом componentDidMount. Тому componentDidMount є найбезпечнішим і найпоширенішим місцем для доступу та взаємодії з .current.
• Демонтування: Коли компонент демонтується з DOM, React автоматично скидає властивість .current назад до null. Це має вирішальне значення для запобігання витокам пам'яті та гарантії того, що ваш додаток не буде утримувати посилання на елементи, яких більше не існує в DOM.
• Оновлення: У рідкісних випадках, коли атрибут ref змінюється на елементі під час оновлення, властивість current старого рефа буде встановлена на null перед тим, як буде встановлена властивість current нового рефа. Ця поведінка менш поширена, але її важливо зазначити для складних динамічних призначень рефів.

import React from 'react';

class RefLifecycleLogger extends React.Component {
constructor(props) {
super(props);
this.myDivRef = React.createRef();
console.log('1. Constructor: this.myDivRef.current is', this.myDivRef.current); // null
}

componentDidMount() {
console.log('3. componentDidMount: this.myDivRef.current is', this.myDivRef.current); // Фактичний DOM-елемент
if (this.myDivRef.current) {
this.myDivRef.current.style.backgroundColor = '#d4edda'; // Імперативне стилювання для демонстрації
this.myDivRef.current.innerText += ' - Реф активний!';
}
}

componentDidUpdate(prevProps, prevState) {
console.log('4. componentDidUpdate: this.myDivRef.current is', this.myDivRef.current); // Фактичний DOM-елемент (після оновлень)
}

componentWillUnmount() {
console.log('5. componentWillUnmount: this.myDivRef.current is', this.myDivRef.current); // Фактичний DOM-елемент (безпосередньо перед обнуленням)
// На цьому етапі ви можете виконати очищення, якщо необхідно
}

render() {
// Під час початкового рендерингу this.myDivRef.current все ще null, оскільки DOM ще не створено.
// Під час наступних рендерингів (після монтування) він буде містити елемент.
console.log('2. Render: this.myDivRef.current is', this.myDivRef.current);
return (
<div
ref={this.myDivRef}
style={{ padding: '20px', border: '1px solid #28a745', margin: '20px', minHeight: '80px', display: 'flex', alignItems: 'center' }}
>
<p>Це div, до якого прикріплено реф.</p>
</div>
);
}
}

Спостереження за виводом консолі для RefLifecycleLogger дає чітке уявлення про те, коли this.myDivRef.current стає доступним. Важливо завжди перевіряти, чи this.myDivRef.current не є null, перш ніж намагатися взаємодіяти з ним, особливо в методах, які можуть виконуватися до монтування або після демонтування.

Що може містити `.current`? Дослідження вмісту вашого рефа

Тип значення, яке містить current, залежить від того, до чого ви прикріплюєте реф:

• При прикріпленні до HTML-елемента (наприклад, <div>, <input>): Властивість .current міститиме фактичний базовий DOM-елемент. Це нативний об'єкт JavaScript, що надає доступ до повного спектру його DOM API. Наприклад, якщо ви прикріпите реф до <input type="text">, .current буде об'єктом HTMLInputElement, що дозволить вам викликати методи, такі як .focus(), читати властивості, як .value, або змінювати атрибути, як .placeholder. Це найпоширеніший випадок використання рефів.

  this.inputRef.current.focus();
  this.videoRef.current.play();
  const { width, height } = this.divRef.current.getBoundingClientRect();

• При прикріпленні до класового компонента (наприклад, <MyClassComponent />): Властивість .current міститиме екземпляр цього класового компонента. Це означає, що ви можете безпосередньо викликати методи, визначені в цьому дочірньому компоненті (наприклад, childRef.current.someMethod()) або навіть отримувати доступ до його стану чи пропсів (хоча прямий доступ до стану/пропсів дочірнього компонента через реф, як правило, не рекомендується на користь оновлень стану та пропсів). Ця можливість є потужною для запуску специфічної поведінки в дочірніх компонентах, яка не вписується в стандартну модель взаємодії на основі пропсів.

  this.childComponentRef.current.resetForm();
  // Рідко, але можливо: console.log(this.childComponentRef.current.state.someValue);

• При прикріпленні до функціонального компонента (через forwardRef): Як зазначалося раніше, рефи не можна прикріплювати безпосередньо до функціональних компонентів. Однак, якщо функціональний компонент обгорнутий у React.forwardRef, то властивість .current буде містити те значення, яке функціональний компонент явно експонує через перенаправлений реф. Зазвичай це DOM-елемент у функціональному компоненті або об'єкт, що містить імперативні методи (з використанням хука useImperativeHandle у поєднанні з forwardRef).

  // У батьківському компоненті myForwardedRef.current буде експонованим вузлом DOM або об'єктом
  this.myForwardedRef.current.focus();
  this.myForwardedRef.current.customResetMethod();

Практичні випадки використання `createRef` в дії

Щоб по-справжньому зрозуміти корисність React.createRef(), давайте розглянемо більш детальні, глобально актуальні сценарії, де він виявляється незамінним, виходячи за рамки простого управління фокусом.

1. Керування фокусом, виділенням тексту або відтворенням медіа в різних культурах

Це яскраві приклади імперативних взаємодій з UI. Уявіть собі багатоетапну форму, розроблену для глобальної аудиторії. Після того, як користувач заповнив один розділ, ви можете захотіти автоматично перемістити фокус на перше поле введення наступного розділу, незалежно від мови або напрямку тексту за замовчуванням (зліва-направо або справа-наліво). Рефи надають необхідний контроль.

import React from 'react';

class DynamicFocusForm extends React.Component {
constructor(props) {
super(props);
this.firstNameRef = React.createRef();
this.lastNameRef = React.createRef();
this.emailRef = React.createRef();
this.state = { currentStep: 1 };
}

componentDidMount() {
// Фокус на першому полі введення при монтуванні компонента
this.firstNameRef.current.focus();
}

handleNextStep = (nextRef) => {
this.setState(prevState => ({ currentStep: prevState.currentStep + 1 }), () => {
// Після оновлення стану та повторного рендерингу компонента, фокусуємося на наступному полі введення
if (nextRef.current) {
nextRef.current.focus();
}
});
};

render() {
const { currentStep } = this.state;
const formSectionStyle = { border: '1px solid #0056b3', padding: '20px', margin: '15px 0', borderRadius: '8px', background: '#e7f0fa' };
const inputStyle = { width: '100%', padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px' };
const buttonStyle = { padding: '10px 20px', background: '#007bff', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginTop: '10px' };

return (
<div style={{ maxWidth: '600px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.1)', borderRadius: '10px', background: 'white' }}>
<h2>Багатоетапна форма з фокусом, керованим рефами</h2>
<p>Поточний крок: <strong>{currentStep}</strong></p>

{currentStep === 1 && (
<div style={formSectionStyle}>
<h3>Особисті дані</h3>
<label htmlFor="firstName">Ім'я:</label>
<input id="firstName" type="text" ref={this.firstNameRef} style={inputStyle} placeholder="напр., Іван" />

<label htmlFor="lastName">Прізвище:</label>
<input id="lastName" type="text" ref={this.lastNameRef} style={inputStyle} placeholder="напр., Петренко" />

<button onClick={() => this.handleNextStep(this.emailRef)} style={buttonStyle}>Далі &rarr;</button>
</div>
)}

{currentStep === 2 && (
<div style={formSectionStyle}>
<h3>Контактна інформація</h3>
<label htmlFor="email">Email:</label>
<input id="email" type="email" ref={this.emailRef} style={inputStyle} placeholder="напр., ivan.petrenko@example.com" />

<p>... інші контактні поля ...</p>

<button onClick={() => alert('Форму відправлено!')} style={buttonStyle}>Відправити</button>
</div>
)}

<p><em>Ця взаємодія значно покращує доступність та користувацький досвід, особливо для користувачів, які покладаються на клавіатурну навігацію або допоміжні технології в усьому світі.</em></p>
</div>
);
}
}

Цей приклад демонструє практичну багатоетапну форму, де createRef використовується для програмного керування фокусом. Це забезпечує плавний та доступний шлях користувача, що є критично важливим для додатків, що використовуються в різноманітних мовних та культурних контекстах. Аналогічно, для медіаплеєрів рефи дозволяють створювати власні елементи керування (відтворення, пауза, гучність, перемотка), які безпосередньо взаємодіють з нативними API елементів HTML5 <video> або <audio>, забезпечуючи послідовний досвід незалежно від налаштувань браузера за замовчуванням.

2. Запуск імперативних анімацій та взаємодія з Canvas

Хоча декларативні бібліотеки анімації чудово підходять для багатьох ефектів UI, деякі складні анімації, особливо ті, що використовують HTML5 Canvas API, WebGL, або вимагають тонкого контролю над властивостями елементів, якими краще керувати поза циклом рендерингу React, значно виграють від використання рефів. Наприклад, створення візуалізації даних у реальному часі або гри на елементі Canvas включає малювання безпосередньо на піксельному буфері, що є за своєю суттю імперативним процесом.

import React from 'react';

class CanvasAnimator extends React.Component {
constructor(props) {
super(props);
this.canvasRef = React.createRef();
this.animationFrameId = null;
}

componentDidMount() {
this.startAnimation();
}

componentWillUnmount() {
this.stopAnimation();
}

startAnimation = () => {
const canvas = this.canvasRef.current;
if (!canvas) return;

const ctx = canvas.getContext('2d');
let angle = 0;
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 50;

const animate = () => {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Очистити канвас

// Намалювати квадрат, що обертається
ctx.save();
ctx.translate(centerX, centerY);
ctx.rotate(angle);
ctx.fillStyle = '#6f42c1';
ctx.fillRect(-radius / 2, -radius / 2, radius, radius);
ctx.restore();

angle += 0.05; // Збільшити кут для обертання

this.animationFrameId = requestAnimationFrame(animate);
};

this.animationFrameId = requestAnimationFrame(animate);
};

stopAnimation = () => {
if (this.animationFrameId) {
cancelAnimationFrame(this.animationFrameId);
}
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #ced4da', padding: '20px', borderRadius: '8px', background: '#f8f9fa' }}>
<h3>Імперативна анімація Canvas з createRef</h3>
<p>Ця анімація на канвасі керується безпосередньо за допомогою API браузера через реф.</p>
<canvas ref={this.canvasRef} width="300" height="200" style={{ border: '1px solid #adb5bd', background: 'white' }}>
Ваш браузер не підтримує тег canvas HTML5.
</canvas>
<p><em>Такий прямий контроль є життєво важливим для високопродуктивної графіки, ігор або спеціалізованих візуалізацій даних, що використовуються в різних галузях по всьому світу.</em></p>
</div>
);
}
}

Цей компонент надає елемент canvas і використовує реф для отримання прямого доступу до його 2D-контексту рендерингу. Цикл анімації, що працює на `requestAnimationFrame`, потім імперативно малює та оновлює квадрат, що обертається. Цей патерн є фундаментальним для створення інтерактивних панелей інструментів для даних, онлайн-інструментів для дизайну або навіть казуальних ігор, які вимагають точного, покадрового рендерингу, незалежно від географічного розташування користувача або можливостей пристрою.

3. Інтеграція зі сторонніми DOM-бібліотеками: безшовний міст

Однією з найпереконливіших причин використовувати рефи є інтеграція React із зовнішніми JavaScript-бібліотеками, які безпосередньо маніпулюють DOM. Багато потужних бібліотек, особливо старіші або ті, що зосереджені на конкретних завданнях рендерингу (наприклад, діаграми, карти або редактори форматованого тексту), працюють, приймаючи DOM-елемент як ціль, а потім самостійно керуючи його вмістом. React у своєму декларативному режимі інакше конфліктував би з цими бібліотеками, намагаючись контролювати те саме піддерево DOM. Рефи запобігають цьому конфлікту, надаючи призначений «контейнер» для зовнішньої бібліотеки.

import React from 'react';
import * as d3 from 'd3'; // Припускаючи, що D3.js встановлено та імпортовано

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

// Коли компонент монтується, малюємо діаграму
componentDidMount() {
this.drawChart();
}

// Коли компонент оновлюється (наприклад, змінюються props.data), оновлюємо діаграму
componentDidUpdate(prevProps) {
if (prevProps.data !== this.props.data) {
this.drawChart();
}
}

// Коли компонент демонтується, очищаємо елементи D3, щоб запобігти витокам пам'яті
componentWillUnmount() {
d3.select(this.chartContainerRef.current).selectAll('*').remove();
}

drawChart = () => {
const data = this.props.data || [40, 80, 20, 100, 60, 90]; // Дані за замовчуванням
const node = this.chartContainerRef.current;
if (!node) return; // Переконайтеся, що реф доступний

// Очистити будь-які попередні елементи діаграми, намальовані D3
d3.select(node).selectAll('*').remove();

const margin = { top: 20, right: 20, bottom: 30, left: 40 };
const width = 460 - margin.left - margin.right;
const height = 300 - margin.top - margin.bottom;

const svg = d3.select(node)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);

// Налаштувати шкали
const x = d3.scaleBand()
.range([0, width])
.padding(0.1);

const y = d3.scaleLinear()
.range([height, 0]);

x.domain(data.map((d, i) => i)); // Використовувати індекс як домен для простоти
y.domain([0, d3.max(data)]);

// Додати стовпці
svg.selectAll('.bar')
.data(data)
.enter().append('rect')
.attr('class', 'bar')
.attr('x', (d, i) => x(i))
.attr('width', x.bandwidth())
.attr('y', d => y(d))
.attr('height', d => height - y(d))
.attr('fill', '#17a2b8');

// Додати вісь X
svg.append('g')
.attr('transform', `translate(0,${height})`)
.call(d3.axisBottom(x));

// Додати вісь Y
svg.append('g')
.call(d3.axisLeft(y));
};

render() {
return (
<div style={{ textAlign: 'center', margin: '30px auto', border: '1px solid #00a0b2', padding: '20px', borderRadius: '8px', background: '#e0f7fa' }}>
<h3>Інтеграція діаграми D3.js з React createRef</h3>
<p>Ця візуалізація даних рендериться D3.js всередині контейнера, керованого React.</p>
<div ref={this.chartContainerRef} /> // D3.js буде рендерити в цей div
<p><em>Інтеграція таких спеціалізованих бібліотек є критично важливою для додатків з великим обсягом даних, надаючи потужні аналітичні інструменти користувачам у різних галузях та регіонах.</em></p>
</div>
);
}
}

Цей розширений приклад демонструє інтеграцію стовпчастої діаграми D3.js у класовий компонент React. chartContainerRef надає D3.js конкретний вузол DOM, необхідний для виконання рендерингу. React керує життєвим циклом контейнера <div>, тоді як D3.js керує його внутрішнім вмістом. Методи `componentDidUpdate` та `componentWillUnmount` є життєво важливими для оновлення діаграми при зміні даних та для виконання необхідного очищення, запобігаючи витокам пам'яті та забезпечуючи чутливий досвід. Цей патерн є універсально застосовним, дозволяючи розробникам використовувати найкраще з моделі компонентів React та спеціалізованих, високопродуктивних бібліотек візуалізації для глобальних панелей інструментів та аналітичних платформ.

4. Вимірювання розмірів або позиції елемента для динамічних макетів

Для високодинамічних або адаптивних макетів, або для реалізації таких функцій, як віртуалізовані списки, що рендерять лише видимі елементи, знання точних розмірів та положення елементів є критично важливим. Рефи дозволяють вам отримати доступ до методу getBoundingClientRect(), який надає цю важливу інформацію безпосередньо з DOM.

import React from 'react';

class ElementDimensionLogger extends React.Component {
constructor(props) {
super(props);
this.measurableDivRef = React.createRef();
this.state = {
width: 0,
height: 0,
top: 0,
left: 0,
message: 'Натисніть кнопку для вимірювання!'
};
}

componentDidMount() {
// Початкове вимірювання часто корисне, але може бути викликане й дією користувача
this.measureElement();
// Для динамічних макетів ви можете слухати події зміни розміру вікна
window.addEventListener('resize', this.measureElement);
}

componentWillUnmount() {
window.removeEventListener('resize', this.measureElement);
}

measureElement = () => {
if (this.measurableDivRef.current) {
const rect = this.measurableDivRef.current.getBoundingClientRect();
this.setState({
width: Math.round(rect.width),
height: Math.round(rect.height),
top: Math.round(rect.top),
left: Math.round(rect.left),
message: 'Розміри оновлено.'
});
} else {
this.setState({ message: 'Елемент ще не відрендерено.' });
}
};

render() {
const { width, height, top, left, message } = this.state;
const boxStyle = {
width: '70%',
minHeight: '150px',
border: '3px solid #ffc107',
margin: '25px auto',
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
background: '#fff3cd',
borderRadius: '8px',
textAlign: 'center'
};

return (
<div style={{ maxWidth: '700px', margin: '30px auto', padding: '25px', boxShadow: '0 4px 12px rgba(0,0,0,0.08)', borderRadius: '10px', background: 'white' }}>
<h3>Вимірювання розмірів елемента за допомогою createRef</h3>
<p>Цей приклад динамічно отримує та відображає розмір та положення цільового елемента.</p>
<div ref={this.measurableDivRef} style={boxStyle}>
<p><strong>Я — елемент, який вимірюється.</strong></p>
<p>Змініть розмір вікна браузера, щоб побачити, як змінюються вимірювання при оновленні/ручному запуску.</p>
</div>
<button
onClick={this.measureElement}
style={{ padding: '10px 20px', background: '#6c757d', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer', marginBottom: '15px' }}
>
Виміряти зараз
</button>
<div style={{ background: '#f0f0f0', padding: '15px', borderRadius: '6px' }}>
<p><strong>Актуальні розміри:</strong></p>
<ul style={{ listStyleType: 'none', padding: 0, textAlign: 'left', margin: '0 auto', maxWidth: '300px' }}>
<li>Ширина: <b>{width}px</b></li>
<li>Висота: <b>{height}px</b></li>
<li>Позиція зверху (Viewport): <b>{top}px</b></li>
<li>Позиція зліва (Viewport): <b>{left}px</b></li>
</ul>
<p><em>Точне вимірювання елементів є критично важливим для адаптивних дизайнів та оптимізації продуктивності на різноманітних пристроях по всьому світу.</em></p>
</div>
</div>
);
}
}

Цей компонент використовує createRef для отримання getBoundingClientRect() елемента div, надаючи його розміри та положення в реальному часі. Ця інформація є безцінною для реалізації складних коригувань макета, визначення видимості у віртуалізованому списку прокрутки або навіть для перевірки того, що елементи знаходяться в межах певної області вікна перегляду. Для глобальної аудиторії, де розміри екранів, роздільна здатність та середовища браузерів сильно відрізняються, точний контроль макета на основі фактичних вимірювань DOM є ключовим фактором у забезпеченні послідовного та високоякісного користувацького досвіду.

Найкращі практики та застереження щодо використання `createRef`

Хоча createRef пропонує потужний імперативний контроль, його неправильне використання може призвести до коду, який важко керувати та налагоджувати. Дотримання найкращих практик є важливим для відповідального використання його можливостей.

1. Пріоритет декларативних підходів: золоте правило

Завжди пам'ятайте, що рефи є «аварійним виходом», а не основним способом взаємодії в React. Перш ніж тягнутися за рефом, запитайте себе: чи можна це досягти за допомогою стану та пропсів? Якщо відповідь «так», то це майже завжди кращий, більш «ідіоматичний для React» підхід. Наприклад, якщо ви хочете змінити значення поля введення, використовуйте керовані компоненти зі станом, а не реф для прямого встановлення inputRef.current.value.

2. Рефи для імперативних взаємодій, а не для управління станом

Рефи найкраще підходять для завдань, які включають прямі, імперативні дії над DOM-елементами або екземплярами компонентів. Це команди: «сфокусуй це поле введення», «відтвори це відео», «прокрути до цього розділу». Вони не призначені для зміни декларативного UI компонента на основі стану. Пряме маніпулювання стилем або вмістом елемента через реф, коли це можна було б контролювати за допомогою пропсів або стану, може призвести до розсинхронізації віртуального DOM React з реальним DOM, викликаючи непередбачувану поведінку та проблеми з рендерингом.

3. Рефи та функціональні компоненти: використовуйте `useRef` та `forwardRef`

Для сучасної розробки на React у функціональних компонентах React.createRef() — це не той інструмент, який ви будете використовувати. Замість цього ви будете покладатися на хук useRef. Хук useRef надає змінний об'єкт рефа, подібний до createRef, чия властивість .current може використовуватися для тих самих імперативних взаємодій. Він зберігає своє значення між повторними рендерингами компонента, не викликаючи при цьому повторного рендерингу, що робить його ідеальним для зберігання посилання на вузол DOM або будь-якого змінного значення, яке має зберігатися між рендерами.

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

function FunctionalComponentWithRef() {
const myInputRef = useRef(null); // Ініціалізувати з null

useEffect(() => {
// Це виконується після монтування компонента
if (myInputRef.current) {
myInputRef.current.focus();
console.log('Functional component input focused!');
}
}, []); // Порожній масив залежностей гарантує, що він виконається лише один раз при монтуванні

const handleLogValue = () => {
if (myInputRef.current) {
alert(`Input value: ${myInputRef.current.value}`);
}
};

return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #009688', borderRadius: '8px', background: '#e0f2f1' }}>
<h3>Використання useRef у функціональному компоненті</h3>
<label htmlFor="funcInput">Введіть щось:</label><br />
<input id="funcInput" type="text" ref={myInputRef} placeholder="Я автоматично сфокусований!" style={{ padding: '8px', margin: '10px 0', borderRadius: '4px', border: '1px solid #ccc' }} /><br />
<button onClick={handleLogValue} style={{ padding: '10px 15px', background: '#009688', color: 'white', border: 'none', borderRadius: '5px', cursor: 'pointer' }}>
Записати значення
</button>
<p><em>Для нових проєктів `useRef` є ідіоматичним вибором для рефів у функціональних компонентах.</em></p>
</div>
);
}

Якщо вам потрібно, щоб батьківський компонент отримав реф на DOM-елемент всередині функціонального дочірнього компонента, то React.forwardRef є вашим рішенням. Це компонент вищого порядку, який дозволяє вам «перенаправляти» реф від батька до одного з DOM-елементів його дочірніх компонентів, підтримуючи інкапсуляцію функціонального компонента, але все ще дозволяючи імперативний доступ, коли це необхідно.

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

// Функціональний компонент, який явно перенаправляє реф на свій нативний елемент input
const ForwardedInput = React.forwardRef((props, ref) => (
<input type="text" ref={ref} className="forwarded-input" placeholder={props.placeholder} style={{ padding: '10px', margin: '8px 0', border: '1px solid #ccc', borderRadius: '4px', width: '100%' }} />
));

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

componentDidMount() {
if (this.parentInputRef.current) {
this.parentInputRef.current.focus();
console.log('Input inside functional component focused from parent (class component) via forwarded ref!');
}
}

render() {
return (
<div style={{ margin: '20px', padding: '20px', border: '1px solid #6f42c1', borderRadius: '8px', background: '#f5eef9' }}>
<h3>Приклад перенаправлення рефа з createRef (батьківський класовий компонент)</h3>
<label>Введіть деталі:</label>
<ForwardedInput ref={this.parentInputRef} placeholder="Це поле введення знаходиться всередині функціонального компонента" />
<p><em>Цей патерн є критично важливим для створення багаторазово використовуваних бібліотек компонентів, яким потрібно надавати прямий доступ до DOM.</em></p>
</div>
);
}
}

Це демонструє, як класовий компонент, що використовує createRef, може ефективно взаємодіяти з DOM-елементом, вкладеним у функціональний компонент, завдяки forwardRef. Це робить функціональні компоненти однаково здатними брати участь в імперативних взаємодіях, коли це необхідно, гарантуючи, що сучасні кодові бази на React все ще можуть отримувати переваги від рефів.

4. Коли не слід використовувати рефи: збереження цілісності React

• Для контролю стану дочірнього компонента: Ніколи не використовуйте реф для прямого читання або оновлення стану дочірнього компонента. Це обходить систему управління станом React, роблячи ваш додаток непередбачуваним. Замість цього передавайте стан вниз як пропси, і використовуйте колбеки, щоб дозволити дочірнім компонентам запитувати зміни стану у батьків.
• Як заміну пропсам: Хоча ви можете викликати методи на дочірньому класовому компоненті через реф, подумайте, чи не досягне тієї ж мети передача обробника подій як пропса до дочірнього компонента більш «ідіоматичним для React» способом. Пропси сприяють чіткому потоку даних і роблять взаємодію компонентів прозорою.
• Для простих маніпуляцій з DOM, які може обробити React: Якщо ви хочете змінити текст, стиль елемента, або додати/видалити клас на основі стану, робіть це декларативно. Наприклад, щоб перемкнути клас active, умовно застосовуйте його в JSX: <div className={isActive ? 'active' : ''}>, а не divRef.current.classList.add('active').

5. Міркування щодо продуктивності та глобального охоплення

Хоча сам по собі createRef є продуктивним, операції, що виконуються за допомогою current, можуть мати значні наслідки для продуктивності. Для користувачів на слабших пристроях або з повільним мережевим з'єднанням (що є звичайним явищем у багатьох частинах світу), неефективні маніпуляції з DOM можуть призвести до ривків, нечутливих UI та поганого користувацького досвіду. При використанні рефів для таких завдань, як анімації, складні обчислення макета або інтеграція важких сторонніх бібліотек:

• Debounce/Throttle подій: Якщо ви використовуєте рефи для вимірювання розмірів на подіях window.resize або scroll, переконайтеся, що ці обробники мають затримку (debounce) або обмеження частоти (throttle), щоб запобігти надмірним викликам функцій та читанням з DOM.
• Пакетні читання/записи DOM: Уникайте чергування операцій читання DOM (наприклад, getBoundingClientRect()) з операціями запису DOM (наприклад, встановлення стилів). Це може спричинити «layout thrashing». Інструменти, такі як fastdom, можуть допомогти ефективно керувати цим.
• Відкладення некритичних операцій: Використовуйте requestAnimationFrame для анімацій та setTimeout(..., 0) або requestIdleCallback для менш критичних маніпуляцій з DOM, щоб вони не блокували основний потік і не впливали на чутливість.
• Обирайте з розумом: Іноді продуктивність сторонньої бібліотеки може бути вузьким місцем. Оцініть альтернативи або розгляньте можливість відкладеного завантаження таких компонентів для користувачів на повільних з'єднаннях, забезпечуючи, щоб базовий досвід залишався продуктивним глобально.

`createRef` проти колбек-рефів проти `useRef`: детальне порівняння

React пропонував різні способи роботи з рефами протягом свого розвитку. Розуміння нюансів кожного з них є ключем до вибору найбільш відповідного методу для вашого конкретного контексту.

1. `React.createRef()` (Класові компоненти - сучасний)

• Механізм: Створює об'єкт рефа ({ current: null }) в конструкторі екземпляра компонента. React присвоює DOM-елемент або екземпляр компонента властивості .current після монтування.
• Основне використання: Виключно в класових компонентах. Ініціалізується один раз на екземпляр компонента.
• Заповнення рефа: .current встановлюється на елемент/екземпляр після монтування компонента, і скидається до null при демонтуванні.
• Найкраще для: Всіх стандартних вимог до рефів у класових компонентах, де вам потрібно посилатися на DOM-елемент або дочірній екземпляр класового компонента.
• Переваги: Чіткий, простий об'єктно-орієнтований синтаксис. Немає проблем з повторним створенням вбудованих функцій, що викликає зайві виклики (як це може статися з колбек-рефами).
• Недоліки: Не можна використовувати з функціональними компонентами. Якщо не ініціалізувати в конструкторі (наприклад, у render), новий об'єкт рефа може створюватися при кожному рендері, що призводить до потенційних проблем з продуктивністю або неправильних значень рефа. Вимагає пам'ятати про присвоєння властивості екземпляра.

2. Колбек-рефи (Класові та функціональні компоненти - гнучкі/застарілі)

• Механізм: Ви передаєте функцію безпосередньо в пропс ref. React викликає цю функцію з змонтованим DOM-елементом або екземпляром компонента, а пізніше з null, коли він демонтується.
• Основне використання: Можна використовувати як у класових, так і у функціональних компонентах. У класових компонентах колбек зазвичай прив'язується до this або визначається як стрілочна функція-властивість класу. У функціональних компонентах він часто визначається вбудовано або мемоїзується.
• Заповнення рефа: Колбек-функція викликається React безпосередньо. Ви несете відповідальність за зберігання посилання (наприклад, this.myInput = element;).
• Найкраще для: Сценаріїв, що вимагають більш тонкого контролю над тим, коли рефи встановлюються та скидаються, або для розширених патернів, таких як динамічні списки рефів. Це був основний спосіб керування рефами до появи createRef та useRef.
• Переваги: Надає максимальну гнучкість. Дає вам негайний доступ до рефа, коли він доступний (всередині колбек-функції). Може використовуватися для зберігання рефів у масиві або карті для динамічних колекцій елементів.
• Недоліки: Якщо колбек визначено вбудовано в методі render (наприклад, ref={el => this.myRef = el}), він буде викликаний двічі під час оновлень (один раз з null, потім з елементом), що може спричинити проблеми з продуктивністю або несподівані побічні ефекти, якщо це не обробити обережно (наприклад, зробивши колбек методом класу або використовуючи useCallback у функціональних компонентах).

class CallbackRefDetailedExample extends React.Component {
constructor(props) {
super(props);
this.inputElement = null;
}

// Цей метод буде викликаний React для встановлення рефа
setInputElementRef = element => {
if (element) {
console.log('Ref element is:', element);
}
this.inputElement = element; // Зберегти фактичний DOM-елемент
};

componentDidMount() {
if (this.inputElement) {
this.inputElement.focus();
}
}

render() {
return (
<div>
<label>Поле введення з колбек-рефом:</label>
<input type="text" ref={this.setInputElementRef} />
</div>
);
}
}

3. Хук `useRef` (Функціональні компоненти - сучасний)

• Механізм: Хук React, який повертає змінний об'єкт рефа ({ current: initialValue }). Повернутий об'єкт зберігається протягом усього життя функціонального компонента.
• Основне використання: Виключно у функціональних компонентах.
• Заповнення рефа: Подібно до createRef, React присвоює DOM-елемент або екземпляр компонента (якщо перенаправлено) властивості .current після монтування і встановлює його в null при демонтуванні. Значення .current також можна оновлювати вручну.
• Найкраще для: Всього управління рефами у функціональних компонентах. Також корисно для зберігання будь-якого змінного значення, яке має зберігатися між рендерами без виклику повторного рендерингу (наприклад, ідентифікатори таймерів, попередні значення).
• Переваги: Простий, ідіоматичний для хуків. Об'єкт рефа зберігається між рендерами, уникаючи проблем з повторним створенням. Може зберігати будь-яке змінне значення, а не лише вузли DOM.
• Недоліки: Працює лише у функціональних компонентах. Вимагає явного використання useEffect для взаємодій з рефами, пов'язаних із життєвим циклом (наприклад, фокусування при монтуванні).

Отже, підсумовуючи:

• Якщо ви пишете класовий компонент і вам потрібен реф, React.createRef() є рекомендованим і найчіткішим вибором.
• Якщо ви пишете функціональний компонент і вам потрібен реф, хук useRef є сучасним, ідіоматичним рішенням.
• Колбек-рефи все ще дійсні, але, як правило, більш громіздкі та схильні до тонких проблем, якщо їх не реалізувати обережно. Вони корисні для розширених сценаріїв або при роботі зі старими кодовими базами або контекстами, де хуки недоступні.
• Для передачі рефів через компоненти (особливо функціональні), React.forwardRef() є важливим, часто використовується у поєднанні з createRef або useRef у батьківському компоненті.

Глобальні міркування та розширена доступність з рефами

Хоча часто обговорюється в технічному вакуумі, використання рефів у глобально орієнтованому контексті додатків має важливі наслідки, особливо щодо продуктивності та доступності для різноманітних користувачів.

1. Оптимізація продуктивності для різноманітних пристроїв та мереж

Вплив самого createRef на розмір бандла мінімальний, оскільки це мала частина ядра React. Однак операції, які ви виконуєте з властивістю current, можуть мати значні наслідки для продуктивності. Для користувачів на слабших пристроях або з повільним мережевим з'єднанням (що є звичайним явищем у багатьох частинах світу), неефективні маніпуляції з DOM можуть призвести до ривків, нечутливих UI та поганого користувацького досвіду. При використанні рефів для таких завдань, як анімації, складні обчислення макета або інтеграція важких сторонніх бібліотек:

• Debounce/Throttle подій: Якщо ви використовуєте рефи для вимірювання розмірів на подіях window.resize або scroll, переконайтеся, що ці обробники мають затримку (debounce) або обмеження частоти (throttle), щоб запобігти надмірним викликам функцій та читанням з DOM.
• Пакетні читання/записи DOM: Уникайте чергування операцій читання DOM (наприклад, getBoundingClientRect()) з операціями запису DOM (наприклад, встановлення стилів). Це може спричинити «layout thrashing». Інструменти, такі як fastdom, можуть допомогти ефективно керувати цим.
• Відкладення некритичних операцій: Використовуйте requestAnimationFrame для анімацій та setTimeout(..., 0) або requestIdleCallback для менш критичних маніпуляцій з DOM, щоб вони не блокували основний потік і не впливали на чутливість.
• Обирайте з розумом: Іноді продуктивність сторонньої бібліотеки може бути вузьким місцем. Оцініть альтернативи або розгляньте можливість відкладеного завантаження таких компонентів для користувачів на повільних з'єднаннях, забезпечуючи, щоб базовий досвід залишався продуктивним глобально.

2. Покращення доступності (атрибути ARIA та клавіатурна навігація)

Рефи є інструментальними у створенні високодоступних веб-додатків, особливо при створенні кастомних UI-компонентів, які не мають нативних браузерних еквівалентів, або при перевизначенні поведінки за замовчуванням. Для глобальної аудиторії дотримання Рекомендацій з доступності веб-контенту (WCAG) є не просто хорошою практикою, а часто й юридичною вимогою. Рефи дозволяють:

• Програмне управління фокусом: Як видно на прикладі полів введення, рефи дозволяють встановлювати фокус, що є критично важливим для користувачів клавіатури та навігації за допомогою екранних читалок. Це включає управління фокусом у модальних вікнах, випадаючих меню або інтерактивних віджетах.
• Динамічні атрибути ARIA: Ви можете використовувати рефи для динамічного додавання або оновлення атрибутів ARIA (Accessible Rich Internet Applications) (наприклад, aria-expanded, aria-controls, aria-live) на DOM-елементах. Це надає семантичну інформацію допоміжним технологіям, яка може бути неочевидною з візуального UI.

  class CollapsibleSection extends React.Component {
  constructor(props) {
  super(props);
  this.buttonRef = React.createRef();
  this.state = { isExpanded: false };
  }
  
  toggleExpanded = () => {
  this.setState(prevState => ({ isExpanded: !prevState.isExpanded }), () => {
  if (this.buttonRef.current) {
  // Динамічно оновлювати атрибут ARIA на основі стану
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  });
  };
  
  componentDidMount() {
  if (this.buttonRef.current) {
  this.buttonRef.current.setAttribute('aria-controls', `section-${this.props.id}`);
  this.buttonRef.current.setAttribute('aria-expanded', this.state.isExpanded);
  }
  }
  
  render() {
  const { id, title, children } = this.props;
  const { isExpanded } = this.state;
  return (
  <div style={{ margin: '20px auto', maxWidth: '600px', border: '1px solid #0056b3', borderRadius: '8px', background: '#e7f0fa', overflow: 'hidden' }}>
  <h4>
  <button
  ref={this.buttonRef} // Реф на кнопку для атрибутів ARIA
  onClick={this.toggleExpanded}
  style={{ background: 'none', border: 'none', padding: '15px 20px', width: '100%', textAlign: 'left', cursor: 'pointer', fontSize: '1.2em', color: '#0056b3', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}
  id={`section-header-${id}`}
  >
  {title} <span>▼</span>
  </button>
  </h4>
  {isExpanded && (
  <div id={`section-${id}`} role="region" aria-labelledby={`section-header-${id}`} style={{ padding: '0 20px 20px', borderTop: '1px solid #a7d9f7' }}>
  {children}
  </div>
  )}
  </div>
  );
  }
  }

• Контроль взаємодії з клавіатурою: Для кастомних випадаючих списків, повзунків або інших інтерактивних елементів вам може знадобитися реалізувати специфічні обробники подій клавіатури (наприклад, клавіші зі стрілками для навігації в списку). Рефи надають доступ до цільового DOM-елемента, де можна прикріпити та керувати цими слухачами подій.

Продумано застосовуючи рефи, розробники можуть гарантувати, що їхні додатки є корисними та інклюзивними для людей з обмеженими можливостями по всьому світу, значно розширюючи їх глобальне охоплення та вплив.

3. Інтернаціоналізація (I18n) та локалізовані взаємодії

При роботі з інтернаціоналізацією (i18n) рефи можуть відігравати тонку, але важливу роль. Наприклад, у мовах, що використовують письмо справа-наліво (RTL), таких як арабська, іврит або перська, природний порядок табуляції та напрямок прокрутки можуть відрізнятися від мов з письмом зліва-направо (LTR). Якщо ви програмно керуєте фокусом або прокруткою за допомогою рефів, важливо переконатися, що ваша логіка враховує напрямок тексту документа або елемента (атрибут dir).

• Управління фокусом з урахуванням RTL: Хоча браузери, як правило, правильно обробляють порядок табуляції за замовчуванням для RTL, якщо ви реалізуєте кастомні пастки фокуса або послідовне фокусування, ретельно тестуйте вашу логіку на основі рефів у середовищах RTL, щоб забезпечити послідовний та інтуїтивно зрозумілий досвід.
• Вимірювання макета в RTL: При використанні getBoundingClientRect() через реф, пам'ятайте, що властивості left та right є відносними до вікна перегляду. Для обчислень макета, які залежать від візуального початку/кінця, враховуйте document.dir або обчислений стиль елемента, щоб скоригувати вашу логіку для макетів RTL.
• Інтеграція сторонніх бібліотек: Переконайтеся, що будь-які сторонні бібліотеки, інтегровані через рефи (наприклад, бібліотеки для діаграм), самі по собі підтримують i18n і правильно обробляють макети RTL, якщо ваш додаток їх підтримує. Відповідальність за це часто лежить на розробнику, який інтегрує бібліотеку в компонент React.

Висновок: опанування імперативного контролю з `createRef` для глобальних додатків

React.createRef() — це більше, ніж просто «аварійний вихід» у React; це життєво важливий інструмент, який долає розрив між потужною декларативною парадигмою React та імперативними реаліями взаємодії з DOM браузера. Хоча його роль у нових функціональних компонентах значною мірою перейняв хук useRef, createRef залишається стандартним і найбільш ідіоматичним способом управління рефами в класових компонентах, які все ще становлять значну частину багатьох корпоративних додатків по всьому світу.

Глибоко розуміючи його створення, прикріплення та критичну роль властивості .current, розробники можуть впевнено вирішувати такі завдання, як програмне управління фокусом, прямий контроль над медіа, безшовна інтеграція з різноманітними сторонніми бібліотеками (від діаграм D3.js до кастомних редакторів форматованого тексту) та точне вимірювання розмірів елементів. Ці можливості — це не просто технічні досягнення; вони є фундаментальними для створення додатків, які є продуктивними, доступними та зручними для широкого спектру глобальних користувачів, пристроїв та культурних контекстів.

Пам'ятайте, що цю силу слід використовувати розсудливо. Завжди надавайте перевагу декларативній системі стану та пропсів React. Коли імперативний контроль дійсно необхідний, createRef (для класових компонентів) або useRef (для функціональних компонентів) пропонує надійний та добре визначений механізм для його досягнення. Опанування рефів дає вам змогу справлятися з крайніми випадками та тонкощами сучасної веб-розробки, гарантуючи, що ваші додатки на React можуть надавати винятковий користувацький досвід у будь-якій точці світу, зберігаючи при цьому основні переваги елегантної компонентної архітектури React.

Подальше вивчення та дослідження

• Офіційна документація React про рефи: Для найактуальнішої інформації безпосередньо з джерела, зверніться до <em>https://react.dev/learn/manipulating-the-dom-with-refs</em>
• Розуміння хука `useRef` в React: Щоб глибше зануритися в еквівалент для функціональних компонентів, дослідіть <em>https://react.dev/reference/react/useRef</em>
• Перенаправлення рефів з `forwardRef`: Дізнайтеся, як ефективно передавати рефи через компоненти: <em>https://react.dev/reference/react/forwardRef</em>
• Рекомендації з доступності веб-контенту (WCAG): Важливо для глобальної веб-розробки: <em>https://www.w3.org/WAI/WCAG22/quickref/</em>
• Оптимізація продуктивності React: Найкращі практики для високопродуктивних додатків: <em>https://react.dev/learn/optimizing-performance</em>