4.3 ReactDOM


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




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

Начиная с 16 версии:




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


Замечание.

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





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. Однако использование этого возвращаемого значения является устаревшим и его следует избегать, поскольку будущие версии React в некоторых случаях могут отрисовывать компоненты асинхронно. Если вам нужна ссылка на экземпляр корневого ReactComponent, предпочтительным решением является привязка коллбэка ref к корневому элементу.


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



hydrate()


Код
    
  ReactDOM.hydrate(element, container[, callback])

Добавлен в версии 16.

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

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

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

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

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


unmountComponentAtNode()


Код
    
 unmountComponentAtNode(container)

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


findDOMNode()


Внимание!

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


Код
    
  ReactDOM.findDOMNode(component)

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

Когда render возвращает null или false, findDOMNode возвращает значение null.

Начиная с версии 16:

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


Замечание.

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


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



createPortal()


Код
    
  ReactDOM.createPortal(child, container)

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