voir réagir à travers l'objectif Java

Lors de notre bootcamp de codage, alors que nous parcourions React et transpirions dans nos laboratoires, notre instructeur disait : "Si vous louchez, React ressemble beaucoup à Java."

Au début, c'était juste une phrase accrocheuse et drôle. ? Cependant, plus récemment, j'ai revisité React alors que je travaillais sur un projet personnel de calculatrice Google Map. Au fil des jours, je pourrais commencer à voir certaines de ces similitudes apparaître.

Plongeons dans ces connexions et voyons comment les concepts fondamentaux de Java peuvent éclairer notre compréhension de React. ?

Table des matières

1. App.jsx comme classe principale Java (psvm)

2. Gestion de l'état avec des hooks en tant que getters et setters Java

3. Conteneurs en tant que classes Java

4. Composants en tant que méthodes Java

5. Le retour de React en composants

6. Props en tant que paramètres de méthode Java

7. Fonctions de rappel en tant que méthodes Java qui renvoient des valeurs

---

1. App.jsx comme classe principale Java (psvm)

Java :

En Java, la classe principale sert de point d'entrée au programme et initie l'exécution du programme.

Par exemple, vous pouvez instancier des objets de différentes classes et invoquer leurs méthodes respectives :

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

Réagissez :

De même, dans une application React, le fichier App.jsx joue un rôle comparable en orchestrant le flux principal de l'application.

Tout comme la méthode principale de Java peut appeler plusieurs fonctions, App.jsx est responsable du rendu de tous les composants en fonction du routage et de l'état actuel de l'application.

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

Dans l'exemple React ci-dessus d'App.jsx, les composants rendus dans l'instruction return reflètent le processus d'appel de méthodes ou d'initialisation d'objets en Java.

Dans ce cas, les conteneurs et les pages sont rendues en fonction du chemin de l'URL de la page Web.

---

2. Gestion de l'état avec des hooks en tant que getters et setters Java

Java :
En Java, vous gérez les propriétés avec des variables et des méthodes getter/setter publiques pour obtenir et définir les propriétés des attributs, telles que le nom d'utilisateur d'un utilisateur.

private String username;

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

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

Réagissez :

Les hooks useState de React gèrent l’état de l’application de la même manière que Java utilise les méthodes getter et setter pour gérer les propriétés des objets.

Le hook useState dans React vous permet de déclarer des variables d'état qui peuvent changer au fil du temps, un peu comme les variables d'instance Java dans une classe.

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

Dans l'exemple ci-dessus :

• setUserName sert de méthode de définition, permettant les mises à jour du nom d'utilisateur. Alors que useState("") signifie que le nom d'utilisateur est initialisé comme une chaîne vide, setUserName met à jour la valeur.

Ci-dessous, nous avons une fonction handleInputChange qui détecte une modification dans un formulaire Web pour mettre à jour les informations de l'utilisateur et met à jour la valeur du nom d'utilisateur en fonction de ce que l'utilisateur saisit.

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

• Vous pouvez penser à accéder au nom d'utilisateur comme un getter.

Chaque fois que vous faites référence au nom d'utilisateur dans un composant, vous utilisez effectivement un getter pour accéder à sa valeur. Par exemple, ma page Web pourrait afficher le nom d'utilisateur par :

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

---

3. Conteneurs en tant que classes Java

Java :
En Java, les classes regroupent les tâches et les données associées. Ils aident à gérer la façon dont les informations circulent dans votre application.

Dans cet exemple, la classe Calculator gère les calculs et stocke le résultat.

private String username;

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

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

Réagissez :

De même, dans React, les conteneurs jouent un rôle clé en connectant les données de l'application aux composants. Ils gèrent des choses comme la récupération de données à partir des appels d'API et la gestion de l'état de l'application.

Dans cet exemple, le conteneur Calculatrice gère l'état de la valeur d'entrée et le résultat,

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

---

4. Composants en tant que méthodes Java

Java :

Les méthodes en Java effectuent des actions spécifiques, telles que la gestion des entrées utilisateur. Ces méthodes peuvent être invoquées selon les besoins pour faciliter diverses fonctionnalités de votre application.

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

Réagissez :

Tout comme les méthodes Java sont de petites tâches ciblées, les composants React ont un objectif similaire, agissant comme les éléments fondamentaux de votre interface utilisateur.

Chaque composant est conçu pour une fonctionnalité spécifique et peut être réutilisé tout au long de l'application.

Le composant ManualFilter ci-dessous se concentre uniquement sur les options de filtrage pour les utilisateurs. Il présente des cases à cocher qui permettent aux utilisateurs de sélectionner des catégories spécifiques.

Ce composant peut ensuite être appelé dans une page conteneur UserForm.

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

---

5. Le retour de React dans les composants

Java :

En Java, une méthode peut renvoyer une valeur qu'une autre partie du programme utilise pour générer une sortie.

Par exemple, la méthode renderOutput renvoie une chaîne contenant l'objectif de l'utilisateur, qui peut ensuite être affichée ailleurs dans le programme.

public class Calculator {
    private int result;

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

    public int getResult() {
        return result;
    }
}

Réagissez :

L'instruction return dans les composants React est cruciale pour le rendu de l'interface utilisateur. Dans React, ce que vous retournez d'un composant dicte ce que l'utilisateur voit à l'écran.

Ceci est similaire à la façon mentionnée ci-dessus, une méthode en Java qui renvoie des données destinées à être traitées ou affichées dans une autre partie du programme.

Dans cet exemple, le composant UserGoal renvoie un élément de paragraphe qui affiche l'objectif de l'utilisateur.

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

---

6. Accessoires en tant que paramètres de méthode Java

Java :

Vous pouvez transmettre des arguments à une méthode Java, où les arguments peuvent affecter l'état ou le comportement de l'objet appelant.

Par exemple, considérons une méthode Java simple qui prend un message comme paramètre. Le message qu'il reçoit affectera ce que la console affichera.

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

Réagissez :

Dans React, les composants peuvent recevoir des accessoires, qui sont similaires aux paramètres des méthodes Java. Les composants React utilisent des accessoires pour déterminer leur contenu et leurs fonctionnalités.

Les accessoires contrôlent le comportement des composants et les données qu'ils affichent.

Disons que nous avons un composant parent appelé WelcomePage qui transmettra un message au composant enfant MessageDisplay.

En d'autres termes, imaginez un MessageDisplay comme une section de la page de destination WelcomePage où un message s'affiche.

Nous pouvons définir un message dans le composant parent et le transmettre comme accessoire au composant MessageDisplay :

private String username;

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

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

Le composant MessageDisplay recevra cet accessoire et le restituera :

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

---

7. Fonctions de rappel en tant que méthodes Java qui renvoient des valeurs

Java :

En Java, vous avez souvent des méthodes au sein des classes qui effectuent des actions spécifiques et renvoient des valeurs à leur appelant. Par exemple, vous pourriez avoir une classe nommée Calculatrice avec une méthode qui calcule la différence entre deux nombres :

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

^Dans une autre classe, vous créez une instance de la classe Calculatrice et appelez cette méthode.

Réagissez :

React suit un concept similaire, mais il se concentre sur la relation entre les composants.

Lorsque vous disposez d'un composant parent qui contient des composants enfants, les fonctions de rappel aident à faciliter la communication entre eux. (Rappelez-vous : le parent est un conteneur principal qui contient les autres composants - similaire à notre exemple précédent de "page de destination" parent avec un sous-composant d'une boîte de message)

Par exemple, disons que vous avez un ChildComponent qui doit renvoyer des données calculées à son composant parent.

Ci-dessous, nous transmettons la fonction handleCalculationResult du parent à l'enfant en tant qu'accessoire.

Cette fonction agit comme un rappel :

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

Vous pouvez voir ci-dessous comment onCalculate est une fonction de rappel reçue dans le ChildComponent depuis le composant parent.

Lorsque vous cliquez sur le bouton de ChildComponent, il effectue le calcul et utilise onCalculate pour renvoyer le résultat au parent. Cela imite la façon dont les méthodes Java renvoient des valeurs à leurs appelants.

public class Calculator {
    private int result;

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

    public int getResult() {
        return result;
    }
}

De cette manière, le parent gère l'état et le comportement global de l'application tandis que l'enfant se concentre sur une action spécifique (dans ce cas, le calcul).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!