React: Création d'interfaces utilisateur dynamiques et interactives

React est l'outil de choix pour construire des interfaces utilisateur dynamiques et interactives. 1) La composante et JSX font la division et la réutilisation de l'interface utilisateur simple. 2) La gestion de l'État est implémentée via le crochet USESTATE pour déclencher des mises à jour de l'interface utilisateur. 3) Le mécanisme de traitement des événements répond à l'interaction des utilisateurs et améliore l'expérience utilisateur.

introduction

Dans le développement frontal moderne, React est devenu l'outil préféré pour construire des interfaces utilisateur dynamiques et interactives. Que vous soyez un développeur débutant ou expérimenté, il est crucial de comprendre comment tirer parti de la réaction pour créer une interface utilisateur efficace et réactive. Cet article vous amènera à vous plonger dans les concepts de base et les techniques pratiques de réaction pour vous aider à maîtriser l'art de créer des interfaces utilisateur dynamiques et interactives.

En lisant cet article, vous apprendrez à créer des interfaces utilisateur complexes à l'aide de la pensée composante de React, de la gestion de l'État et du traitement des événements. Nous explorerons également certains pièges et meilleures pratiques courantes pour vous assurer que vous pouvez facilement démarrer dans le projet réel.

Examen des connaissances de base

React est une bibliothèque JavaScript pour créer des interfaces utilisateur. Il gère l'état et la logique de l'interface utilisateur à travers une manière composante. Les composants peuvent être des composants fonctionnels ou des composants de classe, et les structures d'interface utilisateur sont généralement décrites via la syntaxe JSX. L'idée principale de React est de diviser l'interface utilisateur en composants indépendants et réutilisables, chacun responsable de son propre état et de son comportement.

Dans React, l'état et les propriétés sont des concepts clés. L'état est utilisé pour gérer les données dans un composant, tandis que les attributs sont des données transmises du composant parent au composant enfant. Comprendre la différence et les scénarios d'utilisation entre les deux est la base de la construction d'une interface utilisateur dynamique.

Analyse du concept de base ou de la fonction

Componentisation et JSX

L'idée de composontisation de React permet aux développeurs de diviser les UIS complexes en parties plus petites et gérables. JSX est une extension de syntaxe similaire à HTML. Il vous permet d'écrire du code de type HTML en JavaScript, ce qui rend la description de l'interface utilisateur plus intuitive et facile à entretenir.

 fonction bienvenue (accessoires) {
  return <h1 id="Bonjour-props-name"> Bonjour, {props.name} </h1>;
}

const element = <bienvenue name = "sara" />;
Reactdom.render (élément, document.getElementById (&#39;root&#39;));

Dans cet exemple, Welcome est un composant de fonction qui accepte un attribut name et renvoie un élément JSX. De cette façon, nous pouvons facilement créer et réutiliser des composants.

Gestion du statut

La gestion de l'État est l'un des principaux applications React. En utilisant le crochet useState (Hook), nous pouvons gérer l'état dans le composant de fonction. Modifications de la réinstallation des déclencheurs d'état des composants, mettant ainsi à jour l'interface utilisateur.

 Importer React, {UseState} de 'react';

fonction compteur () {
  const [count, setCount] = useState (0);

  Retour (
    <div>
      <p> vous avez cliqué {count} fois </p>
      <Button onClick = {() => setCount (Count 1)}> Cliquez sur moi </fonti
    </div>
  ));
}

Dans cet exemple, le crochet useState est utilisé pour créer un count de variables d'état et une fonction de mise à jour setCount . Lorsque l'utilisateur clique sur un bouton, la valeur du count augmente et le composant est renvoyé pour refléter le nouvel état.

Manipulation des événements

React fournit un puissant mécanisme de gestion d'événements, nous permettant de répondre facilement aux interactions utilisateur. Les fonctions de traitement des événements sont généralement définies par les fonctions de flèche ou this liaison.

 fonction toggle () {
  const [istoggleon, setistoggleon] = useState (true);

  fonction handleclick () {
    setistoggleon (! Istoggleon);
  }

  Retour (
    <Button onClick = {handleclick}>
      {istoggleon? &#39;On&#39;: &#39;off&#39;}
    </ bouton>
  ));
}

Dans cet exemple, la fonction handleClick est appelée lorsque l'utilisateur clique sur un bouton, qui changera isToggleOn , modifiant ainsi le texte du bouton.

Exemple d'utilisation

Utilisation de base

Regardons un composant de formulaire simple qui montre comment utiliser le traitement de l'état et des événements pour créer une interface utilisateur dynamique.

 function nameform () {
  const [valeur, setValue] = UseState ('');

  const handlechange = (événement) => {
    setValue (event.target.Value);
  };

  const handlesubmit = (événement) => {
    alert ('nom soumis:' valeur);
    event.PreventDefault ();
  };

  Retour (
    <formulaire onsubmit = {handlesubmit}>
      <étiquet>
        Nom:
        <input type = "text" value = {value} onchange = {handlechange} />
      </ label>
      <input type = "soumi" value = "soumi" />
    </ form>
  ));
}

Dans cet exemple, le composant NameForm utilise useState pour gérer la valeur de la zone d'entrée et des fonctions handleChange et handleSubmit pour gérer l'entrée et la soumission de formulaire utilisateur.

Utilisation avancée

Maintenant, regardons un exemple plus complexe: un composant de liste modifiable. Ce composant montre comment utiliser le rendu d'état et conditionnel pour créer une interface utilisateur dynamique et interactive.

 fonction éditableList () {
  const [items, setItems] = useState (['item 1', 'item 2', 'item 3']);
  const [éditionIndex, setteditingIndex] = useState (null);
  const [newitem, setNewitem] = UseState ('');

  const handleedit = (index) => {
    setTiateIndex (index);
    setNewItem (items [index]);
  };

  const handlesave = (index) => {
    const NewItems = [... items];
    NewItems [index] = newItem;
    setItems (NewItems);
    SetEdItingIndex (null);
  };

  const mannedelete = (index) => {
    const NewItems = items.filter ((_, i) => i! == index);
    setItems (NewItems);
  };

  const handleadd = () => {
    if (newitem.trim ()) {
      setItems ([... items, NewItem]);
      setNewitem ('');
    }
  };

  Retour (
    <div>
      <ul>
        {items.map ((item, index) => (
          <li key = {index}>
            {éditionIndex === Index? (
              <entrée
                type = "texte"
                valeur = {NewItem}
                onchange = {(e) => setNewitem (e.target.value)}
              />
            ): (
              article
            )}
            {éditionIndex === Index? (
              <Button onClick = {() => handleSave (index)}> Enregistrer </futton>
            ): (
              <Button onClick = {() => handleedit (index)}> modifier </futton>
            )}
            <Button onClick = {() => mandepresetelete (index)}> supprimer </ftont>
          </li>
        ))}
      </ul>
      <entrée
        type = "texte"
        valeur = {NewItem}
        onchange = {(e) => setNewitem (e.target.value)}
      />
      <Button onClick = {handleadd}> Ajouter </button>
    </div>
  ));
}

Dans cet exemple, EditableList utilise plusieurs variables d'état pour gérer les éléments de liste, l'édition de l'état et la nouvelle entrée d'élément. Grâce au rendu conditionnel et au traitement des événements, nous pouvons implémenter une liste modifiable où les utilisateurs peuvent ajouter, modifier et supprimer les éléments de la liste.

Erreurs courantes et conseils de débogage

Les erreurs courantes lors de l'utilisation de React incluent des mises à jour d'état incorrectes, une mauvaise liaison des gestionnaires d'événements et un rendu incorrect des composants. Voici quelques conseils de débogage:

• Mise à jour de l'état incorrect : assurez-vous d'utiliser la fonction de mise à jour correcte (comme la fonction de mise à jour de setState ou useState ) lors de la mise à jour de l'état. Évitez de modifier directement la variable d'état, car cela ne déclenche pas la rediffusion.

• Erreur de liaison de la fonction du gestionnaire d'événements : assurez-vous que la fonction du gestionnaire d'événements est correctement liée à l'instance de composant, en particulier dans les composants de la classe. Utilisez des fonctions flèches ou bind des méthodes pour assurer l'exactitude de this .

• Le composant ne rendit pas correctement : vérifiez la logique de rendu conditionnel du composant pour vous assurer que toutes les conditions possibles sont prises en compte. Utilisez console.log ou réagissez Devtools pour vérifier les accessoires et l'état du composant.

Optimisation des performances et meilleures pratiques

Dans les applications pratiques, il est crucial d'optimiser les performances des applications React. Voici quelques recommandations pour l'optimisation des performances et les meilleures pratiques:

• Utilisez useMemo et useCallback : ces crochets peuvent vous aider à éviter de rériviser et à améliorer les performances des applications.

 Importer React, {UseMemo, UseCallback} de 'react';

fonction myComponent ({items}) {
  const triDItems = useMemo (() => {
    return [... items] .sort ((a, b) => a - b);
  }, [articles]);

  const handleclick = useCallback (() => {
    // Gire les événements de clic}, []);

  Retour (
    <div>
      {triDitems.map ((item) => (
        <div key = {item}> {item} </div>
      ))}
      <Button onClick = {handleclick}> Cliquez sur moi </frut
    </div>
  ));
}

Dans cet exemple, useMemo est utilisé pour mettre en cache des listes triées pour éviter de réorganiser à chaque fois que vous rendez. useCallback est utilisé pour mettre en cache les gestionnaires d'événements pour éviter les loisirs inutiles.

• Évitez la rediffusion inutile : utilisez React.memo pour envelopper les composants de la fonction et éviter de redémarrer lorsque les accessoires ne sont pas modifiés.

 importer réagir à partir de «réagir»;

const myComponent = react.memo (fonction myComponent (props) {
  // Logic de composant return <div> {props.value} </ div>;
});

• CODE LICIBILITÉ ET MAINTENANCE : Gardez une seule responsabilité d'un composant et évitez la surcomplexité des composants. Utilisez une dénomination claire et des commentaires pour vous assurer que le code est facile à comprendre et à entretenir.

• Meilleures pratiques pour la gestion de l'État : pour des applications complexes, envisagez d'utiliser des API redux ou de contexte pour gérer l'état mondial pour éviter les composantes excessivement imbriquées causées par l'élévation de l'État.

Avec ces conseils et pratiques, vous pouvez créer des applications de réaction efficaces et maintenables qui offrent une excellente expérience utilisateur.

Dans un vrai projet, j'ai rencontré un problème d'étranglement des performances: un composant de liste importante redevient tous les sous-composants chaque fois que le statut est mis à jour, provoquant le bégaiement de la page. En utilisant React.memo et useMemo , nous avons réussi à réduire la redevance pour ne contenir que des modifications, améliorant considérablement les performances de l'application.

En bref, React nous fournit des outils et des concepts puissants pour créer des interfaces utilisateur dynamiques et interactives. En comprenant et en pratiquant profondément ces techniques, vous pourrez créer une interface utilisateur efficace et réactive qui répond aux besoins des applications Web modernes.

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!