Questions d'entretien - React (6) : Composants React et cycle de vie

1. Composants de réaction

Introduction aux composants React :
les composants React sont l'unité de base pour la création d'interfaces utilisateur. Ils divisent l'interface en parties indépendantes et réutilisables, rendant le code plus modulaire et plus maintenable. Les composants React peuvent être des composants fonctionnels ou des composants de classe qui reçoivent des données d'entrée (appelées accessoires) et renvoient des éléments React qui représentent l'interface utilisateur.

Créer des composants React :
dans React, il existe deux manières de créer des composants : les composants de fonction et les composants de classe. Les méthodes de création de ces deux méthodes sont présentées respectivement ci-dessous.

1. Composants de fonction :
   les composants de fonction sont le moyen le plus simple de créer des composants. Il s'agit d'une fonction pure qui reçoit des accessoires en tant que paramètres et renvoie un élément React. Les composants fonctionnels conviennent aux composants simples sans exigences internes en matière d'état ou de cycle de vie.

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

Dans l'exemple ci-dessus, Greetingil s'agit d'un composant fonction qui reçoit une namepropriété comme accessoire et renvoie un h1élément contenant le message de bienvenue.

2. Composants de classe :
   les composants de classe sont des composants créés à l'aide de la syntaxe de classe ES6, qui hérite React.Componentdes classes et peuvent avoir des fonctions internes d'état et de cycle de vie. Les composants de classe conviennent aux composants complexes qui nécessitent une gestion d'état ou un contrôle du cycle de vie.

import React from 'react';

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

Dans l'exemple ci-dessus, Counteril s'agit d'un composant de classe qui hérite de React.Component, avec un état interne countet une fonction pour incrémenter la valeur du compteur en cliquant sur un bouton.

Utilisation de composants :
Qu'il s'agisse d'un composant de fonction ou d'un composant de classe, il peut être utilisé dans la fonction de rendu d'autres composants comme les balises HTML.

import React from 'react';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Counter />
    </div>
  );
}

Dans l'exemple ci-dessus, le composant de fonction et le composant de classe Appprécédemment définis sont utilisés dans le composant.GreetingCounter

2. Réagir au cycle de vie

Le cycle de vie de React est essentiel pour comprendre et maîtriser les composants React. En utilisant correctement les méthodes de cycle de vie, nous pouvons effectuer les opérations nécessaires à différentes étapes et obtenir un contrôle et une interaction plus fins.

Méthodes de cycle de vie React

Les méthodes de cycle de vie de React peuvent être décomposées en trois phases principales : la phase de montage, la phase de mise à jour et la phase de démontage. Chaque phase et ses méthodes de cycle de vie correspondantes sont expliquées en détail ci-dessous.

Phase de montage :
appelée lorsque le composant est inséré dans le DOM.

1. constructeur(accessoires)：

Constructeur, utilisé pour initialiser l'état et les méthodes de liaison du composant. Généralement, l'état interne du composant est initialisé à ce stade.

2. rendre():

Méthode Render, renvoie un élément React représentant l'interface utilisateur du composant. Le contenu de l’interface utilisateur doit être renvoyé dans cette méthode.

3. composantDidMount()：

Appelé après le montage du composant, adapté aux requêtes réseau, aux opérations DOM ou aux opérations d'initialisation. Cette phase est souvent utilisée pour la récupération de données asynchrone.

Phase de mise à jour :
appelée lorsque les accessoires ou l'état du composant changent.

1. rendre():

La phase de mise à jour appelle également la méthode render pour restituer l'interface utilisateur du composant.

2. composantDidUpdate(prevProps, prevState)：

Appelées après la mise à jour du composant, les mises à jour DOM, les requêtes réseau ou d'autres opérations à effets secondaires peuvent être gérées ici. Les paramètres prevProps et prevState représentent les accessoires et l'état précédents.

Phase de démontage :
appelée lorsque le composant est supprimé du DOM.

• composantWillUnmount()：

Appelé lorsque le composant est sur le point d'être désinstallé, adapté aux opérations de nettoyage, telles que l'annulation des requêtes réseau, l'effacement des minuteries, etc.

icône

exemple de code

Ce qui suit est un exemple utilisant les méthodes de cycle de vie React, montrant l'ordre d'exécution et le but des méthodes de cycle de vie.

import React from 'react';

class LifecycleExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    console.log('constructor');
  }

  increment() {
    this.setState({
      count: this.state.count + 1
    })
  }

  componentDidMount() {
    console.log('componentDidMount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('componentDidUpdate', prevProps, prevState);
  }

  componentWillUnmount() {
    console.log('componentWillUnmount');
  }

  render() {
    console.log('render');
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.increment()}>increment</button>
      </div>
    );
  }
}

class App extends React.Component {
  state = { showComponent: true };

  toggleComponent = () => {
    this.setState({ showComponent: !this.state.showComponent });
  };

  render() {
    return (
      <div>
        {this.state.showComponent && <LifecycleExample />}
        <button onClick={this.toggleComponent}>Toggle Component</button>
      </div>
    );
  }
}

export default App;