如果您從<script>標(biāo)記加載React ，則這些頂級API可在ReactDOM全局中使用。如果你使用npm的ES6，你可以寫import ReactDOM from 'react-dom'。如果你使用npm的ES5，你可以寫var ReactDOM = require('react-dom')。

概觀

該react-dom軟件包提供了DOM特定的方法，可以在應(yīng)用程序的頂層使用，也可以作為退出孵化器，以便在需要時脫離React模型。大多數(shù)組件不應(yīng)該需要使用此模塊。

• render()

• hydrate()

• unmountComponentAtNode()

• findDOMNode()

• createPortal()

瀏覽器支持

React支持所有流行的瀏覽器，包括Internet Explorer 9及以上版本。

注意我們不支持不支持ES5方法的舊瀏覽器，但如果頁面中包含es5-shim和es5-sham等填充，則可能會發(fā)現(xiàn)您的應(yīng)用在較舊的瀏覽器中可以正常工作。如果你選擇走這條道路，那么你是獨立的。

參考

render()

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

將React元素渲染到提供的DOM中，container并返回對組件的引用（或返回null無狀態(tài)組件）。

如果先前已將React元素渲染到container該元素中，則會對其執(zhí)行更新，并根據(jù)需要僅更改DOM以反映最新的React元素。

如果提供了可選的回調(diào)，它將在組件被渲染或更新后執(zhí)行。

注意：   ReactDOM.render()控制傳入的容器節(jié)點的內(nèi)容。當(dāng)?shù)谝淮握{(diào)用時，內(nèi)部的任何現(xiàn)有DOM元素都將被替換。后來的調(diào)用使用React的DOM差異算法進行高效更新。  ReactDOM.render()不修改容器節(jié)點（只修改容器的子節(jié)點）。將組件插入現(xiàn)有的DOM節(jié)點而不覆蓋現(xiàn)有的子組件可能是可能的。  ReactDOM.render()當(dāng)前返回對根ReactComponent實例的引用。但是，使用此返回值是遺留的，應(yīng)該避免，因為在某些情況下，未來版本的React可能會異步渲染組件。如果您需要對根ReactComponent實例的引用，則首選解決方案是將回調(diào)引用附加到根元素。運用ReactDOM.render()保證服務(wù)器渲染的容器已被棄用，并將在React 17中被移除hydrate()。

hydrate()

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

與之相同render()，但用于為其HTML內(nèi)容由其呈現(xiàn)的容器提供水合ReactDOMServer。React將嘗試將事件監(jiān)聽器附加到現(xiàn)有的標(biāo)記。

React期望服務(wù)器和客戶端之間呈現(xiàn)的內(nèi)容是相同的。它可以修補文本內(nèi)容的不同（例如時間戳），但您應(yīng)該將不匹配視為錯誤并修復(fù)它們。在開發(fā)模式中，React在水合期間警告不匹配。不能保證在不匹配的情況下修改屬性差異。這對于性能方面的原因很重要，因為在大多數(shù)應(yīng)用程序中，不匹配是很少見的，因此驗證所有標(biāo)記將會極其昂貴。

如果您故意需要在服務(wù)器和客戶端上渲染不同的東西，則可以執(zhí)行兩遍渲染。在客戶端上渲染不同內(nèi)容的組件可以讀取一個狀態(tài)變量this.state.isClient，如您可以設(shè)置的true那樣componentDidMount()。通過這種方式，初始渲染過程將呈現(xiàn)與服務(wù)器相同的內(nèi)容，從而避免不匹配，但是在水合之后還會同步發(fā)生額外的傳遞。請注意，這種方法會讓組件變得更慢，因為它們必須渲染兩次，所以請謹慎使用。

請記住注意慢速連接的用戶體驗。JavaScript代碼的加載時間可能比初始HTML呈現(xiàn)時間要晚得多，所以如果您在僅客戶端傳遞中呈現(xiàn)不同的內(nèi)容，則轉(zhuǎn)換可能會令人震驚。但是，如果執(zhí)行得當(dāng)，在服務(wù)器上渲染應(yīng)用程序的“shell”可能是有益的，并且僅顯示客戶端上的一些額外小部件。要了解如何在不出現(xiàn)標(biāo)記不匹配問題的情況下執(zhí)行此操作，請參閱前一段中的解釋。

unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

從DOM中刪除已安裝的React組件并清理其事件處理程序和狀態(tài)。如果容器中沒有安裝組件，則調(diào)用此函數(shù)不會執(zhí)行任何操作。返回true組件是否卸載以及false是否沒有組件卸載。

findDOMNode()

ReactDOM.findDOMNode(component)

如果此組件已裝入DOM，則會返回相應(yīng)的本地瀏覽器DOM元素。此方法對于從DOM中讀取值（如表單域值和執(zhí)行DOM測量）非常有用。在大多數(shù)情況下，您可以將一個ref附加到DOM節(jié)點，并避免使用findDOMNode。

當(dāng)組件呈現(xiàn)到null或false，findDOMNode返回null。當(dāng)組件呈現(xiàn)為字符串時，findDOMNode返回包含該值的文本DOM節(jié)點。從React 16開始，組件可能會返回一個帶有多個子元素的片段，在這種情況下findDOMNode將返回與第一個非空子元素相對應(yīng)的DOM節(jié)點。

注意：   findDOMNode是一個用于訪問底層DOM節(jié)點的逃生艙口。在大多數(shù)情況下，不鼓勵使用這個逃生艙口，因為它穿透了組件抽象。  findDOMNode僅適用于安裝的組件（即已放置在DOM中的組件）。如果你試圖調(diào)用此說尚未安裝（如調(diào)用組件findDOMNode()中render()，目前尚未將要創(chuàng)建的組件）的異常將被拋出。  findDOMNode不能用于功能組件。

createPortal()

ReactDOM.createPortal(child, container)

創(chuàng)建一個門戶。門戶提供了一種將子元素呈現(xiàn)到DOM組件層次結(jié)構(gòu)之外的DOM節(jié)點的方法。