Все, що потрібно знати про рендеринг у React

Foto de ThisisEngineering en Unsplash

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

У цьому пості ми дослідимо рендеринг в React від основ до деталей, що роблять його таким ефективним. ✨

Що таке рендер у React?

Рендер — це процес, у якому React перетворює код JSX, який ми пишемо, на віртуальне представлення DOM. Потім React порівнює це представлення з поточним станом DOM, щоб вирішити, які частини потрібно оновити.

Ми можемо поділити рендер на три ключові етапи:

1. Запуск рендерингу: Що спричиняє рендер компонента?
2. Рендер компонента: Як React генерує необхідну структуру для DOM.
3. Підтвердження з DOM: Як React ефективно оновлює DOM.

1. Запуск рендерингу

Рендер може бути запущений двома основними способами:

a) Початковий рендер

Коли наше додаток запускається, React виконує початковий рендер. Це момент, коли React вперше виводить компонент на екран.

createRoot(document.getElementById('root')).render();

У цьому прикладі:

• createRoot вибирає цільовий елемент у DOM (елемент з id root).
• render монтує компонент `` і перетворює його на візуальне представлення на екрані.

b) Рендер через оновлення

Після початкового рендеру будь-яка зміна стану або пропсів компонента може запустити новий рендер. Це відбувається, наприклад, при використанні useState:

const [name, setName] = useState('Edward');  

function handleClick() {  
 setName('Taylor'); // Змінює стан, викликаючи перерендеринг.  
}

Щоразу, коли стан або пропси змінюються, React перерендерює компонент, щоб відобразити ці зміни в інтерфейсі.

2. Рендер компонента

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

Початковий рендер

Коли компонент монтується вперше:

• React викликає функцію компонента (наприклад, App).
• Повернутий JSX перетворюється на структуру віртуальних елементів.
• React використовує цю структуру для створення початкового DOM.

Перерендеринг

Якщо стан або пропси змінюються:

• React знову викликає функцію компонента для отримання нової структури JSX.
• Порівнює нову структуру з попередньою за допомогою алгоритму, званого diffing.
• Вносить тільки необхідні зміни в реальний DOM.

Алгоритм diffing в React порівнює поточний віртуальний DOM з попередньою версією, щоб визначити тільки необхідні зміни та ефективно оновити реальний DOM. 🚀

3. Підтвердження з DOM та процес узгодження

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

a) Початковий рендер

Під час монтування React використовує API appendChild, щоб додавати елементи до DOM.

b) Перерендеринги

Коли відбувається перерендер, React не замінює весь DOM. Замість цього:

1. Створює новий віртуальний DOM: React генерує оновлену версію віртуального DOM з внесеними змінами.
2. Порівнює попередній DOM з новим: За допомогою алгоритму diffing React визначає відмінності між ними.
   3.
   Оновлюй тільки необхідне: React застосовує мінімальні зміни до реального DOM, уникаючи непотрібних модифікацій.

Такий підхід забезпечує оптимальну продуктивність і плавний досвід користувача навіть у складних додатках.

Приклад: Список Завдань

function TaskList() {  
 const [tasks, setTasks] = useState([  
 { id: 1, text: 'Купити молоко' },  
 { id: 2, text: 'Вивчати React' },  
 ]);  

function removeTask(id) {  
 setTasks(tasks.filter(task => task.id !== id));  
 }  
 return (  

Список Завдань
    {tasks.map(task => (    
    {task.text}  removeTask(task.id)}>Видалити    
    ))}    
    );   } ```  

У цьому прикладі:
- **Початковий рендер:** React створює елементи ``
` для кожного завдання і додає їх до DOM.
- **Перерендеринг:** Коли ви видаляєте завдання, React оновлює тільки відповідний елемент, завдяки пропсу `key`.

## Чому це так ефективно?

## Вибіркові оновлення

React змінює тільки те, що змінилося в реальному DOM, завдяки використанню віртуального DOM та алгоритму _diffing_.

## Використання пропсу `key`

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

![pic](https://drive.javascript.org.ua/283652e83e0_5WUJ4A4NFnNG_gCJ_gif)

> ⚡ **Тому використовувати позицію масиву як** `key` **не є ідеальним**, оскільки це може викликати помилки в процесі узгодження, коли елементи змінюють порядок. Використання унікальних ідентифікаторів гарантує, що React правильно ідентифікує кожен елемент, оптимізуючи рендеринг і запобігаючи неочікуваним поведінкам.

## Висновок

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

Якщо цей пост допоміг вам краще зрозуміти рендеринг, що скажете про те, щоб поділитися ним з іншими розробниками? А краще, розкажіть, з якими труднощами ви стикалися при оптимізації продуктивності в React! Ваш досвід може надихнути на нові ідеї. 😉



Перекладено з: [Todo lo que necesitas saber sobre el renderizado en React](https://medium.com/@maraclaudiaprezescalante/todo-lo-que-necesitas-saber-sobre-el-renderizado-en-react-517d62590125)