render

Устаревший

render(reactNode, domNode, callback?)

• Справочник
  • render(reactNode, domNode, callback?)
• Использование
  • Отображение корневого компонента
  • Отображение нескольких корней
  • Обновление отображаемого дерева

Справочник

render(reactNode, domNode, callback?)

Вызовите render для отображения React-компонента внутри элемента DOM браузера.

import { render } from 'react-dom';

const domNode = document.getElementById('root');
render(<App />, domNode);

React отобразит <App /> в domNode, и возьмёт на себя управление DOM внутри него.

Приложение, полностью построенное с помощью React, обычно имеет только один вызов render с его корневым компонентом. Страница, использующая «добавки» React для частей страницы, может иметь столько вызовов render сколько необходимо.

См. больше примеров ниже.

Параметры

• reactNode: Узел React, который вы хотите отобразить. Обычно это фрагмент JSX, например, <App />, но вы также можете передать React-элемент, созданный с помощью createElement(), строку, число, null, или undefined.

• domNode: Элемент DOM. React отобразит reactNode внутри этого элемента DOM. С этого момента React будет управлять DOM внутри domNode и обновлять его, когда ваше React-дерево изменится.

• необязательный callback: Функция. Если передана, React вызовет её после того, как ваш компонент будет размещён в DOM.

Возвращаемое значение

render обычно возвращает null. Однако, если reactNode который вы передаёте, является компонентом-классом, то он вернёт экземпляр этого компонента.

Ограничения

• В React 18, render был заменён на createRoot. Пожалуйста, используйте createRoot для React 18 и более поздних версий.

• В первый раз при вызове render, React очистит всё существующее содержимое HTML внутри domNode перед отображением React-компонента в нём. Если ваш domNode содержит HTML, сгенерированный React на сервере или во время сборки, используйте hydrate() вместо этого, что прикрепит обработчики событий к существующему HTML.

• Если вы вызываете render на том же domNode более одного раза, React обновит DOM по мере необходимости, чтобы отразить последнюю переданную JSX. React определит, какие части DOM можно повторно использовать, а какие нужно пересоздать, «сопоставляя» их с ранее отображённым деревом. Вызов render на том же domNode снова аналогичен вызову функции set на корневом компоненте: React избегает ненужных обновлений DOM.

• Если ваше приложение полностью построено с помощью React, вы, вероятно, будете иметь только один вызов render в вашем приложении. (Если вы используете фреймворк, он может сделать этот вызов за вас.) Когда вы хотите отобразить фрагмент JSX в другой части дерева DOM, которое не является дочерним элементом вашего компонента (например, модальное окно или всплывающая подсказка), используйте createPortal вместо render.

Использование

Вызовите render для отображения React-компонента внутри узла DOM браузера.

import { render } from 'react-dom';
import App from './App.js';

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

Отображение корневого компонента

В приложениях, полностью построенных с помощью React, обычно это делается только один раз при запуске—для отображения «корневого» компонента.

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

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

Обычно вам не нужно вызывать render снова или вызывать его в большем количестве мест. С этого момента React будет управлять DOM вашего приложения. Для обновления пользовательского интерфейса ваши компоненты будут использовать состояние.

Отображение нескольких корней

Если ваша страница не построена полностью с помощью React, вызывайте render для каждого верхнеуровневого фрагмента пользовательского интерфейса, управляемого React.

import './styles.css';
import { render } from 'react-dom';
import { Comments, Navigation } from './Components.js';

render(
  <Navigation />,
  document.getElementById('navigation')
);

render(
  <Comments />,
  document.getElementById('comments')
);

Вы можете уничтожить отображаемые деревья с помощью unmountComponentAtNode().

Обновление отображаемого дерева

Вы можете вызывать render более одного раза на одном узле DOM. До тех пор, пока структура дерева компонентов соответствует ранее отображённому, React будет сохранять состояние. Обратите внимание, как вы можете вводить данные в поле ввода, что означает, что обновления от многократных вызовов render каждую секунду не являются разрушительными:

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

let i = 0;
setInterval(() => {
  render(
    <App counter={i} />,
    document.getElementById('root')
  );
  i++;
}, 1000);

Нечасто вызывать render несколько раз. Обычно вы будете обновлять состояние внутри компонентов.