Реакт Дом

обзор

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

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

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

Заметка

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

Ссылка:

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

Визуализируйте элемент React в DOM в предоставленном контейнере и верните ссылку на компонент (или вернете значение NULL для компонентов без состояния).

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

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

Замечания:

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

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

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

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

гидрат ()

ReactDOM.hydrate (элемент, контейнер [, обратный вызов])

То же, что и 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. В большинстве случаев вы можете прикрепить ссылку к узлу DOM и вообще не использовать findDOMNode.

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

Замечания:

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

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

createPortal ()

ReactDOM.createPortal(child, container)

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