В этой статье блога мы рассмотрим различные методы рендеринга компонентов React с использованием ReactDOM. Мы углубимся в примеры кода, чтобы продемонстрировать каждый метод и обсудим варианты их использования. К концу вы получите четкое представление о различных подходах к рендерингу с помощью ReactDOM.

1. ReactDOM.render():
   Метод ReactDOM.render() — наиболее часто используемый метод рендеринга компонентов React в DOM. Он принимает два аргумента: элемент JSX для визуализации и целевой элемент DOM, в котором должен отображаться компонент.

Пример:

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
  return <h1>Hello, World!</h1>;
};
ReactDOM.render(<App />, document.getElementById('container'));

2. ReactDOM.гидрат():
   Метод ReactDOM.гидрат() похож на ReactDOM.render(), но он специально разработан для рендеринга на стороне сервера (SSR). Он выполняет быстрый первоначальный рендеринг, а затем присоединяет обработчики событий к существующей разметке, созданной сервером.

Пример:

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
  return <h1>Hello, World!</h1>;
};
ReactDOM.hydrate(<App />, document.getElementById('container'));

3. ReactDOM.createPortal():
   ReactDOM.createPortal() позволяет визуализировать компонент React в другой элемент DOM, который существует вне иерархии DOM родительского компонента. Это полезно для таких сценариев, как модальные окна или всплывающие подсказки.

Пример:

import React from 'react';
import ReactDOM from 'react-dom';
const Modal = ({ children }) => {
  return ReactDOM.createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
};
const App = () => {
  return (
    <div>
      <h1>Hello, World!</h1>
      <Modal>Modal content</Modal>
    </div>
  );
};
ReactDOM.render(<App />, document.getElementById('container'));

4. ReactDOM.createRoot():
   ReactDOM.createRoot() — экспериментальный метод, представленный в React 16.9. Он обеспечивает одновременный рендеринг, позволяя приложению более эффективно расставлять приоритеты и планировать обновления рендеринга.

Пример:

import React from 'react';
import ReactDOM from 'react-dom';
const App = () => {
  return <h1>Hello, World!</h1>;
};
const container = ReactDOM.createRoot(document.getElementById('container'));
container.render(<App />);

В этой статье мы рассмотрели несколько методов рендеринга компонентов React с помощью ReactDOM. Мы рассмотрели ReactDOM.render(), ReactDOM.гидрат(), ReactDOM.createPortal() и ReactDOM.createRoot(), приведя примеры кода для каждого метода. Понимание этих методов рендеринга позволит вам выбрать наиболее подходящий подход для ваших конкретных случаев использования при разработке React.