Sehen Sie, wie Sie durch die Java-Linse reagieren

Während wir in unserem Coding-Bootcamp React durchliefen und durch unsere Labore schwitzten, sagte unser Ausbilder: „Wenn Sie schielen, ist React Java sehr ähnlich.“

Zuerst war es nur ein eingängiger und lustiger Satz. ? Zuletzt habe ich mich React jedoch noch einmal angeschaut, als ich an einem persönlichen Google Map-Rechnerprojekt arbeitete. Tage später konnte ich sehen, wie einige dieser Ähnlichkeiten ans Licht kamen.

Lassen Sie uns in diese Zusammenhänge eintauchen und sehen, wie die grundlegenden Konzepte von Java unser Verständnis von React erhellen können. ?

Inhaltsverzeichnis

1. App.jsx als Java-Hauptklasse (psvm)

2. Zustandsverwaltung mit Hooks als Java-Getter und -Setter

3. Container als Java-Klassen

4. Komponenten als Java-Methoden

5. Reacts Rückkehr in Komponenten

6. Requisiten als Java-Methodenparameter

7. Callback-Funktionen als Java-Methoden, die Werte zurückgeben

---

1. App.jsx als Java-Hauptklasse (psvm)

Java:

In Java dient die Hauptklasse als Einstiegspunkt für das Programm und initiiert die Ausführung des Programms.

Zum Beispiel könnten Sie Objekte verschiedener Klassen instanziieren und ihre jeweiligen Methoden aufrufen:

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

Reagieren:

In ähnlicher Weise spielt die App.jsx-Datei in einer React-Anwendung eine vergleichbare Rolle, indem sie den Hauptanwendungsfluss orchestriert.

So wie die Hauptmethode in Java mehrere Funktionen aufrufen kann, ist App.jsx für die Darstellung aller Komponenten basierend auf dem Routing und dem aktuellen Status der Anwendung verantwortlich.

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Im obigen React-Beispiel von App.jsx spiegeln die in der Return-Anweisung gerenderten Komponenten den Prozess des Methodenaufrufs oder der Initialisierung von Objekten in Java wider.

In diesem Fall sind die Container und Seiten werden basierend auf dem URL-Pfad der Webseite gerendert.

---

2. Zustandsverwaltung mit Hooks als Java-Getter und -Setter

Java:
In Java verwalten Sie Eigenschaften mit Variablen und öffentlichen Getter/Setter-Methoden, um Eigenschaften von Attributen abzurufen und festzulegen, beispielsweise den Benutzernamen eines Benutzers.

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

Reagieren:

Reacts useState-Hooks behandeln den Anwendungsstatus ähnlich wie Java Getter- und Setter-Methoden zum Verwalten von Objekteigenschaften verwendet.

Mit dem useState-Hook in React können Sie Zustandsvariablen deklarieren, die sich im Laufe der Zeit ändern können, ähnlich wie Javas Instanzvariablen in einer Klasse.

const [username, setUsername] = useState("");

Im Beispiel oben:

• setUserName dient als Setter-Methode und ermöglicht Aktualisierungen des Benutzernamens. Während useState("") bedeutet, dass der Benutzername als leere Zeichenfolge initialisiert wird, aktualisiert setUserName den Wert.

Unten haben wir eine Funktion handleInputChange, die eine Änderung in einem Webformular erkennt, um Benutzerinformationen zu aktualisieren und den Wert des Benutzernamens entsprechend den Benutzereingaben aktualisiert.

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

• Sie können sich den Zugriff auf den Benutzernamen als Getter vorstellen.

Immer wenn Sie in einer Komponente auf den Benutzernamen verweisen, verwenden Sie effektiv einen Getter, um auf seinen Wert zuzugreifen. Beispielsweise könnte meine Webseite den Benutzernamen wie folgt wiedergeben:

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

---

3. Container als Java-Klassen

Java:
In Java gruppieren Klassen zusammengehörige Aufgaben und Daten. Sie helfen bei der Verwaltung des Informationsflusses in Ihrer Anwendung.

In diesem Beispiel verarbeitet die Calculator-Klasse Berechnungen und speichert das Ergebnis.

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

Reagieren:

In ähnlicher Weise spielen Container in React eine Schlüsselrolle, indem sie die Daten der Anwendung mit den Komponenten verbinden. Sie kümmern sich um Dinge wie das Abrufen von Daten aus API-Aufrufen und die Verwaltung des App-Status.

In diesem Beispiel verwaltet der Rechnercontainer den Status des Eingabewerts und des Ergebnisses

const [username, setUsername] = useState("");

---

4. Komponenten als Java-Methoden

Java:

Methoden in Java führen bestimmte Aktionen aus, beispielsweise die Verarbeitung von Benutzereingaben. Diese Methoden können nach Bedarf aufgerufen werden, um verschiedene Funktionalitäten in Ihrer Anwendung zu ermöglichen.

const handleInputChange = (event) => { 
    setUserName(event.target.value);
};

Reagieren:

So wie Java-Methoden kleine, fokussierte Aufgaben sind, erfüllen React-Komponenten einen ähnlichen Zweck und fungieren als grundlegende Bausteine ​​Ihrer Benutzeroberfläche.

Jede Komponente ist für eine bestimmte Funktionalität konzipiert und kann in der gesamten Anwendung wiederverwendet werden.

Die unten stehende ManualFilter-Komponente konzentriert sich ausschließlich auf Filteroptionen für Benutzer. Es enthält Kontrollkästchen, mit denen Benutzer bestimmte Kategorien auswählen können.

Diese Komponente kann dann innerhalb einer UserForm-Containerseite aufgerufen werden.

  <p>Welcome to our page {username}</p>

---

5. Die Rückkehr von React in Komponenten

Java:

In Java kann eine Methode einen Wert zurückgeben, den ein anderer Teil des Programms zum Generieren einer Ausgabe verwendet.

Zum Beispiel gibt die renderOutput-Methode eine Zeichenfolge mit dem Ziel des Benutzers zurück, die dann an anderer Stelle im Programm angezeigt werden kann.

public class Calculator {
    private int result;

    public void calculateSum(int a, int b) {
        result = a + b;
    }

    public int getResult() {
        return result;
    }
}

Reagieren:

Die Return-Anweisung in React-Komponenten ist für die Darstellung der Benutzeroberfläche von entscheidender Bedeutung. In React bestimmt das, was Sie von einer Komponente zurückgeben, was der Benutzer auf dem Bildschirm sieht.

Dies ähnelt der oben erwähnten Methode in Java, die Daten zurückgibt, die zur Verarbeitung oder Anzeige in einem anderen Teil des Programms bestimmt sind.

In diesem Beispiel gibt die UserGoal-Komponente ein Absatzelement zurück, das das Ziel des Benutzers anzeigt.

public class Main {
    public static void main(String[] args) {
        Home home = new Home();
        home.render();
        About about = new About();
        about.show();
    }
}

---

6. Requisiten als Java-Methodenparameter

Java:

Sie können Argumente an eine Java-Methode übergeben, wobei die Argumente den Zustand oder das Verhalten des aufrufenden Objekts beeinflussen können.

Stellen Sie sich zum Beispiel eine einfache Java-Methode vor, die eine Nachricht als Parameter akzeptiert. Die empfangene Nachricht wirkt sich darauf aus, was die Konsole anzeigt.

<Routes>
  <Route exact path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
</Routes>

Reagieren:

In React können Komponenten Requisiten erhalten, die Parametern in Java-Methoden ähneln. Reaktionskomponenten verwenden Requisiten, um ihren Inhalt und ihre Funktionalität zu bestimmen.

Requisiten steuern, wie sich Komponenten verhalten und welche Daten sie anzeigen.

Angenommen, wir haben eine übergeordnete Komponente namens WelcomePage, die eine Nachricht an die untergeordnete MessageDisplay-Komponente weiterleitet.

Mit anderen Worten, stellen Sie sich ein MessageDisplay als einen Abschnitt auf der WelcomePage-Landingpage vor, in dem eine Nachricht angezeigt wird.

Wir können eine Nachricht in der übergeordneten Komponente definieren und sie als Requisite an die MessageDisplay-Komponente übergeben:

private String username;

public String getUsername() {
    return this.username;
}

public void setUserData(String username) {
    this.username = username;
}

Die MessageDisplay-Komponente empfängt diese Requisite und rendert sie:

const [username, setUsername] = useState("");

---

7. Callback-Funktionen als Java-Methoden, die Werte zurückgeben

Java:

In Java gibt es oft Methoden innerhalb von Klassen, die bestimmte Aktionen ausführen und Werte an ihren Aufrufer zurückgeben. Beispielsweise könnten Sie eine Klasse namens Calculator mit einer Methode haben, die die Differenz zwischen zwei Zahlen berechnet:

const handleInputChange = (event) => { 
    setUserName(event.target.value);
};

^In einer anderen Klasse erstellen Sie eine Instanz der Calculator-Klasse und rufen diese Methode auf.

Reagieren:

React folgt einem ähnlichen Konzept, konzentriert sich jedoch auf die Beziehung zwischen Komponenten.

Wenn Sie über eine übergeordnete Komponente verfügen, die untergeordnete Komponenten enthält, erleichtern Rückruffunktionen die Kommunikation zwischen ihnen. (Denken Sie daran: „Parent“ ist ein Hauptcontainer, der die anderen Komponenten enthält – ähnlich unserem früheren Beispiel einer übergeordneten „Landingpage“ mit einer Unterkomponente eines Nachrichtenfelds)

Angenommen, Sie haben eine untergeordnete Komponente, die einige berechnete Daten an ihre übergeordnete Komponente zurücksenden muss.

Im Folgenden übergeben wir die handleCalculationResult-Funktion vom übergeordneten Element an das untergeordnete Element als Requisite.

Diese Funktion verhält sich wie ein Rückruf:

  <p>Welcome to our page {username}</p>

Sie können unten sehen, wie onCalculate eine Rückruffunktion ist, die in der ChildComponent von der übergeordneten Komponente empfangen wird.

Wenn auf die Schaltfläche in ChildComponent geklickt wird, führt es die Berechnung durch und verwendet onCalculate, um das Ergebnis an das übergeordnete Element zurückzusenden. Dies ahmt nach, wie Java-Methoden Werte an ihre Aufrufer zurückgeben.

public class Calculator {
    private int result;

    public void calculateSum(int a, int b) {
        result = a + b;
    }

    public int getResult() {
        return result;
    }
}

Auf diese Weise verwaltet der Elternteil den gesamten Anwendungsstatus und das Verhalten, während sich das Kind auf eine bestimmte Aktion (in diesem Fall die Berechnung) konzentriert.

Das obige ist der detaillierte Inhalt vonSehen Sie, wie Sie durch die Java-Linse reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!