hydrate

Цей API буде видалено у наступному старшому релізі React.

У React 18 hydrate було замінено на hydrateRoot. Використання hydrate у React 18 попередить, що ваш застосунок буде поводитися так, ніби він працює під управлінням React 17. Дізнайтеся більше тут.

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

hydrate(reactNode, domNode, callback?)

Довідник

`hydrate(reactNode, domNode, callback?)`

Викличте hydrate у React версії 17 і нижче, щоб "прикріпити" React до існуючого HTML, який вже було відрендерено React у серверному середовищі.

import { hydrate } from 'react-dom';

hydrate(reactNode, domNode);

React приєднається до HTML, що існує всередині domNode, і візьме на себе управління DOM всередині нього. Застосунок, повністю побудований на React, зазвичай має лише один виклик hydrate з кореневого компонента.

Дивіться більше прикладів нижче.

Параметри

reactNode: "Вузол React", який використовується для рендерингу існуючого HTML. Зазвичай це буде фрагмент JSX на кшталт <App />, який було відрендерено методом ReactDOM Server, наприклад, renderToString(<App />) у React 17.
domNode: Елемент DOM, який було відрендерено як кореневий елемент на сервері.
опція: зворотний виклик: Функція. Якщо її передати, React викличе її після того, як ваш компонент буде гідратований.

Повернення

hydrate повертає null.

Застереження

hydrate очікує, що відрендерений вміст буде ідентичним вмісту, що відображається на сервері. React може виправляти відмінності в текстовому вмісті, але ви повинні розглядати невідповідності як помилки і виправляти їх.
У режимі розробки React попереджає про невідповідності під час гідратації. Немає жодних гарантій, що відмінності в атрибутах будуть виправлені у разі виявлення невідповідностей. Це важливо з міркувань продуктивності, оскільки в більшості застосунків розбіжності трапляються рідко, і тому перевірка всієї розмітки була б надто складною.
Ймовірно, у вашому застосунку буде лише один виклик hydrate. Якщо ви використовуєте фреймворк, він може виконати цей виклик за вас.
Якщо ваш застосунок рендериться клієнтом без HTML-верстки, використання hydrate() не підтримується. Замість цього використовуйте render() (для React 17 і нижче) або createRoot() (для React 18+).

Використання

Викличте hydrate, щоб приєднати React-компонент</CodeStep> у відрендерений сервером <CodeStep data-step="2">вузол DOM браузера</CodeStep> .</p> <pre><code data-meta="[[1, 3, "<App />"], [2, 3, "document.getElementById('root')"]]" class="language-js" >import { hydrate } from 'react-dom'; hydrate(<App />, document.getElementById('root'));

Використання hydrate() для відображення лише клієнтської програми (програми без серверного HTML) не підтримується. Замість цього використовуйте render() (у React версії 17 і нижче) або createRoot() (у React 18+).

Гідратація серверного HTML

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

У додатках, повністю побудованих на React, зазвичай потрібно гідратувати лише один "корінь", один раз при запуску для всього застосунку.

<!--
  HTML content inside <div id="root">...</div>
  was generated from App by react-dom/server.
-->
<div id="root"><h1>Hello, world!</h1></div>

import './styles.css';
import { hydrate } from 'react-dom';
import App from './App.js';

hydrate(<App />, document.getElementById('root'));

export default function App() {
  return <h1>Hello, world!</h1>;
}

Зазвичай вам не потрібно викликати hydrate знову або викликати його в інших місцях. З цього моменту React буде керувати DOM вашого застосунку. Для оновлення інтерфейсу користувача ваші компоненти будуть використовувати state.

Для отримання додаткової інформації про гідратацію дивіться документацію до hydrateRoot.

Придушення неминучих помилок невідповідності гідратації

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

Щоб вимкнути попередження про гідратацію елемента, додайте suppressHydrationWarning={true}:

<!--
  HTML content inside <div id="root">...</div>
  was generated from App by react-dom/server.
-->
<div id="root"><h1>Current Date: 01/01/2020</h1></div>

import './styles.css';
import { hydrate } from 'react-dom';
import App from './App.js';

hydrate(<App />, document.getElementById('root'));

export default function App() {
  return (
    <h1 suppressHydrationWarning={true}>
      Current Date: {new Date().toLocaleDateString()}
    </h1>
  );
}

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

Робота з різним клієнтським та серверним вмістом

Якщо вам навмисно потрібно відрендерити щось різне на сервері та клієнтській стороні, ви можете зробити двопрохідний рендеринг. Компоненти, які рендеритимуть щось інше на клієнтській стороні, можуть читати змінну стану на кшталт isClient, яку ви можете встановити як true в ефекті:

<!--
  HTML content inside <div id="root">...</div>
  was generated from App by react-dom/server.
-->
<div id="root"><h1>Is Server</h1></div>

import './styles.css';
import { hydrate } from 'react-dom';
import App from './App.js';

hydrate(<App />, document.getElementById('root'));

import { useState, useEffect } from "react";

export default function App() {
  const [isClient, setIsClient] = useState(false);

  useEffect(() => {
    setIsClient(true);
  }, []);

  return (
    <h1>
      {isClient ? 'Is Client' : 'Is Server'}
    </h1>
  );
}

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

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

[email protected]