二十三、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-shim
和es5-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
返回null
或false
時,findDOMNode
返回null
。
在大多數情況下,你可以使用refs處理DOM節點,並避免使用findDOMNode。
note
findDOMNode
是一個用於訪問底層DOM節點的介面。 在大多數情況下,不建議使用此就介面。findDOMNode
僅適用於已安裝的元件(即已放置在DOM中的元件)。 如果你試圖在一個尚未安裝的元件上呼叫它(就像在一個尚未建立的元件render()
方法裡呼叫findDOMNode()
),將丟擲一個異常。findDOMNode
不能用於功能元件。