ReactDOM

Если вы загружаете React из тега <script>, эти глобальные API доступны на ReactDOM глобальном уровне. Если вы используете ES6 с npm, вы можете написать import ReactDOM from 'react-dom'. Если вы используете ES5 с npm, вы можете написать var ReactDOM = require('react-dom').

Обзор

Пакет react-dom предоставляет методы, специфичные для DOM, которые могут быть использованы на верхнем уровне вашего приложения и как выходной механизм, чтобы выйти за пределы модели React, если это необходимо. Большинство ваших компонентов не должны использовать этот модуль.

• render()
• hydrate()
• unmountComponentAtNode()
• findDOMNode()
• createPortal()

Поддержка браузеров

React поддерживает все популярные браузеры, включая Internet Explorer 9 и выше, хотя для старых браузеров, таких как IE 9 и IE 10, необходимы некоторые полифилы.

Примечание

Мы не поддерживаем старые браузеры, которые не поддерживают методы ES5, но вы можете обнаружить, что ваши приложения работают в старых браузерах, если полифилы, такие как es5-shim и es5-sham, включены на странице. Вы сами отвечаете за это, если решите пойти по этому пути.

Справочник

render()

ReactDOM.render(element, container[, callback])

Отобразить React-элемент в DOM в предоставленном container контейнере и вернуть ссылку на компонент (или null для бессостоятельных компонентов).

Если React-элемент ранее был отображён в container, это выполнит обновление и только модифицирует DOM по мере необходимости, чтобы отразить последний React-элемент.

Если указана необязательная функция обратного вызова, она будет выполнена после отрисовки или обновления компонента.

Примечание:

ReactDOM.render() управляет содержимым узла контейнера, который вы передаёте. Любые существующие элементы DOM внутри заменяются при первом вызове. При последующих вызовах используется алгоритм сравнения DOM React для эффективных обновлений.

ReactDOM.render() не изменяет узел контейнера (только изменяет дочерние элементы контейнера). Возможно вставить компонент в существующий узел DOM, не перезаписывая существующие дочерние элементы.

ReactDOM.render() в настоящее время возвращает ссылку на корневой экземпляр ReactComponent. Однако использование этого возвращаемого значения устарело и следует избегать, поскольку в будущих версиях React компоненты могут отображаться асинхронно в некоторых случаях. Если вам нужна ссылка на корневой экземпляр ReactComponent, предпочтительным решением является прикрепление функции обратного вызова ref к корневому элементу.

Использование ReactDOM.render() для гидрации контейнера, отрендеренного на сервере, устарело и будет удалено в React 17. Используйте hydrate() вместо этого.

hydrate()

ReactDOM.hydrate(element, container[, callback])

То же, что и render(), но используется для гидрации контейнера, содержимое HTML которого было отрендерено ReactDOMServer. React попытается прикрепить обработчики событий к существующей разметке.

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

Если атрибут или текстовое содержимое отдельного элемента неизбежно различаются на сервере и клиенте (например, отметка времени), вы можете подавить предупреждение, добавив suppressHydrationWarning={true} к элементу. Оно работает только на одном уровне вглубь и предназначено как выходной механизм. Не злоупотребляйте им. Если это не текстовое содержимое, React всё равно не попытается исправить его, поэтому оно может оставаться несогласованным до будущих обновлений.

Если вы намеренно хотите отрендерить что-то другое на сервере и клиенте, вы можете выполнить рендеринг в два прохода. Компоненты, которые рендерят что-то другое на клиенте, могут считывать переменную состояния, такую как this.state.isClient, которую вы можете установить в значение true в componentDidMount(). Таким образом, первый проход рендеринга будет рендерить то же самое содержимое, что и на сервере, избегая несоответствий, но дополнительный проход произойдёт синхронно сразу после гидрации. Обратите внимание, что этот подход замедлит ваши компоненты, поскольку им придётся рендерить дважды, поэтому используйте его с осторожностью.

Помните о пользовательском опыте на медленных подключениях. JavaScript-код может загружаться значительно позже, чем начальный рендеринг HTML, поэтому, если вы отрендерите что-то другое в клиентском проходе, переход может быть резким. Однако, если сделать это правильно, может быть полезно рендерить «оболочку» приложения на сервере и отображать только некоторые дополнительные виджеты на клиенте. Чтобы узнать, как сделать это, не получая проблем с несоответствием разметки, обратитесь к объяснению в предыдущем абзаце.

unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

Удалить смонтированный React-компонент из DOM и очистить его обработчики событий и состояние. Если компонент не был смонтирован в контейнере, вызов этой функции ничего не делает. Возвращает true если компонент был размонтирован и false если компонент не подлежит размонтированию.

findDOMNode()

Примечание:

findDOMNode — это выходной механизм для доступа к базовому узлу DOM. В большинстве случаев использование этого выходного механизма не рекомендуется, так как он нарушает абстракцию компонента. Он был устарел в StrictMode.

ReactDOM.findDOMNode(component)

Если этот компонент был смонтирован в DOM, это возвращает соответствующий элемент браузера DOM. Этот метод полезен для чтения значений из DOM, таких как значения полей форм, и выполнения измерений DOM. В большинстве случаев вы можете прикрепить ref к узлу DOM и вообще избегать использования findDOMNode.

Когда компонент отображается в null или false, findDOMNode возвращает null. Когда компонент отображается в строку, findDOMNode возвращает текстовый узел DOM, содержащий это значение. Начиная с React 16, компонент может возвращать фрагмент с несколькими дочерними элементами, в этом случае findDOMNode вернет узел DOM, соответствующий первому непустому дочернему элементу.

Примечание:

findDOMNode работает только с смонтированными компонентами (то есть компонентами, которые были размещены в DOM). Если вы попытаетесь вызвать это для компонента, который ещё не смонтирован (например, вызывая findDOMNode() в render() для компонента, который ещё не создан), будет выброшено исключение.

findDOMNode не может быть использован для функциональных компонентов.

createPortal()

ReactDOM.createPortal(child, container)

Создаёт портал. Порталы предоставляют способ отображения дочерних элементов в узел DOM, который находится вне иерархии компонента DOM.