React: se concentrer sur l'interface utilisateur (frontend)

React est une bibliothèque JavaScript pour la création d'interfaces utilisateur qui améliore l'efficacité grâce au développement des composants et au DOM virtuel. 1. Composants et JSX: utilisez la syntaxe JSX pour définir les composants pour améliorer l'intuitivité et la qualité du code. 2. Dom virtuel et rendu: optimiser les performances de rendu via des algorithmes Virtual Dom et Diff. 3. Gestion de l'État et crochets: des crochets tels que USESTATE et UTILISATEUR IMPLIFIEZ la gestion de l'état et la manipulation des effets secondaires. 4. Exemple d'utilisation: des formulaires de base à la gestion avancée de l'état mondial, utilisez l'API de contexte. 5. Erreurs courantes et débogage: évitez les problèmes de gestion de l'état et de mise à jour des composants, et utilisez React Devtools pour déboguer. 6. Optimisation des performances et meilleures pratiques: utilisez React.Memo, UseCallback et UseMemo pour optimiser les performances pour maintenir la lisibilité au code et la maintenance.

introduction

React, ah, quand il s'agit de lui, j'ai toujours l'impression que ce n'est pas seulement une bibliothèque, mais une philosophie qui change la façon dont les mentalités de développement frontal. Je me souviens encore de la première fois que je suis entré en contact avec React, l'excitation était comme découvrir un nouveau monde - un nouveau monde qui construit une interface utilisateur. Dans cet article, je vous emmènerai dans la compréhension approfondie du développement frontal de React et révélerai son charme. Vous apprendrez à utiliser React pour créer une interface réactive et à l'expérience utilisateur. En même temps, je partagerai certaines expériences et leçons que j'ai vécues en personne, dans l'espoir de vous aider à éviter les détours.

Examen des connaissances de base

React, tout simplement, est une bibliothèque JavaScript pour créer des interfaces utilisateur. Il est développé par Facebook et vise à résoudre l'efficacité des opérations traditionnelles DOM. React présente une nouvelle façon de penser - le développement des composants. Au lieu d'écrire un tas d'opérations DOM, nous avons divisé l'interface en petits composants réutilisables. Ces composants peuvent être des éléments d'interface utilisateur simples ou des structures de pages complexes.

Dans React, les concepts d'État et d'attributs sont très importants. L'état est des données à l'intérieur du composant, affectant le rendu du composant, tandis que les accessoires sont des données transmises du composant parent au composant enfant. Comprendre ces deux concepts est la clé pour maîtriser la réaction.

Analyse du concept de base ou de la fonction

Composants et JSX

Le noyau de React est des composants, et la définition des composants est généralement implémentée via la syntaxe JSX. JSX est une syntaxe d'extension JavaScript qui vous permet d'écrire des structures HTML dans JavaScript. Regardons un exemple de composant simple:

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

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

Exportation par défaut bienvenue;

Ce composant prend une propriété nommée name et le rend dans une balise <h1></h1> . JSX rend non seulement le code plus intuitif, mais effectue également la vérification du type au moment de la compilation pour améliorer la qualité du code.

Dom virtuel et rendu

Un autre concept de base de React est Dom virtuel. Les opérations traditionnelles DOM sont souvent lentes car chaque modification entraînera la redessation de l'ensemble de l'arbre Dom. React maintient un Dom virtuel léger. Lorsque l'état change, il fonctionne d'abord sur le DOM virtuel, puis utilise l'algorithme Diff pour découvrir les pièces qui doivent être mises à jour, et ne fait enfin que les mises à jour nécessaires du vrai DOM. Cette approche améliore considérablement les performances.

 Importer React, {UseState} de 'react';

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

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

Exporter le compteur par défaut;

Dans ce composant de compteur, chaque fois que le bouton est cliqué, count change, mais réagit uniquement les pièces nécessaires, pas l'ensemble de l'arborescence DOM.

Gestion de statut et crochets

React 16.8 présente Hooks, une caractéristique révolutionnaire. Hooks nous permet d'utiliser l'état et d'autres fonctionnalités de réaction sans cours d'écriture. Les crochets les plus couramment utilisés sont useState et useEffect .

 Importer React, {UseState, useEffecte} depuis 'react';

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

  useEFFECT (() => {
    document.title = `Vous avez cliqué sur $ {count} Times`;
  }, [compter]);

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

Exporter l&#39;exemple par défaut;

Dans cet exemple, useEffect met à jour le titre du document lorsque count change. Cela montre comment les crochets simplifient la gestion de l'État et la gestion des effets secondaires.

Exemple d'utilisation

Utilisation de base

Commençons par un composant de formulaire simple. Supposons que nous voulons créer un formulaire où l'utilisateur entre le nom:

 Importer React, {UseState} de 'react';

function nameform () {
  const [name, setName] = UseState ('');

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

  Retour (
    <formulaire onsubmit = {handlesubmit}>
      <étiquet>
        Nom:
        <entrée
          type = "texte"
          valeur = {nom}
          onchange = {(e) => setName (e.target.value)}
        />
      </ label>
      <input type = "soumi" value = "soumi" />
    </ form>
  ));
}

Exporter par défaut NameForm;

Ce composant montre comment gérer l'état de formulaire à l'aide useState et comment gérer les soumissions de formulaire.

Utilisation avancée

Voyons maintenant comment utiliser l'API de contexte de React (API de contexte) pour gérer l'état mondial. Supposons que nous ayons une exigence de commutation de sujet:

 Importer React, {UseState, createContext, useContext} de 'react';

const themeContext = createContext ();

fonction themeprovider ({enfants}) {
  const [thème, setTheme] = UseState ('Light');

  const toggleTheme = () => {
    setTheme (thème === 'Light'? 'Dark': 'Light');
  };

  Retour (
    <meConText.Provider Value = {{thème, toggleTheme}}>
      {enfants}
    </Themecontext.provider>
  ));
}

fonction themedbutton () {
  const {thème, toggleTheme} = useContext (themeContext);

  Retour (
    <bouton
      onClick = {toggleTheme}
      style = {{backgroundColor: thème === &#39;Light&#39;? &#39;#ffffff&#39;: &#39;# 000000&#39;, couleur: thème === &#39;Light&#39;? &#39;# 000000&#39;: &#39;#ffffff&#39;}}
    >
      Thème de basculement
    </ bouton>
  ));
}

Function App () {
  Retour (
    <TheMeprovider>
      <ThemedButton />
    </methEprovider>
  ));
}

Exporter l&#39;application par défaut;

Cet exemple montre comment utiliser l'API de contexte pour passer et utiliser l'état global dans l'arborescence des composants.

Erreurs courantes et conseils de débogage

Dans le développement de React, les erreurs courantes comprennent une mauvaise gestion de l'État, des mises à jour de composants incorrectes, etc. Examinons certains problèmes et solutions courantes:

• Management d'État incorrect : assurez-vous de mettre à jour le statut au bon endroit. Par exemple, mettez à jour l'état dans la fonction du gestionnaire d'événements, pas dans la fonction de rendu.

• Composant non mis à jour correctement : vérifiez correctement key , en particulier lorsque vous rendez la liste. Si key ne sont pas utilisées correctement, React peut ne pas reconnaître correctement et mettre à jour les composants.

• Conseils de débogage : l'utilisation de React Devtools peut vous aider à afficher les changements dans les arbres de composants, les états et les propriétés. De plus, console.log et useEffect Hooks peuvent vous aider à déboguer les changements d'état.

Optimisation des performances et meilleures pratiques

L'optimisation des performances et les meilleures pratiques sont cruciales dans le développement de la réaction. Voici quelques suggestions:

• Évitez la rediffusion inutile : utilisez React.memo pour envelopper les composants de la fonction, ou utilisez la méthode de cycle de vie shouldComponentUpdate dans les composants de la classe pour contrôler la rétention des composants.

• Utilisez useCallback et useMemo : ces crochets peuvent vous aider à optimiser les performances, en particulier lors du passage des fonctions de rappel ou du calcul des valeurs coûteuses.

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

fonction expensiveComponent ({calcul}) {
  const result = useMemo (() => calcul (), [calcul]);
  return <div> Résultat: {résultat} </div>;
}

fonction parentComponent () {
  const [count, setCount] = useState (0);
  const calbe = useCallback (() => {
    // Supposons qu&#39;il y ait un calcul coûteux ici pour retourner le nombre * 2;
  }, [compter]);

  Retour (
    <div>
      <Button onClick = {() => setCount (Count 1)}> incrément </futh>
      <Dépensevisocomponent calcul = {calcul} />
    </div>
  ));
}

Exporter par défaut parentComponent;

• CODE LICIBILITÉ ET MAINTENANCE : Gardez les composants petits et dédiés, utilisez une dénomination significative, ajoutez des commentaires et de la documentation appropriés. Ces pratiques améliorent non seulement la lisibilité du code, mais améliorent également l'efficacité du travail d'équipe.

Dans ma carrière de développement, j'ai constaté que ces meilleures pratiques améliorent non seulement les performances de l'application, mais rendent également le code plus facile à maintenir et à évoluer. Je me souviens de la première fois que j'ai utilisé useMemo , cela a considérablement réduit le nombre de redesseurs de mes composants et rendu ma demande plus lisse.

Dans l'ensemble, React nous fournit une toute nouvelle façon de développement frontal. En comprenant et en appliquant ces concepts de base et les meilleures pratiques, vous pouvez créer une interface utilisateur efficace et maintenable. J'espère que cet article vous fournit des idées et une inspiration utiles et que vous souhaitiez un voyage de navigation en douceur sur React!

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!