ReactDOM
Когда вы загружаете React с помощью тега <script>, глобальный ReactDOM предоставляет вам доступ к высокоуровневым API-методам. Если вы используете ES6 с npm, можете написать import ReactDOM from 'react-dom', а в случае ES5 с npm — var ReactDOM = require('react-dom').
Обзор
Пакет react-dom предоставляет специфические для DOM методы, которые могут быть использованы на верхнем уровне вашего приложения. Кроме этого, эти методы можно использовать в качестве лазейки, чтобы выйти из модели React, если вам будет это нужно. Поэтому большинство из ваших компонентов не должны использовать этот модуль.
Поддержка браузерами
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, чтобы она содержала последние изменения.
Если дополнительно был предоставлен колбэк, он будет вызван после того, как компонент отрендерится или обновится.
Примечание:
ReactDOM.render()управляет содержимым передаваемого вами узла контейнера. Любые существующие элементы DOM внутри заменяются при первом вызове. Более поздние вызовы используют алгоритм отслеживания изменений React DOM для эффективного обновления.
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 по-прежнему не будет пытаться его исправить, поэтому он может оставаться несовместимым c обновлённым в будущем вариантом.
Если вам нужно намеренно отрендерить что-то другое на сервере и клиенте, вы можете выполнить двухпроходный рендеринг. Компоненты, которые рендерят что-то другое на клиенте, могут читать переменную состояния, такую как 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. В большинстве случаев, вы можете присоединить реф к узлу DOM и полностью избежать использования findDOMNode.
Когда компонент рендерится в null или false, findDOMNode возвращает null. Когда компонент рендерится в строку, findDOMNode возвращает текстовый узел DOM, содержащий это значение. Начиная с React 16, компонент может возвращать фрагмент с несколькими дочерними элементами, и в этом случае findDOMNode возвращает DOM-узел, соответствующий первому непустому дочернему элементу.
Примечание:
findDOMNodeработает только с смонтированными компонентами (то есть компонентами, которые были размещены в DOM). Если вы попытаетесь вызвать этот метод для компонента, который ещё не был смонтирован (например, вызоветеfindDOMNode()в методеrender()для компонента, который ещё не был создан), будет сгенерировано исключение.
findDOMNodeне может быть использован с функциональными компонентами.
createPortal()
ReactDOM.createPortal(child, container)Создаёт портал. Порталы предоставляют способ отрендерить дочерние элементы в узле DOM, который существует вне иерархии DOM-компонента.