React-Element-Rendering

In React 18 gibt es einige Änderungen beim Rendern von Elementen im Vergleich zu früheren Versionen, insbesondere bei Verwendung vonReactDOM.createRootund den neuen Concurrent-Features. Unten finden Sie ein detailliertes Beispiel und eine Erklärung, die zeigen, wie Elemente in React 18 gerendert werden.

Beispiel

import React from 'react';
import ReactDOM from 'react-dom/client';

// Eine einfache React-Komponente erstellen
function App() {
    return <h1>Hallo, React 18!</h1>;
}

// DOM-Container mit id "example" abrufen und einen React-Wurzelknoten erstellen
const root = ReactDOM.createRoot(document.getElementById("example"));

// React-Komponente in den Wurzelknoten im DOM rendern
root.render(<App />);

React-Elemente sind die kleinsten Bausteine von React-Anwendungen. Sie beschreiben, was auf dem Bildschirm angezeigt werden soll. React-Elemente sind unveränderliche Objekte; einmal erstellt, können sie nicht geändert werden.

const element = <h1>Hello, world!</h1>;

Anders als Browser-DOM-Elemente sind Elemente in React tatsächlich einfache Objekte. React DOM stellt sicher, dass der Dateninhalt des Browser-DOM mit den React-Elementen konsistent bleibt.

Rendern eines Elements in das DOM

Zuerst fügen wir einid="example"von<div> hinzu:

<div id="example"></div>

Der gesamte Inhalt innerhalb dieses div wird von React DOM verwaltet, daher nennen wir ihn den "root"-DOM-Knoten.

Bei der Entwicklung von Anwendungen mit React definieren wir normalerweise nur einen Wurzelknoten. Wenn Sie React jedoch in ein bestehendes Projekt integrieren, müssen Sie möglicherweise React-Wurzelknoten separat in verschiedenen Teilen definieren.

Um ein React-Element in den Wurzel-DOM-Knoten zu rendern, übergeben wir sie alle an dieroot.render()Methode, um es auf der Seite zu rendern:

Beispiel

//Ein React-Element erstellen const element =<h1>Hello, world!</h1>; //DOM-Container abrufen und einen Wurzelknoten erstellen const root = ReactDOM.createRoot(document.getElementById("example")); //Das React-Element in den Wurzelknoten im DOM rendern root.render(element);

Ausprobieren »

root.renderDie Methode rendert das Element in den zuvor erstellten Root-Knoten, sodass das Element innerhalb des DOM-Elements mit der ID "example" angezeigt wird.

Aktualisieren des Element-Renderings

React-Elemente sind unveränderlich. Sobald ein Element erstellt wurde, können Sie seinen Inhalt oder seine Attribute nicht ändern.

Der einzige Weg, die UI zu aktualisieren, besteht darin, ein neues Element zu erstellen und es an die Methode ReactDOM.render() zu übergeben:

Schauen wir uns dieses Timer-Beispiel an:

Beispiel

const root = ReactDOM.createRoot(document.getElementById("example")); function tick() { const element = ( <div> <h1>Hallo, Welt!</h1> <h2>Es ist jetzt{new Date().toLocaleTimeString()}.</h2> </div> ); root.render(element); } setInterval(tick, 1000);

Ausprobieren »

Das obige Beispiel ruft ReactDOM.render() einmal pro Sekunde mit der Methode setInterval() auf.

Wir können den anzuzeigenden Teil kapseln; das folgende Beispiel verwendet eine Funktion, um ihn darzustellen:

Beispiel

function Clock(props) { return ( <div> <h1>Hallo, Welt!</h1> <h2>Es ist jetzt{props.date.toLocaleTimeString()}.</h2> </div> ); } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

Ausprobieren »

Zusätzlich zu Funktionen können wir auch eine ES6-Klasse von React.Component erstellen, die die anzuzeigenden Elemente kapselt. Beachten Sie, dass Sie in der render()-Methodethis.props verwenden müssen,umprops zu ersetzen：

Beispiel

class Clock extends React.Component { render() { return ( <div> <h1>Hallo, Welt!</h1> <h2>Es ist jetzt{this.props.date.toLocaleTimeString()}.</h2> </div> ); } } function tick() { const root = ReactDOM.createRoot(document.getElementById("example")); root.render( <Clock date={new Date()} /> ); } setInterval(tick, 1);

Ausprobieren »

React aktualisiert nur das Notwendige

Es ist erwähnenswert, dass React DOM zuerst die Unterschiede im Elementinhalt vorher und nachher vergleicht und beim Rendern nur die Teile aktualisiert, die sich geändert haben.

Andere Erweiterungen