Was macht React-Dom?

Die Funktion von „react-dom“ besteht darin, das virtuelle DOM in ein Dokument zu rendern und es in ein tatsächliches DOM umzuwandeln. „React-dom“ ist ein Toolkit, das bei der Entwicklung von Reaktionsprojekten verwendet werden muss Methoden, die in der Anwendung verwendet werden können, können aber auch als Schnittstelle für spezielle Operationen im DOM außerhalb des React-Modells verwendet werden.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Welche Rolle spielt React-Dom? Wenn Sie React zum Entwickeln einer Webseite verwenden, werden zwei Pakete heruntergeladen, eines ist React und das andere ist React-Dom. Das React-Paket ist der Kerncode von React und React -dom wird aus React entfernt. Der Teil, der die DOM-Manipulation beinhaltet.

Die Kernidee von React ist das virtuelle DOM. React umfasst die Funktion „react.createElement“, die virtuelles DOM generiert, und die Component-Klasse. Wenn wir Komponenten selbst kapseln, müssen wir die Komponentenklasse erben, um Lebenszyklusfunktionen usw. verwenden zu können. Die Kernfunktion des React-Dom-Pakets besteht darin, diese virtuellen DOMs in Dokumente zu rendern und sie in tatsächliche DOMs umzuwandeln.

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.

react-dom enthält hauptsächlich drei APIs: findDOMNode, unmountComponentAtNode und render. Das Folgende wird in der Reihenfolge der Auslösung eingeführt.

1. render

render wird verwendet, um das von React gerenderte virtuelle DOM im Browser-DOM zu rendern. Diese Methode bindet das Element in den Container ein und gibt die Instanz des Elements zurück (d. h. die Refs-Referenz). Wenn es sich um eine zustandslose Komponente handelt, gibt render null zurück. Wenn die Komponente geladen ist, wird der Rückruf aufgerufen. Die Syntax lautet:

render(ReactElement element,DOMElement container,[function callback])

Zum Beispiel:

import React from 'react'
import ReactDOM from 'react-dom'
import Router from './router'
import { Provider } from 'react-redux'
import store from './store'
// Provider react-redux的内容
ReactDOM.render(
  <Provider store={store}>
    <Router/>
  </Provider>, document.getElementById(&#39;root&#39;))

2, findDOMNode

findDOMNode wird verwendet, um das echte DOM-Element abzurufen, um auf dem DOM-Knoten zu arbeiten.

Davor müssen Sie zunächst wissen: In React wird das virtuelle DOM nach dem Mounten der Komponente (render()) tatsächlich zu HTML hinzugefügt und in ein echtes DOM konvertiert, sodass wir die beiden Methoden ComponentDidMount und ComponentDidUpdate Get verwenden können. Ein Beispiel ist wie folgt:

import { findDOMNode } from 'react-dom';
<Example ref={ node=>{ this.node = node} }> // 利用ref获取Example组件的实例
const dom = findDOMNode(this.node); // 通过findDOMNode获取实例对应的真实DOM

Hinweis: Wenn es um komplexe Vorgänge geht, stehen viele Element-DOM-APIs zur Verfügung. DOM-Vorgänge haben jedoch große Auswirkungen auf die Leistung, daher sollten DOM-Vorgänge minimiert werden.

3. unmountComponentAtNode

unmountComponentAtNode wird zum Ausführen von Unmount-Vorgängen verwendet und vor ComponentWillUnmount ausgeführt.

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

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