Verwendung von React: Wie React die Benutzeroberfläche rendert

Dieser Artikel führt Sie in die Verwendung von React ein: Wie React die Benutzeroberfläche darstellt, hat einen bestimmten Referenzwert. Freunde in Not können sich darauf beziehen.

01. Die Art und Weise, wie React die Schnittstelle rendert

Vor dem Aufkommen großer Front-End-Frameworks wie React bestand die Art und Weise, wie wir UI-Elemente renderten, darin, String-Vorlagen zu verwenden . In React rendern wir UI-Elemente mithilfe von JavaScript-Objekten.

Wie wir im vorherigen Kapitel erwähnt haben, hat React das Konzept des virtuellen DOM vorgeschlagen, um die durch häufige DOM-Operationen verbrauchte Front-End-Leistung zu sparen. Das hier erstellte JavaScript-Objekt ist Virtueller DOM-Knoten wird verwendet, um zu beschreiben, „wie die Seite aussieht“. Wie wird „virtuelles DOM“ schließlich in „echtes DOM“ umgewandelt und im Browser angezeigt? Die komplexe Arbeit hier (Manipulation des DOM-Baums, Hinzufügen von Knoten) wird von React erledigt.

Sehen wir uns zunächst an, wie man einen virtuellen DOM-Knoten (d. h. ein React-Element) über ein JavaScript-Objekt erstellt:

// 为了创建一个 React 元素，我们需要使用 React.createElement API
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

Die API gibt schließlich ein JavaScript-Objekt im folgenden Format zurück:

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

React findet einen Platz für dieses JavaScript-Objekt im generierten virtuellen DOM-Baum und führt es schließlich mit dem realen DOM-Baum im Browser zusammen, um die Ansicht zu rendern.

In der tatsächlichen Entwicklung werden Sie jedoch selten die React.createElement-API verwenden, sondern React-Elemente wie folgt erstellen:

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

Diese Erstellungsmethode wird durch eine Methode namens JSX implementiert, die von implementiert wird Auf das Konzept von JSX werde ich hier nicht näher eingehen. Sie können es als einen prägnanten und effizienten Syntax-Zucker zum Erstellen von React-Elementen verstehen, der zum eleganteren Aufbau des virtuellen DOMs der gesamten Anwendung dient .

Es ist erwähnenswert, dass JSX nicht Teil des React-Frameworks ist (dies ergibt sich aus der Philosophie des Teilens und Herrschens in der React-Codeorganisation), sodass React nicht für die Zusammenführung des virtuellen DOM und des realen verantwortlich ist DOM. Konvertieren Sie in JSX-Syntax geschriebenen Code mithilfe der React.createElement-API in JavaScript-Objekte.

Wer macht das dann? Die Antwort lautet Babel. Normalerweise verwenden wir webpack, um unseren JavaScript-Code zu verpacken und ihn zur Übersetzung an Babel zu senden. Jetzt verstehen Sie, warum React, webpack und Babel immer zusammen wie siamesische Zwillinge erscheinen.

Bisher wissen wir bereits, wie man React-Elemente erstellt, aber tatsächlich „Erstellen“, bevor das Element tatsächlich im Browser angezeigt wird, und wir überprüfen auch den Schlüssel. Ein Schritt „render“.

Hier beschleunigen wir. Wenn wir das zuvor erstellte React-Element rendern möchten, müssen wir den folgenden Code verwenden:

<p id="root"></p>

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

// 使用 ReactDOM.render API
ReactDOM.render(
  element,
  document.getElementById('root')
);

Ja, das DOM-Element mit der ID root wird Wird zum Wurzelknoten des gesamten virtuellen DOM-Baums. Bisher beherrschen wir den gesamten Prozess der Konvertierung von React-Elementen in virtuelle DOM-Knoten und der anschließenden Darstellung der Elemente im Browser. Allerdings reicht die bloße Möglichkeit, React zum Rendern visueller Elemente zu verwenden, noch lange nicht aus, um den Wert von React zu erkennen. Vergessen Sie nicht, dass React als großes Front-End-Framework existiert (obwohl seine Komponenten im Vergleich zu anderen großen Front-End-Frameworks nicht vollständig sind). Der wahre Wert von React ist: Verwenden Sie React-Elemente, um verschiedene komplexe Aufgaben prägnant und effizient umsetzen .

Wie geht das? Die Antwort ist die Verwendung von React-Komponenten.

02. React-Komponenten

React-Komponenten geben uns nicht nur die Möglichkeit, eine Reihe visueller Elemente zu verpacken , sondern auch die Möglichkeit, eine Serie zu verpacken des entsprechenden interaktiven Verhaltens. Man kann sagen: React-Komponenten sind der Grundstein von React-Anwendungen.

Was ist also eine React-Komponente? Sie können sich vorstellen, dass eine React-Komponente wie eine Fabrik ist, die eine Reihe von Materialien namens Eigenschaften erhält und letztendlich React-Elemente/-Komponenten produziert (zurückgibt).

Anders ausgedrückt: Eine React-Komponente ist im Wesentlichen eine JavaScript-Funktion, die eine Reihe von Parametern empfängt und ein React-Element/eine React-Komponente zurückgibt. Mal sehen, wie es geschrieben ist:

import React form 'react'
import ReactDOM form 'react-dom'

function Button(props) {
    return <button>{props.buttonName}</button>
}

Sehen Sie, React-Komponenten entsprechen vollständig der zuvor erwähnten Komponentisierungsidee, indem sie Parameter empfangen und UI-Elemente zurückgeben.

Es ist eine gute Idee, beim Erstellen von React-Anwendungen in Komponenten zu denken, denn Komponentisierung bedeutet Modularität und Wiederverwendbarkeit. Komponentenklassen sind wie Instanzen einer Fabrik, die Komponenten herstellt. Diese Komponentenklassen entsprechen vollständig dem „Single-Response-Prinzip“ und dem „DOT“-Prinzip.

In der offiziellen Dokumentation von React handelt es sich bei einem großen Teil der React-API um Komponenten. Daher sind Komponenten ein sehr wichtiges Konzept in React. Im Wesentlichen sind Komponenten die Hauptkapselungseinheit, die uns von React gegeben wird. Durch Komponenten können wir schnell eine große Anwendung mit komplexer Interaktionslogik und visueller Schnittstelle wie Bausteinen erstellen, und jede visuelle Einheit in der Anwendung hat sehr klare Verantwortlichkeiten.

Hoffentlich können Sie an diesem Punkt den Wert von React beim Erstellen großer Anwendungen erkennen. Es ermöglicht uns, uns auf einen kleinen Teil der Anwendung zu konzentrieren, ohne den Rest der Anwendung (d. h. jede Komponente) im Einklang mit dem Prinzip „zu beeinträchtigen. hohe Kohäsion, geringe Kopplung"). Mit React ist es für uns einfacher, klaren und eleganten Code zu schreiben.

03. Zusammenfassung

Lassen Sie uns abschließend noch einmal die beiden Vorteile der Verwendung von Komponenten zum Rendern von Schnittstellen in React zusammenfassen:

1. Einfach zur Wiederverwendung : Wir können eine Komponente jederzeit und an jedem Ort aufrufen

2. Bequeme Anpassung : Indem wir Komponenten unterschiedliche Attribute geben, können wir verschiedene UI-Elemente erhalten ;

Verwandte Empfehlungen:

Verwendung von React: Fünf Hauptfunktionen des React-Frameworks

Einführung in responsive React Native Echarts-Komponenten

Das obige ist der detaillierte Inhalt vonVerwendung von React: Wie React die Benutzeroberfläche rendert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!