ReactDOM
Пакет react-dom предоставляет специфические для DOM методы, которые могут быть использованы на верхнем уровне вашего приложения. Кроме этого, эти методы можно использовать в качестве лазейки, чтобы выйти из модели React, если вам будет это нужно.
import * as ReactDOM from 'react-dom';If you use ES5 with npm, you can write:
var ReactDOM = require('react-dom');The react-dom package also provides modules specific to client and server apps:
Обзор
The react-dom package exports these methods:
These react-dom methods are also exported, but are considered legacy:
Примечание:
Both
renderandhydratehave been replaced with new client methods in React 18. These methods will warn that your app will behave as if it’s running React 17 (learn more here).
Поддержка браузерами
React поддерживает все современные браузеры, хотя для более старых версий браузеров понадобятся полифилы.
Примечание
Мы не поддерживаем старые браузеры, в которых отсутствует поддержка ES5-методов или микротасков, например Internet Explorer. Возможно, вам удастся обойти эту проблему в старых браузерах, если вы подключите шимы es5-shim и es5-sham. Пожалуйста учтите, что этот путь официально не поддерживается и вы принимаете решение на свой страх и риск.
Справочник
createPortal()
createPortal(child, container)Creates a portal. Portals provide a way to render children into a DOM node that exists outside the hierarchy of the DOM component.
flushSync()
flushSync(callback)Force React to flush any updates inside the provided callback synchronously. This ensures that the DOM is updated immediately.
// Force this state update to be synchronous.
flushSync(() => {
setCount(count + 1);
});
// By this point, DOM is updated.Примечание:
flushSynccan significantly hurt performance. Use sparingly.
flushSyncmay force pending Suspense boundaries to show theirfallbackstate.
flushSyncmay also run pending effects and synchronously apply any updates they contain before returning.
flushSyncmay also flush updates outside the callback when necessary to flush the updates inside the callback. For example, if there are pending updates from a click, React may flush those before flushing the updates inside the callback.
Legacy Reference
render()
render(element, container[, callback])Примечание:
renderhas been replaced withcreateRootin React 18. See createRoot for more info.
Рендерит React-элемент в DOM-элемент, переданный в аргумент container и возвращает ссылку на компонент (или возвращает null для компонентов без состояния).
Если React-элемент уже был ранее отрендерен в container, то повторный вызов произведёт его обновление и изменит соответствующую часть DOM, чтобы она содержала последние изменения.
Если дополнительно был предоставлен колбэк, он будет вызван после того, как компонент отрендерится или обновится.
Примечание:
render()управляет содержимым передаваемого вами узла контейнера. Любые существующие элементы DOM внутри заменяются при первом вызове. Более поздние вызовы используют алгоритм отслеживания изменений React DOM для эффективного обновления.
render()не изменяет узел контейнера (изменяет только дочерние элементы контейнера). Если нужно, можно вставить компонент в существующий узел DOM без перезаписи существующих дочерних элементов.
render()в настоящее время возвращает ссылку на корневой экземплярReactComponent. Однако использование этого возвращаемого значения является устаревшим и этого следует избегать, потому что в будущих версиях React-компоненты могут отображаться асинхронно в некоторых случаях. Если вам нужна ссылка на корневой экземплярReactComponent, предпочтительным решением является прикрепить реф (ref) на колбэк к корневому элементу.Использование
render()для гидратации контейнера, отрендеренного на сервере, объявлено устаревшим. Вместо этого используйтеhydrateRoot().
hydrate()
hydrate(element, container[, callback])Примечание:
hydrateбыл заменён наhydrateRootв React 18. Подробнее можно узнать в hydrateRoot.
То же, что и render(), но используется для гидратации контейнера, HTML-содержимое которого было отрендерено с помощью ReactDOMServer. React попытается присоединить обработчики событий к уже существующей разметке.
React ожидает, что отрендеренное содержимое идентично на сервере, и на клиенте. Текстовые различия в контенте могут быть переписаны поверх, но вам следует рассматривать такие нестыковки как ошибки и исправлять их. В режиме разработки React предупреждает о несоответствиях во время гидратации. Нет никаких гарантий, что различия атрибутов будут исправлены в случае несовпадений. Это важно по соображениям производительности, поскольку в большинстве приложений несоответствия встречаются редко, и поэтому проверка всей разметки будет непомерно дорогой.
Если атрибут отдельного элемента или текстовое содержимое неизбежно отличается на сервере и клиенте (например, отметка времени), вы можете отключить предупреждение, добавив к элементу suppressHydrationWarning={true}. Он работает только на один уровень в глубину, и задумана как лазейка. Не злоупотребляйте ею. Если это не текстовый контент, React по-прежнему не будет пытаться его исправить, поэтому он может оставаться несовместимым c обновлённым в будущем вариантом.
Если вам нужно намеренно отрендерить что-то другое на сервере и клиенте, вы можете выполнить двухпроходный рендеринг. Компоненты, которые рендерят что-то другое на клиенте, могут читать переменную состояния, такую как this.state.isClient, которую вы можете установить в true в componentDidMount(). Таким образом, начальный этап рендеринга будет отображать тот же контент, что и сервер, избегая несовпадений, но дополнительный этап будет происходить синхронно сразу после гидратации. Обратите внимание, что этот подход замедлит ваши компоненты, потому что они должны рендерится дважды, поэтому используйте его с осторожностью.
Не забывайте про работу с вашим приложением при медленных соединениях. JavaScript-код может загружаться значительно позже исходного HTML-рендеринга, поэтому, если вы рендерите что-то другое только для клиента, переход может вызвать раздражение. Тем не менее, при правильном выполнении может оказаться полезным отобразить «оболочку» приложения на сервере и показать только некоторые дополнительные виджеты на клиенте. Чтобы узнать, как это сделать без проблем с разметкой, обратитесь к объяснению в предыдущем абзаце.
unmountComponentAtNode()
unmountComponentAtNode(container)Примечание:
unmountComponentAtNodeбыл заменён наroot.unmount()в React 18. Подробнее можно узнать в createRoot.
Удаляет смонтированный компонент React из DOM и очищает его обработчики событий и состояние. Если в контейнер не было смонтировано ни одного компонента, вызов этой функции ничего не делает. Возвращает true, если компонент был размонтирован, и false если нет компонента для размонтирования.
findDOMNode()
Примечание:
findDOMNode— это лазейка, используемая для доступа к базовому узлу DOM. В большинстве случаев использование этого метода не рекомендуется, поскольку он нарушает абстракцию компонента. Метод устарел вStrictMode.
findDOMNode(component)Если этот компонент был смонтирован в DOM, он возвращает соответствующий DOM-элемент браузера. Этот метод полезен для чтения напрямую из DOM (например, чтение значений полей формы) или произведения измерений DOM. В большинстве случаев, вы можете присоединить реф к узлу DOM и полностью избежать использования findDOMNode.
Когда компонент рендерится в null или false, findDOMNode возвращает null. Когда компонент рендерится в строку, findDOMNode возвращает текстовый узел DOM, содержащий это значение. Начиная с React 16, компонент может возвращать фрагмент с несколькими дочерними элементами, и в этом случае findDOMNode возвращает DOM-узел, соответствующий первому непустому дочернему элементу.
Примечание:
findDOMNodeработает только с смонтированными компонентами (то есть компонентами, которые были размещены в DOM). Если вы попытаетесь вызвать этот метод для компонента, который ещё не был смонтирован (например, вызоветеfindDOMNode()в методеrender()для компонента, который ещё не был создан), будет сгенерировано исключение.
findDOMNodeне может быть использован с функциональными компонентами.