Begriffe und Funktionalität in React.js

React.js, allgemein als React bezeichnet, ist eine leistungsstarke JavaScript-Bibliothek, die zum Erstellen von Benutzeroberflächen, insbesondere für Single-Page-Anwendungen (SPAs), verwendet wird. Es ermöglicht Entwicklern, komplexe Benutzeroberflächen zu erstellen, indem sie diese in kleinere, wiederverwendbare Komponenten zerlegen. Um die Leistungsfähigkeit von React voll auszuschöpfen, ist es wichtig, seine Kernbegriffe und Funktionalitäten zu verstehen. In diesem Artikel erläutern wir einige der wichtigsten Konzepte, Begriffe und Funktionen, die Sie bei der Arbeit mit React.js kennen müssen.

1. Komponenten

Funktionskomponenten:

Funktionskomponenten sind heute die gebräuchlichste Art, React-Komponenten zu definieren. Es handelt sich lediglich um JavaScript-Funktionen, die JSX (JavaScript XML) zurückgeben, das die Benutzeroberfläche darstellt. Funktionskomponenten können auch React Hooks verwenden, um Status und Nebenwirkungen zu verwalten.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Klassenkomponenten:

Vor der Einführung von React Hooks waren Klassenkomponenten die primäre Möglichkeit, den Komponentenstatus und die Lebenszyklusmethoden zu verwalten. Obwohl sie immer noch weit verbreitet sind, sind Funktionskomponenten mit Haken mittlerweile die bevorzugte Methode.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

2. JSX (JavaScript XML)

JSX ist eine Syntaxerweiterung für JavaScript, mit der Sie HTML-ähnlichen Code direkt in JavaScript schreiben können. React verwendet JSX, um zu beschreiben, wie die Benutzeroberfläche aussehen soll. Auch wenn es wie HTML aussieht, ist JSX unter der Haube in JavaScript kompiliert.

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

Sie können JavaScript-Ausdrücke auch in JSX einbetten, indem Sie sie in geschweifte Klammern einschließen:

const name = "React";
const element = <h1>Hello, {name}!</h1>;

3. Staat

State ist ein integriertes React-Objekt, das zum Speichern von Informationen über die aktuelle Situation einer Komponente verwendet wird. Jede Komponente kann ihren eigenen Status verwalten und neu rendern, wenn sich dieser Status ändert. Funktionskomponenten verwenden den useState-Hook, um den Status zu verwalten, während Klassenkomponenten das this.state-Objekt verwenden.

Beispiel mit useState (Funktionskomponente):

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Beispiel mit this.state (Klassenkomponente):

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

4. Requisiten (Eigenschaften)

Requisiten werden verwendet, um Daten von einer Komponente an eine andere weiterzugeben. Sie sind wie Funktionsargumente, die es Komponenten ermöglichen, miteinander zu kommunizieren. Requisiten sind schreibgeschützt und können von der empfangenden Komponente nicht geändert werden.

Beispiel:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="React" />;
}

In diesem Beispiel erhält die Welcome-Komponente die Namensstütze von der App-Komponente und rendert „Hello, React“.

5. Haken

Hooks sind Funktionen, mit denen Sie React-Status- und Lebenszyklusfunktionen in Funktionskomponenten „einbinden“ können. Die beiden am häufigsten verwendeten Haken sind:

useState:

Ermöglicht das Hinzufügen von Status zu Funktionskomponenten.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

useEffect:

Behandelt Nebenwirkungen wie Datenabruf, Abonnements oder manuelles Ändern des DOM nach jedem Rendern.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Andere häufig verwendete Hooks sind useContext, useReducer, useRef und useCallback.

6. Virtuelles DOM

React verwendet ein virtuelles DOM, eine schlanke Kopie des tatsächlichen DOM, um UI-Updates zu optimieren. Anstatt das reale DOM direkt zu manipulieren, aktualisiert React zunächst das virtuelle DOM und ermittelt dann die minimalen Änderungen, die erforderlich sind, um das tatsächliche DOM mit der virtuellen Version zu synchronisieren. Dieser Vorgang wird Abstimmung genannt und verbessert die Leistung erheblich, insbesondere bei großen Anwendungen.

7. Lebenszyklusmethoden (Klassenkomponenten)

Lebenszyklusmethoden sind spezielle Methoden in Klassenkomponenten, die es Ihnen ermöglichen, in verschiedene Lebensphasen einer Komponente einzubinden (Rendering, Aktualisierung und Unmounten). Zu den wichtigen Lebenszyklusmethoden gehören:

• componentDidMount(): Wird einmal aufgerufen, nachdem die Komponente im DOM gemountet wurde. Wird für den ersten Datenabruf oder für Abonnements verwendet.

• componentDidUpdate(): Wird nach jedem erneuten Rendern aufgerufen. Wird verwendet, um Aktualisierungen basierend auf Status- oder Requisitenänderungen durchzuführen.

• componentWillUnmount(): Wird aufgerufen, kurz bevor eine Komponente aus dem DOM entfernt wird. Wird für Bereinigungsaufgaben wie das Abbrechen von API-Aufrufen oder das Entfernen von Ereignis-Listenern verwendet.

In Funktionskomponenten können Sie die gleiche Funktionalität mit useEffect erreichen.

8. Bedingtes Rendering

In React können Sie Komponenten oder Elemente basierend auf Zustand oder Requisiten bedingt rendern. Die gebräuchlichste Methode ist die Verwendung des ternären Operators von JavaScript.

Beispiel:

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

Andere Ansätze zur bedingten Darstellung umfassen die Verwendung von if-Anweisungen oder das Kurzschließen (&&) in JSX.

9. Listen und Schlüssel

In React werden Listen von Elementen mit der Methode .map() erstellt. Jedes Element in einer Liste sollte über eine eindeutige „Schlüssel“-Requisite verfügen, um React dabei zu helfen, das Rendering zu optimieren.

Beispiel:

const name = "React";
const element = <h1>Hello, {name}!</h1>;

Schlüssel sollten eindeutig und stabil sein und React dabei helfen, zu erkennen, welche Elemente geändert, hinzugefügt oder entfernt wurden.

10. Formulare und kontrollierte Komponenten

In React werden Formulare normalerweise mithilfe gesteuerter Komponenten verarbeitet, wobei Formularelemente (wie Eingaben) durch den React-Status gesteuert werden. Dadurch kann React den Wert von Formularelementen vollständig steuern.

Beispiel:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

In diesem Beispiel wird der Wert der Eingabe durch den React-Status gesteuert, wodurch sichergestellt wird, dass jede Änderung im Eingabefeld in Echtzeit erfasst wird.

11. Kontext-API

Mit der Kontext-API können Sie Status oder Daten zwischen Komponenten teilen, ohne Requisiten manuell auf jeder Ebene weitergeben zu müssen (auch als „Prop-Drilling“ bekannt). Dies ist besonders nützlich, wenn Sie globale Daten (wie Benutzerauthentifizierung oder Designeinstellungen) in Ihrer gesamten App übergeben müssen.

Beispiel:

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Abschluss

React.js bietet eine breite Palette an Funktionen und Begriffen, die es zu meistern gilt. Von den Grundlagen von Komponenten, JSX, Status und Requisiten bis hin zu fortgeschritteneren Konzepten wie Hooks, Kontext und Lebenszyklusmethoden bietet React ein flexibles und skalierbares Framework für die Erstellung moderner Webanwendungen. Wenn Sie diese Schlüsselkonzepte und -begriffe verstehen, können Sie das volle Potenzial von React ausschöpfen und robuste, wartbare und dynamische Benutzeroberflächen erstellen.

Das obige ist der detaillierte Inhalt vonBegriffe und Funktionalität in React.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!