Einseitige Datenbindung in React

1. Einseitige Datenbindung in React
2. Datenbindung in eine Richtung vs. Datenbindung in zwei Richtungen in React

Derzeit haben Front-End-Entwickler drei Möglichkeiten zum Erstellen von Webanwendungen: React-, Vue- und Angular-JavaScript-Frameworks. Diese Frameworks haben viele Gemeinsamkeiten, unterscheiden sich aber auch in wichtigen Punkten.

In diesem Artikel werden wir die unidirektionale Datenbindung in React besprechen. Dies ist eines der Unterscheidungsmerkmale der React-Bibliothek, die die Struktur und Funktionalität von React-Webanwendungen beeinflusst.

Einseitige Datenbindung in React

Im Gegensatz zu anderen JavaScript-Frameworks verfügt React nicht über eine Funktion, um den Wert des DOM-Eingabeelements mit einer Zustandsvariablen zu verknüpfen. Durch die Eingabe neuer Zeichen in das Element wird die Zustandsvariable nicht automatisch aktualisiert.

Die Struktur von React-Komponenten ist normalerweise in JSX geschrieben, das eine HTML-ähnliche Syntax mit zusätzlichen dynamischen Funktionen hat.

Um den Zustand als Reaktion auf die Aktionen des Benutzers zu aktualisieren, müssen Sie einen Ereignishandler definieren und das Attribut so einstellen, dass der Ereignishandler als Reaktion auf die Aktionen des Benutzers ausgeführt wird.

export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <h2>{value}</h2>
    </div>
  );
}

In diesem Beispiel lösen die Aktionen des Benutzers den Ereignishandler onChange aus, der die Zustandsvariable aktualisiert. Dann können Sie diesen Wert als <h2>-Tag anzeigen.

Datenbindung in eine Richtung vs. Datenbindung in zwei Richtungen in React

Vergleich von React, Angular und Vue, die beide eine bidirektionale Datenbindung haben.

Sie können sich die bidirektionale Bindung so vorstellen, dass eine bidirektionale Verbindung zwischen einer Eingabe (DOM-Element) und Daten eingerichtet wird, sodass bei jeder Aktualisierung auch eine andere aktualisiert wird.

Beispielsweise können Sie in Vue einen Wert des Eingabeelements mit einem Statuswert verknüpfen. Wenn Sie es ändern, wird auch der Wert im Eingabeelement geändert.

Auch die Eingabe von mehr Zeichen in das Eingabeelement ändert den Zustandswert.

In React gibt es keine Möglichkeit, eine direkte Beziehung zwischen dem Wert des Eingabe-DOM-Elements und dem Status herzustellen. Sie können Ereignishandler einrichten, um den Status zu aktualisieren, wenn neue Eingaben vom Benutzer erkannt werden.

Typischerweise ändert eine Zustandsänderung nicht den Wert im <Input>-Element.

Schauen wir uns dieses Beispiel an.

import "./styles.css";
import { useState } from "react";
export default function App() {
  const [value, setValue] = useState("");
  return (
    <div className="App">
      <input type="text" onChange={(e) => setValue(e.target.value)} />
      <h2>{value}</h2>
      <button onClick={() => setValue(value.concat(value))}>
        Double the Text
      </button>
    </div>
  );
}

Hier haben wir ein <input>-Element, dessen interner Wert nicht an eine Zustandsvariable gebunden ist. Jedes Mal, wenn der Benutzer ein Zeichen eingibt, führt React jedoch die Event-Handler aus und setzt die Zustandsvariable value gleich der Benutzereingabe.

Dies wird demonstriert, wenn wir die Zustandsvariable als Header <h2> ausgeben.

Wir haben auch einen Button mit der Aufschrift Double the Text. Durch Klicken auf diese Schaltfläche wird eine andere Funktion ausgeführt, die die Zustandsvariable aktualisiert, indem sie hinzugefügt wird.

Gehen Sie zu dieser CodeSandbox-Demo, um den Code besser zu verstehen. Wenn Sie die Schaltfläche verwenden, um den Statuswert zu ändern, wirkt sich dies nicht auf das Eingabeelement aus.

Der Grund dafür ist, dass React keine bidirektionale Datenbindung zwischen dem Eingabeelement und der Zustandsvariablen hat.