ReactDOM

Ако заредите React от <script> таг, тези API-та от най-високо ниво са достъпни чрез глобалната променлива ReactDOM. Ако използвате 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 за компоненти без state).

Aко React елемента е бил рендериран в container преди това, ще направи ъпдейт на елемента и ще промени само DOM-а, така че да отрази последната версия на React елемента.

Ако незадължителния callback е предоставен, той ще бъде извикан след като компонента се рендерира или ъпдейтне.

Бележка:

ReactDOM.render() контролира съдържанието на контейнера който сме подали. Всички съществуващи DOM елементи вътре са заместени, когато са извикани за пръв път. Последващите извикванията използват DОМ различаващия алгоритъм на React за ефикасни ъпдейти.

ReactDOM.render() не променя контейнера (променя само децата на контейнера). Може да е възможно вкарването на компонент в съществуващ DOM елемент без да презаписва съществуващите деца.

ReactDOM.render() връща референция към инстанцията на основния ReactComponent. Въпреки това, използването на тази върната стойност не се препоръчва (legacy). и трябва да бъде избягвана, защото в бъдещите версии на React може да рендерираме компоненти асинхронно в някои случаи. Ако се нуждаете от инстанция на главния компонент ReactComponent, предпочитаното решение е да закачите callback ref на главния компонент.

Използвайки ReactDOM.render() да хидратирате контейнер рендериран на сървъра е препоръчано да не се изполва и ще бъде премахнато в React 17. Изполвайте hydrate() вместо това.


hydrate()

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

Също като render(), но се използва да хидратира контейнер, на който HTML съдържанието е било рендерирано от ReactDOMServer. React ще закачи слушателите на събития към съществуващия документ.

React очаква, че рендерираното съдържание е индентично между сървъра и клиента. Той може да изглади разликите в текстовото съдържание, но вие трябва да считате разликите като грешки и да ги оправите. В процес на програмиране, React предупреждава за разликите по време на хидратация. Няма гаранции, че разликата в атрибутите ще се изгладят, ако има разминавания. Това е важно поради съображения за бързодействие, защото в повечето приложения, разликите са рядкост и вадилирането на целия HTML ще бъде прекалено скъпо.

Ако атрибут на елемент или текстово съдържание са неизбежно различни между сървъра и клиента (например timestamp), може да заглушите предупреждението като добавите suppressHydrationWarning={true} на елемента. Това работи само едно ниво надолу и е предназначено да бъде нещо като авариен изход. Не го използвайте прекалено много. Освен ако е текстово съдържание. React няма да направи опит да го оправи, така че може да остане невярна информация до бъдещи ъпдейти.

Ако нарочно трябва да рендерирате нещо различно на сървъра и клиента, може да направите двойно рендериране. Компонентите, които рендерират нещо различно на клиента могат да четат променлива от state-a като this.state.isClient, която може да запишете като true в componentDidMount(). По този начин, първоначалното рендериране ще рендерира същото съдържание, като на сървъра, без разминавания, но допълнителното рендериране ще се случи синхронно точно след хидратация. Забележете, че този подход ще направи компонентите ви по-бавни, защото те ще трябва да се рендерират два пъти, така че използвайте го внимателно.

Не забравяйте да внимавате за потребителското изживяване на бавни интернет връзки. JavaScript кода може да зареди значително по-късно от първоначалния зареден HTML, така че ако рендерирате нещо различно само на клиента, прехода може да е шокиращ. Въпреки това, ако го направите добре, може да бъде полезно да рендерирате “черупката” на приложението на сървъра, и само да показвате някои от допълнителните функционалности на клиента. Да научите как да направите това без да получавате грешки при различия на маркъп-а, прегледайте обяснението в предишния параграф.


unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

Изтрива mounted React компонент от DOM и изчиства обработените събития и state. Ако никой компонент не е бил mounted в контейнера, извикването на тази функция не прави нищо. Връща true, ако компонента е бил unmounted и false, ако е нямало компонент да unmount.


findDOMNode()

Бележка:

findDOMNode е аварийния изход използван да се достъпи основен DOM елемент. В повечето случаи, използването на този авариен начин се обезсърчава, защото пречупва абстракцията на компонента. Отхвърлено е в StrictMode.

ReactDOM.findDOMNode(component)

Ако този компонент е бил mounted в DOM-a, този метод връща съответния браузър DOM елемент. Този метод е полезен за четене на стойности извън DOM-a, като стойности на полета на форма и да направи DOM измервания. В повечето случаи, може да сложите ref на DOM елемента и да не използвате findDOMNode въобще.

Когато компонента рендерира null или false, findDOMNode връща null. Когато компонента се рендерира към низ, findDOMNode връща текстов DOM елемент, съдържащ стойноста. От React 16 насам, всеки компонент може да върне фрагмент с много деца, в този случай findDOMNode ще върне DOM елемента отнасящ се за първото не-празно дете.

Бележка:

findDOMNode работи само в mounted компоненти (това са, компоненти, които са били сложени в DOM-а). Ако се опитате да извикате този метод, на компонент, който още не е бил mounted (като да извикате findDOMNode() в render() на компонент, който още не е създаден) ще бъде хвърлена грешка.

findDOMNode не може да бъде използван във функционални компоненти.


createPortal()

ReactDOM.createPortal(child, container)

Създава портал. Порталите осигуряват начин да ренденираме децата в DОМ елемент, който съществува извън йерархията на DOM компонента.