Если вы загружаете 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 , требуются некоторые полисы .

Reference

render()

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

Вынести React элемент в DOM в подаваемом containerи возвращает ссылку на компонент (или возвращается nullдля лиц без компонентов ).

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

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

Заметка:

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

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

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

Использование 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()

ReactDOM.findDOMNode(component)

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

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

Заметка:

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

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

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

createPortal()

ReactDOM.createPortal(child, container)

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