Termes et fonctionnalités dans React.js

React.js, communément appelé React, est une puissante bibliothèque JavaScript utilisée pour créer des interfaces utilisateur, en particulier pour les applications à page unique (SPA). Il permet aux développeurs de créer des interfaces utilisateur complexes en les décomposant en composants plus petits et réutilisables. Pour exploiter pleinement la puissance de React, il est important de comprendre ses termes et fonctionnalités de base. Dans cet article, nous détaillerons certains des concepts, termes et fonctionnalités clés que vous devez connaître lorsque vous travaillez avec React.js.

1. Composants

Composants fonctionnels :

Les composants fonctionnels sont aujourd'hui le moyen le plus courant de définir les composants React. Ce sont simplement des fonctions JavaScript qui renvoient du JSX (JavaScript XML) représentant l'interface utilisateur. Les composants fonctionnels peuvent également utiliser des React Hooks pour gérer l'état et les effets secondaires.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Composants de classe :

Avant l'introduction de React Hooks, les composants de classe étaient le principal moyen de gérer l'état des composants et les méthodes de cycle de vie. Bien qu'ils soient encore largement utilisés, les composants fonctionnels avec hooks sont désormais la méthode privilégiée.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

2. JSX (JavaScript XML)

JSX est une extension de syntaxe pour JavaScript qui vous permet d'écrire du code de type HTML directement dans JavaScript. React utilise JSX pour décrire à quoi devrait ressembler l'interface utilisateur. Même si cela ressemble à du HTML, JSX est compilé en JavaScript sous le capot.

const element = <h1>Hello, JSX!</h1>;

Vous pouvez également intégrer des expressions JavaScript dans JSX en les enveloppant entre accolades :

const name = "React";
const element = <h1>Hello, {name}!</h1>;

3. État

State est un objet React intégré utilisé pour stocker des informations sur la situation actuelle d'un composant. Chaque composant peut gérer son propre état et effectuer un nouveau rendu lorsque cet état change. Les composants de fonction utilisent le hook useState pour gérer l'état, tandis que les composants de classe utilisent l'objet this.state.

Exemple avec useState (composant de fonction) :

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Exemple avec this.state (composant de classe) :

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

4. Accessoires (Propriétés)

Les accessoires sont utilisés pour transmettre des données d'un composant à un autre. Ce sont comme des arguments de fonction qui permettent aux composants de communiquer entre eux. Les accessoires sont en lecture seule et ne peuvent pas être modifiés par le composant récepteur.

Exemple:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return <Welcome name="React" />;
}

Dans cet exemple, le composant Welcome reçoit le nom prop du composant App et affiche « Hello, React ».

5. Crochets

Les hooks sont des fonctions qui vous permettent de vous « connecter » aux fonctionnalités d'état et de cycle de vie de React dans les composants de fonction. Les deux crochets les plus couramment utilisés sont :

état d'utilisation :

Vous permet d'ajouter un état aux composants de fonction.

function Greeting() {
  return <h1>Hello, World!</h1>;
}

utiliserEffet :

Gère les effets secondaires tels que la récupération de données, les abonnements ou la modification manuelle du DOM après chaque rendu.

class Greeting extends React.Component {
  render() {
    return <h1>Hello, World!</h1>;
  }
}

Les autres hooks couramment utilisés incluent useContext, useReducer, useRef et useCallback.

6. DOM virtuel

React utilise un DOM virtuel, une copie allégée du DOM réel, pour optimiser les mises à jour de l'interface utilisateur. Au lieu de manipuler directement le DOM réel, React met d'abord à jour le DOM virtuel, puis détermine les modifications minimes requises pour synchroniser le DOM réel avec la version virtuelle. Ce processus est appelé réconciliation et améliore considérablement les performances, notamment dans les applications volumineuses.

7. Méthodes de cycle de vie (composants de classe)

Les méthodes de cycle de vie sont des méthodes spéciales dans les composants de classe qui vous permettent de vous connecter à différentes étapes de la vie d'un composant (rendu, mise à jour et démontage). Certaines méthodes importantes du cycle de vie incluent :

• componentDidMount() : invoqué une fois après que le composant a été monté sur le DOM. Utilisé pour la récupération de données initiales ou les abonnements.

• componentDidUpdate() : appelé après chaque nouveau rendu. Utilisé pour effectuer des mises à jour en fonction des changements d'état ou d'accessoires.

• componentWillUnmount() : invoqué juste avant qu'un composant ne soit supprimé du DOM. Utilisé pour les tâches de nettoyage telles que l'annulation des appels d'API ou la suppression des écouteurs d'événements.

Dans les composants de fonction, vous pouvez obtenir la même fonctionnalité en utilisant useEffect.

8. Rendu conditionnel

Dans React, vous pouvez restituer de manière conditionnelle des composants ou des éléments en fonction de l'état ou des accessoires. La méthode la plus courante consiste à utiliser l'opérateur ternaire de JavaScript.

Exemple:

const element = <h1>Hello, JSX!</h1>;

D'autres approches du rendu conditionnel incluent l'utilisation d'instructions if ou le court-circuit (&&) dans JSX.

9. Listes et clés

Dans React, les listes d'éléments sont créées à l'aide de la méthode .map(). Chaque élément d'une liste doit avoir un accessoire « clé » unique pour aider React à optimiser le rendu.

Exemple:

const name = "React";
const element = <h1>Hello, {name}!</h1>;

Les clés doivent être uniques et stables, aidant React à identifier les éléments qui ont été modifiés, ajoutés ou supprimés.

10. Formulaires et composants contrôlés

Dans React, les formulaires sont généralement gérés à l'aide de composants contrôlés, où les éléments du formulaire (comme les entrées) sont contrôlés par l'état React. Cela permet à React de contrôler entièrement la valeur des éléments du formulaire.

Exemple:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Dans cet exemple, la valeur de l'entrée est contrôlée par l'état React, garantissant que tout changement dans le champ de saisie est capturé en temps réel.

11. API de contexte

L'API Context vous permet de partager un état ou des données entre des composants sans avoir à transmettre manuellement les accessoires à chaque niveau (également appelé « forage d'accessoires »). C'est particulièrement utile lorsque vous devez transmettre des données globales (telles que l'authentification utilisateur ou les paramètres de thème) dans toute votre application.

Exemple:

function Greeting() {
  return <h1>Hello, World!</h1>;
}

Conclusion

React.js propose un large éventail de fonctionnalités et de termes à maîtriser. Des principes fondamentaux des composants, JSX, état et accessoires aux concepts plus avancés tels que les hooks, le contexte et les méthodes de cycle de vie, React fournit un cadre flexible et évolutif pour créer des applications Web modernes. Comprendre ces concepts et termes clés vous permettra de libérer tout le potentiel de React et de créer des interfaces utilisateur robustes, maintenables et dynamiques.

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!