16-й день 100 днів чогось нового у фронтенд-розробці

Тема: Гідратація в React.js - Частина 1

Термін Гідратація в React насправді означає підключення обробників подій або інтерактивності до HTML-контенту в браузері, який був отриманий від сервера, а потім React бере на себе рендеринг на клієнті.

Тепер давайте розглянемо, як це реалізується двома способами:

1. React 17 і нижче
2. React 18

React 17 і нижче

hydrate(reactNode, domNode, callback?)

hydrate дозволяє відображати компоненти React всередині DOM-елемента браузера, чий HTML-контент був раніше згенерований react-dom/server в React 17 і нижче.

Параметри

• reactNode: “React-нод”, який використовується для рендерингу існуючого HTML. Зазвичай це частина JSX, як-от App/>, яка була відрендерена за допомогою методу ReactDOM Server, наприклад, renderToString в React 17.
• domNode: DOM-елемент, який був відрендерений як корінний елемент на сервері.

1. Викликаємо hydrate для підключення React до існуючого HTML, який вже був відрендерений React у серверному середовищі.
2. Повністю побудований додаток на React зазвичай буде мати один виклик hydrate з його корінним компонентом.
3. Якщо ваш додаток рендериться на клієнті і HTML ще не був відрендерений, то hydrate не підтримується, використовуйте render для React 17 і нижче або createRoot для React 18+.

render(reactNode, domNode, callback?)

Викликаємо render, щоб відобразити компонент React всередині DOM-елемента браузера.

import {render} from 'react-dom';  

const domNode = document.getElementById("root");  
render(, domNode);

render відобразить компонент в domNode і перейме управління DOM всередині нього.

1. Під час першого виклику render React очистить весь існуючий HTML-код всередині domNode, перш ніж відрендерити компонент React всередині нього.
2. Ви можете викликати render більше ніж один раз для того ж domNode, поки структура дерева компонентів залишатиметься незмінною, React збереже стан.

Ми розглянемо hydrate в React 18 у наступній статті.

Перекладено з: Day 16 of 100 Days of Something to learn in Frontend