Heim >Web-Frontend >js-Tutorial >Was ist React-Dom?

Was ist React-Dom?

青灯夜游
青灯夜游Original
2020-11-11 11:59:055620Durchsuche

react-dom ist ein Toolkit, das bei der Entwicklung von React-Projekten verwendet werden muss. Es handelt sich um eine Plattformimplementierung für dom, die hauptsächlich zum Rendern auf der Webseite verwendet wird. Das Paket „react-dom“ stellt DOM-spezifische Methoden bereit, die auf der obersten Ebene der Anwendung oder als Schnittstelle für spezielle Operationen am DOM außerhalb des React-Modells verwendet werden können.

Was ist React-Dom?

Wenn wir React zum Entwickeln von Webseiten verwenden, laden wir zwangsläufig zwei Pakete herunter, eines ist React und das andere React-Dom, wobei React der Kerncode von React ist.

Das React-Dom-Paket stellt DOM-Methoden (DOM-spezifisch) bereit, die auf der obersten Ebene Ihrer Anwendung verwendet werden können Bei Bedarf können Sie diese Methoden außerhalb des React-Modells als Schnittstellen für spezielle Operationen im DOM außerhalb des React-Modells verwenden. Im Allgemeinen müssen die meisten Komponenten dieses Modul jedoch nicht verwenden.

Wenn Sie npm und ES6 verwenden, können Sie es mit import ReactDOM from 'react-dom'进行引入。如果你使用 npm 和 ES5,你可以用 var ReactDOM = require('react-dom') importieren.

Fünf Schnittstellen von React-Dom

1. render()

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

Rendert ein React-Element im bereitgestellten Container und gibt einen Verweis auf die Komponente zurück (oder gibt null für zustandslose Komponenten zurück).

Wenn das React-Element bereits zuvor im Container gerendert wurde, wird dadurch ein Aktualisierungsvorgang durchgeführt und das DOM nur bei Bedarf geändert, um das neueste React-Element abzubilden.

Wenn eine optionale Rückruffunktion bereitgestellt wird, wird der Rückruf ausgeführt, nachdem die Komponente gerendert oder aktualisiert wurde.

2. hydrate()

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

3. unmountComponentAtNode()

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

5. createPortal() Das ist sehr nützlich, ahhh!

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

Weitere Kenntnisse zum Thema Programmierung finden Sie unter: Einführung in die Programmierung! !

Das obige ist der detaillierte Inhalt vonWas ist React-Dom?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel:Was sind jQuery und Zepto?Nächster Artikel:Was sind jQuery und Zepto?