ReactDOM
Якщо ви завантажуєте React з тегу <script>, то API верхнього рівня доступні в глобальному об’єкті ReactDOM. Якщо ви використовуєте ES6 разом із npm, ви можете написати import ReactDOM from 'react-dom', якщо ES5 — 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-елемент у наданий container у DOM-і і повертає реф на компонент (або повертає null для компонентів без стану).
Якщо React-елемент був попередньо відрендерений у container, цей метод виконає його оновлення і змінить DOM за необхідністю, щоб відобразити останній варіант React-елемента.
Якщо надано функцію зворотнього виклику, вона буде виконана після того, як компонент відрендериться або оновиться.
Примітка:
ReactDOM.render()контролює вміст вузла контейнера, який ви передаєте. Будь-який наявний DOM-елемент всередині буде замінено під час першого виклику. Наступні виклики використовують React-овий алгоритм різниці DOM-ів для ефективних оновлень.
ReactDOM.render()не модифікує вузол контейнера (тільки модифікує нащадків). Також можливо вставити компонент у наявний DOM-вузол без перезапису наявних нащадків.
ReactDOM.render()наразі повертає посилання на кореневий екземплярReactComponent. Однак використання значення, що повертається, є застарілим і його потрібно уникати, оскільки майбутні версії 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()
Примітка:
findDOMNode— це запасний спосіб, що використовувався для доступу до базового DOM-вузла. У більшості випадків, використання цього способу не рекомендується, оскільки він порушує абстракцію компоненту. Він визнаний застарілим вStrictMode.
ReactDOM.findDOMNode(component)Якщо цей компонент був змонтований у DOM, цей метод поверне відповідний нативний браузерний DOM-елемент. Цей метод корисний для читання значення з DOM-у, таких як значення полів форми та вимірювань DOM. У більшості випадків, ви можете приєднати ref до DOM-вузла і уникнути використання findDOMNode взагалі.
Якщо компонент рендериться в null або false, findDOMNode повертає null. Коли компонент рендериться в рядок, findDOMNode повертає текстовий DOM-вузол, який містить значення. Починаючи з React 16, компонент може повертати фрагмент з декількома дочірніми елементами, в цьому випадку findDOMNode поверне DOM-вузол, що відповідає першому не порожньому нащадку.
Примітка:
findDOMNodeпрацює тільки на змонтованих компонентах (тобто таких компонентах, що були розміщені в DOM-і). Якщо ви спробуєте викликати цей метод на компоненті, який ще не було змонтовано (для прикладу, викликатиfindDOMNode()уrender()методі компоненту, який ще тільки буде створено), то отримаєте помилку.
findDOMNodeне може використовуватись з функціональними компонентами.
createPortal()
ReactDOM.createPortal(child, container)Створює портал. Портали надають можливість рендерити дочірні елементи у DOM-вузол, який існує за межами ієрархії DOM-компонента.