Heim > Web-Frontend > js-Tutorial > Hauptteil

Was ist React-Dom?

青灯夜游
Freigeben: 2020-11-30 15:23:12
Original
5588 Leute haben es durchsucht

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])
Nach dem Login kopieren

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 )
Nach dem Login kopieren

3. unmountComponentAtNode()

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

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

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

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage