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

概觀

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

• render()

• hydrate()

• unmountComponentAtNode()

• findDOMNode()

• createPortal()

瀏覽器支持

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

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

參考

render()

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

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

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

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

注意：   ReactDOM.render()控制傳入的容器節(jié)點(diǎn)的內(nèi)容。當(dāng)?shù)谝淮握{(diào)用時(shí)，內(nèi)部的任何現(xiàn)有DOM元素都將被替換。后來(lái)的調(diào)用使用React的DOM差異算法進(jìn)行高效更新。  ReactDOM.render()不修改容器節(jié)點(diǎn)（只修改容器的子節(jié)點(diǎn)）。將組件插入現(xiàn)有的DOM節(jié)點(diǎn)而不覆蓋現(xiàn)有的子組件可能是可能的。  ReactDOM.render()當(dāng)前返回對(duì)根ReactComponent實(shí)例的引用。但是，使用此返回值是遺留的，應(yīng)該避免，因?yàn)樵谀承┣闆r下，未來(lái)版本的React可能會(huì)異步渲染組件。如果您需要對(duì)根ReactComponent實(shí)例的引用，則首選解決方案是將回調(diào)引用附加到根元素。運(yùn)用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)容是相同的。它可以修補(bǔ)文本內(nèi)容的不同（例如時(shí)間戳），但您應(yīng)該將不匹配視為錯(cuò)誤并修復(fù)它們。在開發(fā)模式中，React在水合期間警告不匹配。不能保證在不匹配的情況下修改屬性差異。這對(duì)于性能方面的原因很重要，因?yàn)樵诖蠖鄶?shù)應(yīng)用程序中，不匹配是很少見的，因此驗(yàn)證所有標(biāo)記將會(huì)極其昂貴。

如果您故意需要在服務(wù)器和客戶端上渲染不同的東西，則可以執(zhí)行兩遍渲染。在客戶端上渲染不同內(nèi)容的組件可以讀取一個(gè)狀態(tài)變量this.state.isClient，如您可以設(shè)置的true那樣componentDidMount()。通過(guò)這種方式，初始渲染過(guò)程將呈現(xiàn)與服務(wù)器相同的內(nèi)容，從而避免不匹配，但是在水合之后還會(huì)同步發(fā)生額外的傳遞。請(qǐng)注意，這種方法會(huì)讓組件變得更慢，因?yàn)樗鼈儽仨氫秩緝纱危哉?qǐng)謹(jǐn)慎使用。

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

unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

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

findDOMNode()

ReactDOM.findDOMNode(component)

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

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

注意：   findDOMNode是一個(gè)用于訪問(wèn)底層DOM節(jié)點(diǎn)的逃生艙口。在大多數(shù)情況下，不鼓勵(lì)使用這個(gè)逃生艙口，因?yàn)樗┩噶私M件抽象。  findDOMNode僅適用于安裝的組件（即已放置在DOM中的組件）。如果你試圖調(diào)用此說(shuō)尚未安裝（如調(diào)用組件findDOMNode()中render()，目前尚未將要?jiǎng)?chuàng)建的組件）的異常將被拋出。  findDOMNode不能用于功能組件。

createPortal()

ReactDOM.createPortal(child, container)

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