React從入門到精通系列之(23)ReactDOM的用法

張亞濤發表於2016-12-16

二十三、ReactDOM用法

如果你使用script標籤引用React,那麼這些頂級API在全域性變數ReactDOM上可直接使用。如果你使用了ES6和npm,你可以這麼寫import ReactDOM from `react-dom`。如果你使用ES5和npm,你可以這寫var ReactDOM = require(`react-dom`)

總覽

react-dom包提供了DOM特定的方法,如果你需要,可以在你的應用中使用並作為一個互動獲取外面的React資料。 大多數你的元件不需要使用此模組。

  • render()

  • unmountComponentAtNode()

  • findDOMNode()

瀏覽器支援

React支援所有流行的瀏覽器,包括Internet Explorer 9及更高版本。

note
React無法在那些不支援ES5方法的舊版瀏覽器上執行,但如果頁面中包括諸如es5-shimes5-sham之類的polyfills,您就會發現您的應用在舊版瀏覽器中可以正常工作。當然,你對你自己選擇的路由完全的選擇權,我們也管不了你。。。


使用方法

render()

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

將React元素呈現到提供的container中的DOM中,並返回對元件的引用(或對無狀態元件返回null)。

如果React元素之前已經被渲染到容器中,這麼做會對它執行重新渲染操作,並且只需要根據需要修改DOM以返回最新的React元素。

如果提供了可選的回撥,它將在元件渲染或重新渲染後執行。

note
ReactDOM.render()用來控制傳入的container節點中的內容。當第一次呼叫時,內部的任何現有DOM元素都將被替換。 後面的操縱使用React的DOM diffing演算法來進行有效的更新。
ReactDOM.render()會修改container的內部DOM節點(只修改容器的子節點)。也可以將元件插入現有DOM節點中,而不覆蓋現有子項。


unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)

從DOM中刪除已安裝(mounted)React元件,並清除其event handle和state。 如果在container中沒有mounted元件,呼叫此函式什麼也不做。 如果元件被unmounted,則返回true,如果沒有要解除安裝的元件,則返回false。


findDOMNode()

ReactDOM.findDOMNode(component)

如果此元件已裝載到DOM中,則返回相應的html DOM元素。 此方法對於從DOM中讀取值(例如表單欄位值和執行DOM測量)很有用。當render返回nullfalse時,findDOMNode返回null

在大多數情況下,你可以使用refs處理DOM節點,並避免使用findDOMNode。

note
findDOMNode是一個用於訪問底層DOM節點的介面。 在大多數情況下,不建議使用此就介面。
findDOMNode僅適用於已安裝的元件(即已放置在DOM中的元件)。 如果你試圖在一個尚未安裝的元件上呼叫它(就像在一個尚未建立的元件render()方法裡呼叫findDOMNode()),將丟擲一個異常。
findDOMNode不能用於功能元件。

相關文章