Розуміння useRef та зворотних викликів ref в React: Посібник, орієнтований на продуктивність

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

Що таке useRef?

useRef створює змінний об'єкт посилання, який зберігається між рендерами та зберігає властивість .current. Це часто використовується для маніпуляцій з DOM або збереження значень, які не викликають перерендерингів.

Основні особливості useRef:

1. Персистентне збереження: Зберігає властивість .current між рендерами.
2. Без перерендерингу: Зміни у .current не викликають перерендеринг компонента.
3. Маніпуляція з DOM: Зазвичай використовується для посилань на елементи DOM.

Приклад: Використання useRef для маніпуляції з DOM

import React, { useRef } from 'react';

const UseRefExample = () => {  
 const inputRef = useRef(null); const focusInput = () => {  
 if (inputRef.current) {  
 inputRef.current.focus();  
 }  
 }; return (  

Focus Input    
    );   };export default UseRefExample; 

Пояснення:

• Хук useRef ініціалізує посилання на null.
• Посилання присвоюється елементу input при його монтуванні, що робить його доступним через inputRef.current.

Зворотні виклики ref: динамічна альтернатива

Зворотні виклики ref — це функції, які React викликає для динамічного призначення або очищення посилань. На відміну від useRef, зворотні виклики ref дають більше гнучкості в управлінні динамічними елементами.

Основні особливості зворотних викликів ref:

1. Динамічне призначення: Обробляє посилання на елементи DOM при монтуванні/демонтуванні.
2. Автоматичне очищення: React викликає зворотний виклик з null при демонтажі, забезпечуючи правильне очищення.
3. Без персистентного стану: На відміну від useRef, вони не зберігають значення постійно, якщо це не керується явно.

Приклад: Зворотні виклики ref для динамічної маніпуляції з DOM

import React, { useCallback } from 'react'; 

const RefCallbackExample = () => {    
 const setRef = useCallback((node: HTMLDivElement | null) => {    
 if (node) {    
 node.style.backgroundColor = 'lightblue';    
 console.log('Node assigned:', node);    
 } else {    
 console.log('Node unmounted');    
 }    
 }, []); return 
Hello, Ref Callback!
;   };export default RefCallbackExample; 

Пояснення:

• React викликає setRef з DOM елементом під час монтування компонента та з null під час демонтажу.
• Використання useCallback забезпечує стабільність зворотного виклику між рендерами.

Порівняння useRef та зворотних викликів ref

| Характеристика | useRef | Зворотний виклик ref |
| --------------- | -------- | ------------------- |
| Персистентність | Зберігає стабільну властивість .current | Динамічно призначає при монтуванні/демонтуванні |
| Реактивність | Статична та постійна | Реактивно оновлюється React |
| Автоматичне очищення | Необхідне ручне очищення | React викликає з null при демонтажі |

Оптимізація зворотних викликів ref за допомогою useCallback

За замовчуванням, зворотні виклики ref перезаписуються при кожному рендері. Це може призвести до непотрібних переназначень та зниження продуктивності.
текст перекладу
Обгортання зворотних викликів ref за допомогою useCallback гарантує, що вони залишаються стабільними.

Приклад: Зворотний виклик ref з динамічними елементами

import React, { useCallback, useState } from 'react';

const DynamicRefExample = () => {  
 const [showInput, setShowInput] = useState(true); const setInputRef = useCallback((node: HTMLInputElement | null) => {  
 if (node) {  
 console.log('Input mounted:', node);  
 node.focus();  
 } else {  
 console.log('Input unmounted');  
 }  
 }, []); return (  

 setShowInput((prev) => !prev)}>    Toggle Input        {showInput && }    
    );   };export default DynamicRefExample; 

Використання зворотних викликів ref

1. Динамічні елементи DOM

Зворотні виклики ref ідеально підходять, коли елементи додаються або видаляються динамічно.

function DynamicChart({ show }: { show: boolean }) {    
 const setChartRef = useCallback((node: HTMLCanvasElement | null) => {    
 if (node) {    
 console.log('Chart canvas initialized');    
 }    
 }, []); 

 return show ? 
 : null;   
} 

2. Треті сторони бібліотеки

Зворотні виклики ref спрощують інтеграцію з бібліотеками, такими як D3.js або Chart.js.

import { Chart } from 'chart.js'; 

const ChartExample = () => {    
 const setCanvasRef = useCallback((canvas: HTMLCanvasElement | null) => {    
 if (canvas) {    
 const chart = new Chart(canvas, {    
 type: 'bar',    
 data: { labels: ['A', 'B'], datasets: [{ data: [10, 20] }] },    
 }); return () => chart.destroy();    
 }    
 }, []); return 
;   
}; 

Останні думки: Вибір між useRef та зворотними викликами ref

• Використовуйте useRef, коли:
  • Потрібне стабільне, постійне посилання (наприклад, для полів форм).
  • Не потрібно динамічного переназначення.
• Використовуйте зворотні виклики ref, коли:
  • Елементи DOM додаються або видаляються динамічно.
  • Логіка очищення є важливою.
  • Бібліотеки сторонніх розробників потребують посилань на DOM вузли.

Зрозумівши відмінності між useRef та зворотними викликами ref, ви зможете вибрати правильний інструмент для завдання та створювати продуктивні, чисті додатки на React. 🚀

Перекладено з: Understanding React’s useRef and Ref Callbacks: A Performance-Driven Guide