首頁 >web前端 >js教程 >react-dom是什麼

react-dom是什麼

青灯夜游
青灯夜游原創
2020-11-11 11:59:055618瀏覽

react-dom是react開發專案時需要使用的工具包,是一種針對dom的平台實現,主要用於在web端進行渲染。 react-dom套件提供了DOM特定的方法,可以在應用程式的頂層使用,也可以作為React模型之外的特殊操作DOM的介面。

react-dom是什麼

使用react開發網頁的話,我們難免會下載兩個套件,一個是react,一個是react-dom,其中react是react的核心程式碼。

react-dom 的package 提供了可在應用頂層使用的DOM(DOM-specific)方法,react-dom 套件提供了DOM 特定的方法,可以在你的應用程式的頂層使用,如果有需要,你可以把這些方法用於React 模型以外的地方,作為React模型以外的特殊操作DOM的介面。不過一般情況下,大部分組件都不需要使用這個模組。

如果你使用 npm 和 ES6,你可以用 import ReactDOM from 'react-dom'來引入。如果你使用 npm 和 ES5,你可以用 var ReactDOM = require('react-dom')來引入。

react-dom的五個介面

1、render()

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

在提供的container 裡渲染一個React 元素,並傳回對該元件的參考(或針對無狀態元件傳回null)。

如果 React 元素之前已經在 container 中渲染過,這將會對其執行更新操作,並僅在必要時更改 DOM 以映射最新的 React 元素。

如果提供了可選的回呼函數,則該回呼將在元件被渲染或更新之後執行。

2、hydrate()

ReactDOM.render(element, container[, callback])
// 渲染一个 React 元素到由 container 提供的 DOM 中,并且返回组件的一个 引用(reference) (或者对于 无状态组件 返回 null )

3、unmountComponentAtNode()

ReactDOM.unmountComponentAtNode(container)
// 从 DOM 中移除已装载的 React 组件,并清除其事件处理程序和 state 。 如果在容器中没有挂载组件,调用此函数什么也不做。 如果组件被卸载,则返回 true ,如果没有要卸载的组件,则返回 false

4、findDOMNode()不建議使用

ReactDOM.findDOMNode(component)
// 如果组件已经被装载到 DOM 中,这将返回相应的原生浏览器 DOM 元素。在大多数情况下,你可以绑定一个 ref 到 DOM 节点上,从而避免使用findDOMNode。

5、createPortal() 這個很有用處,啊啊啊!

ReactDOM.createPortal(child, container)
// 创建一个 插槽(portal) 。 插槽提供了一种方法,可以将子元素渲染到 DOM 组件层次结构之外的 DOM 节点中

更多程式相關知識,請造訪:程式設計入門! !

以上是react-dom是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn