Réagissez aux questions d'entretien courantes 2

1.Est-ce que setState est synchrone ou asynchrone ?

Dans React, setState l'état est mis à jour de manière asynchrone. Cela signifie que même si vous l'appelez plusieurs fois de suite setState, la mise à jour réelle du DOM ne peut être effectuée qu'une seule fois. React setState regroupe plusieurs appels et n'effectue qu'une seule mise à jour pour écrire l'état dans le DOM.

Cependant, React fournit également un moyen de mettre à jour l'état de manière synchrone : forceUpdate. Cette méthode peut forcer un nouveau rendu immédiat dans un composant, que l'état du composant ait changé ou que l'état des autres composants ait changé. forceUpdate Cependant, il est recommandé d'utiliser des méthodes uniquement lorsque cela est nécessaire, par exemple lors de l'utilisation de minuteries ou d'animations en mouvement, car cela pourrait casser les algorithmes d'optimisation de React, entraînant des problèmes de performances.

2.Que sont les événements synthétiques de réaction ? Différences avec les événements natifs

Les événements synthétiques React sont un événement encapsulé par React sur le DOM. Il est implémenté par React et est différent des événements natifs du navigateur. Les événements synthétiques React fournissent une solution multi-navigateurs et multi-plateformes, permettant aux développeurs d'utiliser une gestion cohérente des événements sans avoir à se soucier des problèmes de compatibilité entre les différents navigateurs.

Les différences entre les événements synthétiques React et les événements natifs sont les suivantes :

Les méthodes de traitement des événements sont différentes : Les événements synthétiques React utilisent la délégation d'événements. Tous les événements sont liés au nœud racine, puis transmis au nœud cible pour exécution via le mécanisme de bouillonnement d'événements. L'événement natif lie la fonction de traitement d'événement directement au nœud cible.
Les mécanismes synchrones et asynchrones sont différents : les événements synthétiques React utilisent un mécanisme de mise à jour par lots asynchrone. Lorsque plusieurs événements sont déclenchés, React les fusionnera et mettra à jour l'état en même temps, évitant ainsi plusieurs mises à jour de l'état. L'événement natif déclenche la fonction de traitement des événements de manière synchrone et le statut est mis à jour à chaque fois que l'événement est déclenché.
Les propriétés des objets d'événement sont différentes : les objets d'événement synthétiques React encapsulent les objets d'événement natifs, et leurs propriétés et méthodes sont différentes des objets d'événement natifs. Par exemple, il n'existe aucune méthode telle que la propagation et le blocage des événements par défaut dans les objets d'événement synthétiques React, tandis que Il est implémenté à l'aide d'une méthode personnalisée.
Compatibilité différente : les événements synthétiques React peuvent garantir un comportement cohérent sur différents navigateurs et plates-formes, tandis que les événements natifs ont des problèmes de compatibilité, et les types d'événements et les attributs d'événement pris en charge par différents navigateurs sont également différents.

3. Qu'est-ce que le DOM virtuel ? VirtualDOM et comment ça marche

Virtual DOM (Virtual DOM) est une représentation d'objet JavaScript, qui est une image virtuelle légère du DOM réel. Pendant que le DOM virtuel exploite le DOM réel, il générera une arborescence virtuelle, appelée arborescence DOM virtuelle. L'efficacité de l'exploitation de l'arborescence DOM virtuelle est bien supérieure à celle de l'exploitation directe de l'arborescence DOM réelle.

Le DOM virtuel fonctionne comme suit :

Lorsque l'état de l'application change, Virtual DOM génère une nouvelle arborescence DOM virtuelle.
Ensuite, il comparera l'arborescence DOM virtuelle nouvellement générée avec l'ancienne arborescence DOM virtuelle pour trouver les différences (c'est-à-dire les nœuds qui doivent être mis à jour).
Le DOM virtuel met à jour uniquement les parties qui doivent être mises à jour, en appliquant les différences à l'arborescence DOM réelle.
Enfin, le navigateur affiche la dernière arborescence DOM.

En utilisant un DOM virtuel, les développeurs front-end peuvent éviter le processus complexe et inefficace de manipulation manuelle du DOM réel. Virtual DOM peut améliorer les performances et la réactivité des applications, offrant ainsi une meilleure expérience utilisateur.

4. Quelle est la différence entre les composants de classe et les composants de fonction ?

Deux composants couramment utilisés dans React sont les composants de classe et les composants de fonction. Les principales différences entre eux sont les suivantes :

Syntaxe : les composants de classe sont définis sous forme de classes, tandis que les composants de fonction sont définis sous forme de fonctions.
Gestion de l'état : les composants de classe prennent en charge la gestion de l'état et peuvent être utilisés statepour enregistrer l'état des composants. Après l'introduction de React Hooks, les composants fonctionnels peuvent également être utilisés useStatepour gérer l'état.
Cycle de vie : les composants de classe ont leurs propres méthodes de cycle de vie qui exécutent du code spécifique lorsque le composant est créé, mis à jour ou détruit. Après l'introduction de React Hooks, les composants fonctionnels peuvent également être utilisés useEffectpour effectuer des opérations de type cycle de vie.
Performances : les composants de fonction sont généralement plus légers que les composants de classe car ils ne nécessitent pas d'instanciation et ne nécessitent pas la maintenance des méthodes d'instance et de l'état. En conséquence, les composants fonctionnels s’affichent plus rapidement et occupent moins de mémoire.

En résumé, si vous devez utiliser des méthodes d’état ou de cycle de vie de composant, vous devez utiliser des composants de classe. Si vous avez uniquement besoin de restituer des composants en fonction de propriétés, il est plus simple et plus efficace d'utiliser des composants de fonction. Après l'introduction de React Hooks, les composants de fonction sont devenus équivalents aux composants de classe en termes de fonctionnalités, il est donc très courant d'utiliser des composants de fonction dans de nouveaux projets.

5.À quoi servent les références dans React ?

Les références sont utilisées dans React pour accéder aux éléments DOM ou aux instances de composants. En utilisant ref, vous pouvez obtenir l'élément rendu ou l'instance de composant et exploiter directement ses propriétés ou méthodes si nécessaire, sans passer par le composant parent.

Les références peuvent être utilisées dans les situations suivantes :

Gérez le focus, le texte sélectionné ou la lecture multimédia.
Déclenchez une animation impérative.
Intégrez des bibliothèques DOM tierces.

Pour utiliser ref, vous devez créer un objet ref dans le composant et le transmettre à l'élément DOM ou à l'instance de composant auquel il faut accéder. Vous pouvez initialiser l'objet ref dans le constructeur du composant ou définir ref à l'aide d'une fonction de rappel dans un élément JSX.

Vous devez être prudent lorsque vous utilisez des références. La surutilisation des références peut rendre le code difficile à comprendre, à maintenir et à tester. Par conséquent, les accessoires et l'état des composants React doivent être utilisés en premier pour gérer le comportement et l'état du composant.

6.Quelle est la différence entre l'état et les accessoires ?

Dans React, l'état et les accessoires sont utilisés pour gérer les données des composants. Il existe cependant quelques différences importantes entre eux :

L'état est une donnée variable à l'intérieur du composant et peut être modifié via la méthode this.setState(). Les accessoires sont des données immuables transmises des composants parents aux composants enfants, et les composants enfants ne peuvent pas modifier directement les accessoires.
L'état ne peut être modifié qu'à l'intérieur du composant, mais les accessoires ne peuvent pas être modifiés à l'intérieur du composant.
L'état peut être initialisé dans le constructeur du composant, tandis que les accessoires doivent être transmis depuis le composant parent.
Les changements d'état déclencheront le nouveau rendu du composant, et les changements dans les accessoires déclencheront également le nouveau rendu du composant, mais ce n'est que lorsque les accessoires changeront qu'ils seront retransmis au composant enfant.

En résumé, l'état correspond à des données mutables conservées dans un composant, tandis que les accessoires sont des données immuables transmises des composants parents aux composants enfants, à travers lesquelles la communication et le partage de données entre les composants peuvent être réalisés.

7. Comment créer des références et des scénarios d'utilisation

Les références sont le mécanisme utilisé dans React pour accéder aux nœuds DOM ou aux instances de composant. Les références peuvent être transmises aux composants React comme des accessoires, mais les références sont un moyen d'accéder directement aux éléments DOM ou aux instances de composant à l'intérieur du composant au lieu de transmettre des données via des accessoires. Vous pouvez utiliser les fonctions createRef ou callback pour créer des références.

Utilisez createRef pour créer des références

Utilisez createRef pour créer des références. Vous pouvez créer un objet ref dans le composant, puis affecter l'objet ref à un élément ou un composant du composant. Grâce à cet objet ref, vous pouvez accéder directement à l'instance de l'élément ou du composant.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    console.log(this.myRef.current);
  }

  render() {
    return <div ref={this.myRef}>Hello World</div>;
  }
}

Dans le code ci-dessus, nous créons un objet ref via createRef, l'attribuons à l'élément div du composant, puis accédons à l'instance de cet élément div pendant le cycle de vie composantDidMount du composant.

Créer des références à l'aide de fonctions de rappel

Utilisez des fonctions de rappel pour créer des références. Vous pouvez transmettre l'objet ref au composant en tant que paramètre de la fonction de rappel. Grâce à ce paramètre, vous pouvez accéder à l'instance de l'élément ou du composant.

import React, { Component } from 'react';

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.myRef = null;
    this.setMyRef = element => {
      this.myRef = element;
    };
  }

  componentDidMount() {
    console.log(this.myRef);
  }

  render() {
    return <div ref={this.setMyRef}>Hello World</div>;
  }
}

Dans le code ci-dessus, nous passons l'objet ref à l'élément div du composant en tant que paramètre de la fonction de rappel setMyRef. Grâce à ce paramètre, nous pouvons accéder à l'instance de l'élément div.

scènes à utiliser

L'utilisation de refs permet d'accéder aux éléments DOM ou aux instances de composant à l'intérieur du composant. Il peut donc être plus pratique d'utiliser des refs dans les scénarios suivants :

Obtenez la valeur ou le focus de la zone de saisie ;
Modifier les styles d'éléments ou manipuler les attributs d'éléments via des opérations DOM ;
Accédez à une instance d'un composant et appelez directement les méthodes ou propriétés du composant.

8. Cycle de vie des composants fonctionnels et des composants de classe

Les méthodes de cycle de vie dans React font référence à une série de méthodes qu'un composant exécute à différentes étapes. Ils sont divisés en trois phases : montage, mise à jour et démontage. Les méthodes de cycle de vie sont utilisées pour gérer des tâches et des opérations spécifiques et nous aident à optimiser les performances de notre application.

Il existe quelques différences dans les méthodes de cycle de vie des composants de fonction et des composants de classe dans React :

Cycle de vie des composants fonctionnels :

composantDidMount : Il n'y a pas de méthode composantDidMount dans le composant fonction, mais useEffect Hook peut être utilisé pour simuler le comportement de composantDidMount.
composantDidUpdate : Il n'y a pas de méthode composantDidUpdate dans le composant fonction, mais useEffect Hook peut être utilisé pour simuler le comportement de composantDidUpdate.
composantWillUnmount : Il n'y a pas de méthode composantWillUnmount dans le composant fonction, mais vous pouvez utiliser useEffect Hook pour simuler le comportement de composantWillUnmount.

Cycle de vie des composants de classe :

composantDidMount : appelé après le montage du composant, effectuez des opérations asynchrones ou interagissez avec des bibliothèques externes dans cette méthode.
composantDidUpdate : appelé après la mise à jour du composant. Dans cette méthode, les opérations DOM, la synchronisation de l'état ou les requêtes réseau sont effectuées.
composantWillUnmount : appelé avant le démontage du composant. Dans cette méthode, des opérations telles que l'effacement du minuteur, l'annulation de l'abonnement ou l'effacement du cache sont effectuées.

En outre, il existe d'autres méthodes de cycle de vie, telles que ShouldComponentUpdate, getSnapshotBeforeUpdate et ComponentDidCatch. Ces méthodes sont les mêmes dans les composants de fonction et de classe.

9. Quelle est la différence entre les composants contrôlés et les composants non contrôlés ?

Dans React, les composants contrôlés et les composants non contrôlés sont deux manières différentes de gérer les composants.

Les composants contrôlés sont des composants qui contrôlent les entrées de l'utilisateur via l'état du composant. Cela signifie que l'état du composant sera synchronisé avec l'entrée de l'utilisateur et que le comportement du composant peut être contrôlé en définissant l'état du composant. Par exemple, un input>élément < peut valueêtre contrôlé via l'état du composant, et toute modification apportée à cet élément doit être effectuée en modifiant l'état du composant. L'avantage des composants contrôlés est que l'état du composant et les entrées de l'utilisateur sont contrôlables et faciles à gérer.

class ControlledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      inputText: ""
    };
    this.handleInputChange = this.handleInputChange.bind(this);
  }

  handleInputChange(event) {
    this.setState({
      inputText: event.target.value
    });
  }

  render() {
    return (
      <input type="text" value={this.state.inputText} onChange={this.handleInputChange} />
    );
  }
}

Les composants non contrôlés permettent aux utilisateurs de mettre à jour librement le DOM avec des entrées. Avec des composants non contrôlés, nous pouvons obtenir la valeur d'un élément directement depuis le DOM sans utiliser de valeurs d'état. Normalement, nous utilisons refpour obtenir la valeur d'un élément. Par rapport aux composants contrôlés, l’avantage des composants non contrôlés est qu’ils sont généralement plus simples et plus intuitifs.

class UncontrolledComponent extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    console.log(this.inputRef.current.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.inputRef} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

10.Qu'est-ce que React.createElement ?

React.createElement est une API dans React utilisée pour créer des éléments DOM virtuels. Il prend trois paramètres : un nom de balise ou un composant React, un objet contenant des attributs et des éléments enfants facultatifs, et renvoie un objet JavaScript représentant un élément DOM virtuel. Les éléments du DOM virtuel peuvent être utilisés pour créer des arborescences de composants React. Par exemple, le code suivant crée un élément h1 :

React.createElement("h1", { className: "title" }, "Hello, world!")

Ou utilisez la syntaxe JSX :

<h1 className="title">Hello, world!</h1>

11. Dites-moi, qu'est-ce que JSX ?

JSX est une extension de syntaxe JavaScript qui permet d'écrire des balises HTML et XML directement dans du code JavaScript et peut également être utilisée pour définir des composants personnalisés. Il semble principalement simplifier le processus d’écriture du code de l’interface utilisateur dans React.

Dans JSX, les balises HTML et XML peuvent être traitées comme des éléments React, elles peuvent donc être manipulées et rendues à l'aide des API et des propriétés fournies par React. En utilisant la syntaxe de JSX, la structure et le comportement des composants de l'interface utilisateur peuvent être décrits de manière plus intuitive.

Exemple de code JSX :

import React from 'react';

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

function App() {
    return (
        <div>
            {element}
            <p>This is a JSX example.</p>
        </div>
    );
}

Dans le code ci-dessus, nous pouvons voir comment JSX écrit les balises HTML directement dans le code. Dans le même temps, nous pouvons également voir que JSX est mélangé avec JavaScript, ce qui nous permet d'utiliser des variables JavaScript dans JSX et de les restituer en tant que composants d'interface utilisateur.

Il convient de noter que pour utiliser JSX, nous devons utiliser des outils tels que Babel pour le compiler en code JavaScript standard.

12.Pourquoi ne pas mettre à jour l’état directement ?

stateIl existe de nombreuses façons de mettre à jour , par exemple en utilisant setState, en utilisant useReducer, en utilisant Reduxet ainsi de suite. Parmi eux, setStateil s'agit d'une méthode mise à jour officiellement fournie par React state. Dans certains cas, elle est très pratique et pratique, mais dans certains scénarios, elle peut causer des problèmes.

Certaines questions courantes incluent :

setStateIl est asynchrone, donc si vous souhaitez obtenir la dernière version après la mise à jour, vous statedevrez peut-être utiliser une fonction de rappel ou useEffectd'autres méthodes .
Pour les mises à jour de données à grande échelle, appeler plusieurs fois de suite setStatepeut entraîner des problèmes de performances
Pour une logique d'état de composant complexe, l'utilisation setStatepeut rendre le code difficile à maintenir et à comprendre.

Par conséquent, en fonction de scénarios et de besoins spécifiques, vous devez choisir une méthode de mise à jour appropriée state, plutôt que de choisir aveuglément d'utiliser setStatecette méthode.

13. Quels sont les avantages de l’utilisation de React Hooks ?

Les avantages de l’utilisation de React Hooks incluent :

Plus concis : les hooks offrent un moyen plus concis de gérer l'état des composants et les fonctions du cycle de vie. Ils vous permettent d'éviter d'utiliser des composants de classe et le mot-clé this, rendant votre code plus clair et plus lisible.
Plus de flexibilité : l'utilisation de Hooks vous permet de gérer l'état et le cycle de vie de manière plus flexible, car ils peuvent être partagés et réutilisés dans différents composants. Cela signifie que vous pouvez créer plus facilement des composants et des applications très complexes.
Plus testable : les hooks facilitent l'écriture de composants testables. Vous pouvez écrire du code de test en dehors du composant et utiliser des Hooks pour injecter des données de test et simuler des fonctions de cycle de vie.
Meilleure optimisation : les hooks vous permettent d'optimiser votre application car ils vous donnent un contrôle plus précis sur les mises à jour d'état. Cela peut réduire les rendus inutiles et améliorer les performances des applications.

En résumé, l'utilisation de React Hooks vous permet de créer plus facilement des composants et des applications complexes et d'améliorer la lisibilité, la réutilisabilité, la testabilité et les performances du code.

14.Qu'est-ce que useState() dans React ?

useState() est une fonction hook dans React, utilisée pour implémenter la gestion de l'état dans les composants de fonction. Sa fonction est d'ajouter un état au composant fonctionnel et de déclencher le nouveau rendu du composant lorsque l'état change. useState() renvoie un tableau contenant deux éléments : la valeur de l'état actuel et une fonction utilisée pour mettre à jour l'état. L'utilisation de useState() permet aux développeurs de gérer plus facilement l'état des composants et d'éviter des opérations fastidieuses telles que l'utilisation de fonctions de cycle de vie des composants de classe dans les composants.

15. Comment appliquer la validation sur les accessoires dans ReactJS ?

Dans ReactJS, vous pouvez utiliser la bibliothèque PropTypes pour valider les composants Props. La bibliothèque PropTypes est une bibliothèque intégrée qui permet aux développeurs de spécifier les types de Prop requis dans les définitions de composants et avertit lorsque les Props ne correspondent pas aux types définis. La bibliothèque PropTypes fournit de nombreux types de Prop différents, tels que des chaînes, des nombres, des tableaux, des objets, etc., afin que les Props puissent être facilement validés.

Voici un exemple de composant qui utilise la bibliothèque PropTypes pour valider les Props :

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number.isRequired,
};

export default MyComponent;

Dans l'exemple ci-dessus, le composant MyComponent accepte deux Props : name et age. En utilisant la bibliothèque PropTypes dans la définition du composant, vous pouvez spécifier le type de ces Props et spécifier qu'ils sont requis via l'attribut isRequired. PropTypes.string spécifie le type de nom sous forme de chaîne et PropTypes.number spécifie le type d'âge sous forme de nombre.

Si des accessoires non valides sont transmis au composant MyComponent, comme une valeur de chaîne comme age, la bibliothèque PropTypes affichera un message d'avertissement sur la console pour aider les développeurs à déboguer le problème.

16. Comment fonctionne le rendu React lorsque setState est appelé ?

Lorsqu'il est appelé setState, React met à jour en interne l'état du composant et planifie le rendu du composant. À ce stade, React comparera le nouvel état avec l'ancien état, déterminera les parties qui doivent être mises à jour, puis appellera renderà nouveau la méthode pour restituer le composant. Enfin, React affiche le contenu mis à jour dans le navigateur. L'ensemble du processus est automatisé et ne nécessite aucune intervention manuelle.

17.Quel est le rôle du deuxième paramètre de setState dans React ?

Dans React, setState()une méthode utilisée pour mettre à jour l'état des composants. Le deuxième paramètre est une fonction de rappel facultative qui sera setState()appelée une fois le processus terminé et le composant mis à jour.

Plus précisément, le rôle du deuxième paramètre est setState()de garantir qu'après la mise à jour de l'état du composant, certaines opérations supplémentaires peuvent être effectuées après la mise à jour du DOM, comme l'obtention du dernier nœud DOM ou l'exécution d'autres opérations à effets secondaires. Parce setState()qu'il est asynchrone, il ne mettra pas à jour l'état du composant immédiatement, mais le mettra à jour lors des phases de réconciliation et de validation ultérieures. Par conséquent, l'utilisation d'une fonction de rappel garantit que les actions qui doivent se produire immédiatement après la mise à jour sont effectuées une fois l'état du composant mis à jour.

L'exemple de code est le suivant :

this.setState(
  { count: this.state.count + 1 },
  () => console.log('count updated: ', this.state.count)
);

Dans le code ci-dessus, le deuxième paramètre est une fonction de rappel, qui imprimera setState()la valeur de comptage mise à jour une fois terminée.

18.Expliquez le but de render() dans React.

Dans React, l'objectif principal de la méthode render() est de restituer le composant dans Virtual DOM et de l'insérer dans le DOM. Dans React, chaque fois que l'état du composant change, la méthode render() est appelée pour restituer le composant. En effet, React utilise Virtual DOM pour une manipulation efficace du DOM au lieu de manipuler directement le DOM. Ainsi, chaque fois que l'état du composant change, React recalculera le DOM virtuel, puis comparera le DOM virtuel généré précédemment pour trouver les plus petites modifications à apporter, et enfin mettra à jour uniquement les parties qui doivent être modifiées. Cette approche permet une manipulation efficace du DOM et améliore les performances des applications.

19.Qu'est-ce que la promotion d'État dans React ?

L'amélioration de l'état de React se produit lorsque l'utilisateur opère sur le composant enfant. Le composant enfant ne change pas son propre état. Il transmet les données modifiées par cette opération au composant parent via ses propres accessoires, change l'état du composant parent, et ainsi modifie tous les composants enfants contrôlés par le composant parent. L'état est également déterminé par les caractéristiques du flux de données unique de React.

20.react rafraîchissement forcé

Vous pouvez utiliser la méthode forceUpdate() de React pour forcer l'actualisation d'un composant. Cette méthode entraînera à nouveau l'appel de la méthode render() du composant, rendant ainsi le composant à nouveau.

Par exemple, si vous souhaitez ajouter un bouton à un composant et cliquer sur ce bouton pour forcer l'actualisation du composant, vous pouvez procéder comme suit :

import React, { Component } from 'react';

class MyComponent extends Component {
  handleClick = () => {
    this.forceUpdate();
  }

  render() {
    return (
      <div>
        <button onClick={this.handleClick}>强制刷新</button>
        {/* ... */}
      </div>
    );
  }
}

Dans cet exemple, lorsque l'utilisateur clique sur le bouton, handleClickune méthode est appelée forceUpdate(), qui force un rafraîchissement du composant.

21. Quel est le mode de routage ? Routage de redirection

Le routage React est un modèle de routage côté client utilisé dans les applications React. Il permet aux développeurs de définir de nombreux itinéraires différents au sein de l'application qui peuvent conduire les utilisateurs vers différentes sections ou pages de l'application.

Le routage React a deux modes : hashet history.

En mode hachage, les informations de routage sont stockées dans la partie hachage de l'URL, juste #après le symbole. Par exemple, http://example.com/#/page1. L'avantage de ce modèle est que le navigateur n'envoie pas de requête au serveur après réception de l'URL, mais gère les modifications de routage directement sur le client. L’inconvénient est que l’URL semble un peu étrange et peut également affecter le référencement.

En mode historique, les informations de routage sont stockées dans la partie chemin de l'URL, par exemple http://example.com/page1. L'avantage de ce mode est que l'URL est plus belle et plus conforme à la structure d'URL traditionnelle. L'inconvénient est qu'il nécessite une configuration sur le serveur de développement afin de gérer correctement les informations de routage. Au fur et à mesure que l'utilisateur accède à différentes parties de l'application, le navigateur envoie des requêtes au serveur.

Le routage de redirection est une technique de routage utilisée dans les applications React qui permet aux développeurs de rediriger les utilisateurs d'une URL vers une autre. Ceci est utile dans de nombreuses situations, par exemple lorsqu'un utilisateur tente d'accéder à une page qui nécessite une authentification, mais qu'il n'est pas encore connecté, pour le rediriger vers la page de connexion. React Router fournit un Redirectcomposant pour implémenter le routage de redirection.

22. Comment implémenter le chargement paresseux des itinéraires

Les étapes pour implémenter le chargement différé des routes dans React sont les suivantes :

Utilisez React.lazy()la méthode pour implémenter le fractionnement de code et le chargement paresseux. Cette méthode accepte un objet Promise qui renvoie le composant.
React.lazy()Introduisez les composants à charger paresseux dans . Par exemple:
```
const AsyncComponent = React.lazy(() => import('./AsyncComponent'));
```

React.lazy()Utilisez et dans les composants de routage Suspensepour envelopper les composants à charger paresseux. Par exemple:

import React, { lazy, Suspense } from 'react';
import { Switch, Route } from 'react-router-dom';
const Home = lazy(() => import("./Home"));
const About = lazy(() => import("./About"));

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </Suspense>
    </div>
  );
}

SuspenseUtilisez l'attribut dans un composant pour fallbackspécifier le composant ou l'élément qui s'affiche lors du chargement du composant. Dans cet exemple, nous spécifions un simple texte "Chargement...".

De cette façon, lorsque l'utilisateur accède à une route chargée paresseusement, React chargera le composant de manière asynchrone et affichera une vue de chargement si nécessaire.

23. Méthode de transfert de valeur à terme

Le transfert de valeur vers l'avant dans React fait généralement référence au transfert de données des composants parents vers les composants enfants. Voici plusieurs façons de mettre en œuvre un transfert de valeur à terme :

En passant par props, les données sont transmises au composant enfant en tant que propriété du composant parent. Les données peuvent être obtenues via this.props dans le composant enfant.
À l'aide de l'API de contexte, créez un objet Contexte dans le composant parent et transmettez les données au composant enfant via le composant Fournisseur. Les données peuvent être obtenues via le composant Consommateur dans le composant enfant.
Pour utiliser une fonction de rappel, définissez une fonction de rappel dans le composant parent, transmettez-la en tant que propriété au composant enfant et transmettez les données au composant parent en appelant la fonction de rappel dans le composant enfant.
Utilisez des outils de gestion d'état tels que Redux pour enregistrer l'état de l'application dans le magasin global. Chaque composant peut accéder et modifier l'état de l'application via des méthodes telles que la répartition et l'abonnement.

24. Méthode de transfert de valeur inversée

Dans React, vous pouvez transmettre des valeurs des composants parents aux composants enfants via des accessoires, mais pour transmettre des valeurs des composants enfants aux composants parents, vous devez utiliser certaines méthodes de transfert de valeurs inversées.

Un moyen courant de transmettre des valeurs vers l'arrière consiste à utiliser une fonction de rappel. Définissez une fonction de rappel dans le composant parent et transmettez cette fonction en tant qu'accessoires au composant enfant. Lorsque le composant enfant doit transmettre une valeur au composant parent, il appelle cette fonction de rappel et lui transmet la valeur à passer en paramètre.

Exemple de code :

Composant parent :

import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [message, setMessage] = useState('');

  const handleMessage = (text) => {
    setMessage(text)
  }

  return (
    <div>
      <p>{message}</p>
      <ChildComponent sendMessage={handleMessage} />
    </div>
  )
}

export default ParentComponent;

Sous-ensemble :

import React, { useState } from 'react';

function ChildComponent({ sendMessage }) {
  const [text, setText] = useState('');

  const handleChange = (e) => {
    setText(e.target.value);
  }

  const handleSend = () => {
    sendMessage(text);
  }

  return (
    <div>
      <input type="text" value={text} onChange={handleChange} />
      <button onClick={handleSend}>Send</button>
    </div>
  )
}

export default ChildComponent;

Dans cet exemple, le composant parent définit un état messageet une fonction de rappel handleMessage. Les fonctions de rappel sont transmises aux composants enfants en tant qu'accessoires. Le composant enfant définit un état text, une zone de saisie et un bouton. Lorsque la valeur de la zone de saisie change, textle statut est mis à jour. Lorsque vous cliquez sur le bouton, la fonction de rappel passée par le composant parent sera appelée sendMessageet textlui sera transmise en paramètre.

De cette façon, après avoir saisi du texte dans le composant enfant et cliqué sur le bouton, la valeur du texte sera transmise au composant parent. Le composant parent mettra à jour la valeur du texte transmise à l'état, puis restituera la valeur du texte sur la page message. .

25. Méthode de transfert de valeur compatriote

Dans React, les valeurs entre les composants frères et sœurs doivent être transmises via leur composant parent commun. Une méthode courante consiste à promouvoir l'état partagé (tel que l'état du composant parent) vers leur composant parent commun, et ces états leur sont transmis. comme accessoires.

Une autre méthode courante consiste à utiliser l'API Context de React. Le contexte fournit un moyen de partager des valeurs entre les composants sans les transmettre explicitement via des accessoires.

Exemple de code :

import React, { createContext, useContext, useState } from 'react';

// 创建一个Context对象
const MyContext = createContext();

function ParentComponent() {
  const [message, setMessage] = useState('');

  return (
    // 将状态通过Provider传递给子组件
    <MyContext.Provider value={
   
   { message, setMessage }}>
      <ChildComponent1 />
      <ChildComponent2 />
    </MyContext.Provider>
  )
}

function ChildComponent1() {
  // 使用 useContext 获取 Provider 的值
  const { message } = useContext(MyContext);
  
  return (
    <div>
      <h2>ChildComponent1</h2>
      <p>{message}</p>
    </div>
  )
}

function ChildComponent2() {
  // 使用 useContext 获取 Provider 的 setValue
  const { setMessage } = useContext(MyContext);
  const handleClick = () => {
    setMessage('Hello, ChildComponent1!');
  }

  return (
    <div>
      <h2>ChildComponent2</h2>
      <button onClick={handleClick}>Send Message</button>
    </div>
  )
}

export default ParentComponent;

Dans cet exemple, nous créons un objet Context dans le composant parent et transmettons l'état qui doit être partagé messageainsi qu'une fonction qui met à jour l'état setMessagesous forme de valeurs au composant enfant. Dans le sous-composant, nous obtenons cet objet de valeur via le hook useContext et utilisons ses propriétés et méthodes.

La valeur peut être obtenue directement dans ChildComponent1 messageet restituée dans le composant. Dans ChildComponent2, la valeur peut être setMessagemise à jour en appelant la méthode message.

Il convient de noter que lorsque vous utilisez Context, vous devez vous assurer que le composant Provider contient tous les sous-composants auxquels il faut accéder, sinon les sous-composants risquent de ne pas pouvoir obtenir la valeur Context correcte.

26. Méthode de transfert de valeur entre composants

Il existe plusieurs façons de transmettre des valeurs entre les composants dans React :

Utilisation de l'API contextuelle de React : fournit un moyen de partager des valeurs entre les composants sans les transmettre explicitement via les accessoires couche par couche. Reportez-vous à la réponse précédente.
Utilisez Redux : gérez l'état de l'application en créant un magasin global et mettez à jour les composants d'état et de notification via des actions de répartition. Redux fournit un composant Provider qui peut injecter le magasin dans l'arborescence des composants afin que tous les composants puissent y accéder. Pour plus de détails, consultez le site officiel de Redux
Utilisation de Event Bus : vous pouvez utiliser des bibliothèques tierces, telles que React EventBus , EventEmitter3, etc. pour y parvenir. Le transfert de valeur entre composants est réalisé en liant des événements et en déclenchant des événements sur le bus d'événements.
Utilisez React Router : transmettez les paramètres via l'URL pour transmettre les valeurs entre les composants. Les paramètres peuvent être transmis à l'aide d'une chaîne de requête, d'un hachage, etc. Obtenez les paramètres via props.location dans le composant qui reçoit les paramètres. Pour plus de détails, consultez le site officiel de React Router

Vous devez choisir une méthode appropriée pour transmettre les valeurs entre les composants en fonction de la situation réelle. S'il ne s'agit que d'un simple transfert de valeur entre les composants parent et enfant, il est relativement simple et peut être transmis directement à l'aide d'accessoires. Si la relation entre les composants est complexe ou si de nombreux états doivent être partagés, vous pouvez envisager d'utiliser Redux ou Context pour gérer l'état de l'application. Si vous n'avez besoin de transmettre qu'une petite quantité de données, envisagez d'utiliser un bus d'événements ou un React Router.

27. Qu’entendez-vous par « source unique de données » ?

"Source de données unique" fait référence à la situation dans laquelle il n'y a qu'un seul stockage de données dans le système. La source de données est unifiée, unique et standardisée. Différents modules ou composants métier accèdent à cette source de données pour lire et écrire des données. Cette architecture peut garantir la cohérence et l'exactitude des données, tout en améliorant la sécurité et la maintenabilité des données, en évitant le stockage en double et l'incohérence des données. Une source de données unique peut également réduire la complexité du système et les coûts de maintenance, et faciliter l'expansion et les mises à niveau du système.

Dans les applications React, « source de données unique » fait généralement référence à l'état de l'application qui est uniformément stocké dans l'état d'un composant de niveau supérieur (tel que le composant App), tandis que d'autres composants obtiennent et modifient des données via des accessoires. Ce composant de niveau supérieur peut servir de "source unique de vérité" pour l'application. De cette manière, tous les états sont gérés au même endroit, évitant ainsi les états redondants et incohérents.

React fournit une technique appelée « promotion d'état », qui promeut l'état d'un composant vers son composant parent. De cette manière, l'état du composant enfant devient l'état du composant parent, réalisant le partage et la gestion des états entre les composants. De cette manière, React peut facilement mettre en œuvre une architecture « source de données unique » et garantir la cohérence et la maintenabilité de l'état de l'application.

Redux est une bibliothèque de gestion d'état pour les applications JavaScript. Il suit un modèle architectural appelé « source de données unique », ce qui signifie que l'état complet de l'application est conservé dans un seul objet JavaScript, souvent appelé « magasin ».

Dans Redux, l'état de l'application est considéré comme immuable et ne peut pas être modifié directement. Au lieu de cela, certains changements ne peuvent être décrits que par le biais d'une « action », qui est un simple objet JavaScript contenant des données décrivant le changement.

Lorsqu'une action est distribuée (ou « distribuée ») au magasin, le magasin met à jour l'état en fonction de l'action. Ce modèle de « flux de données unidirectionnel » rend la gestion des changements d'état plus prévisible et contrôlable, et évite certains problèmes courants de gestion d'état, tels que la difficulté de suivre les changements d'état, les incohérences d'état, etc.

Par conséquent, la « source de données unique » est l'un des concepts fondamentaux de Redux, qui permet de sauvegarder l'intégralité de l'état de l'application dans un seul objet JavaScript pour une gestion et une maintenance faciles. De plus, Redux fournit également des outils et règles couramment utilisés (tels que « fonctions pures », « middleware », etc.) pour aider les développeurs à mieux gérer l'état des applications.

28. Comment modifier l'événement ceci

Dans React, cette fonction de gestion d'événements pointe vers undefined par défaut, pas vers l'instance du composant (ou vers null). Par conséquent, si vous souhaitez accéder aux propriétés d'instance du composant ou appeler la méthode du composant dans le gestionnaire d'événements, vous devez la lier à l'instance du composant.

Il existe de nombreuses façons de lier cela à la fonction de gestion des événements. Voici quelques méthodes courantes :

1. Utilisez la méthode bind() dans le constructeur pour lier ceci :

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // 在这里使用组件实例的属性或方法
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

2. Utilisez les fonctions fléchées pour définir les fonctions de gestion des événements, car les fonctions fléchées héritent automatiquement du contexte :

class MyComponent extends React.Component {
  handleClick = () => {
    // 在这里使用组件实例的属性或方法
  }

  render() {
    return (
      <button onClick={this.handleClick}>Click me</button>
    );
  }
}

3. Utilisez la méthode Function.prototype.bind() :

class MyComponent extends React.Component {
  handleClick() {
    // 在这里使用组件实例的属性或方法
  }

  render() {
    return (
      <button onClick={this.handleClick.bind(this)}>Click me</button>
    );
  }
}

Quelle que soit la méthode utilisée, vous devez la lier à l'instance du composant afin que les propriétés et les méthodes du composant puissent être utilisées dans la fonction de gestionnaire d'événements.

Quel problème Redux résout-il ? Comment ça marche?

Les frameworks à vue pure comme le framework React n'ont pas de bonnes solutions pour la communication des composants, le partage d'état, etc. Ils ne peuvent utiliser que des solutions techniques telles que la promotion d'état et le contexte pour résoudre le problème. Cependant, lorsque la structure des composants et la direction du flux de données sont plus complexe, l'API de React est quelque peu difficile à résoudre de tels problèmes.

À l'heure actuelle, vous pouvez utiliser des méthodes architecturales telles que Flux et Redux pour résoudre le problème.

Nos projets précédents utilisaient Redux, et plus tard rtk a été introduit, ce qui a rendu plus pratique l'utilisation de redux dans les composants React. Dans certains petits projets ou certains petits modules, useReducerHook peut être utilisé pour créer l'état et la répartition. Résoudre les problèmes rapidement et avec élégance.

Dans le Redux natif précédent, dans le développement de projets réels, redux-thunk était souvent nécessaire pour le traitement des actions asynchrones, et React-redux était utilisé pour connecter les composants au magasin. Si React-redux n'était pas utilisé, ce serait plus encombrant.

La structure de redux est divisée en magasin, vues, actions et réducteur.

L'état stocké dans le Store peut être obtenu via getState dans la vue, ou peut être surveillé via la méthode d'abonnement. Lorsque la vue génère une opération d'interface utilisateur, la méthode actions peut être appelée pour générer l'action, puis la méthode de répartition est utilisée. À expédier. À ce moment, le réducteur sera appelé et recevra le statut actuel et l'objet d'action. Après le calcul, le nouveau statut sera renvoyé et le magasin mettra à jour le statut.

Après avoir utilisé React-redux, le composant peut obtenir l'état dans le magasin et les méthodes dans les actions via la connexion avec les paramètres mapStateToProps et mapDispatchToProps.

Après avoir utilisé RTK, il est plus facile et plus pratique de créer des réducteurs. Utilisez useSelector et useDispatch pour accéder à l'état et répartir les actions plus rapidement et plus efficacement.

Pour un petit scénario, par exemple, le module d'enregistrement que j'ai créé auparavant comporte trois étapes. Chaque étape nécessite le numéro de téléphone mobile et d'autres informations renseignées par l'utilisateur lors de la première étape. Cela forme un partage d'état entre plusieurs petits composants. Si vous utilisez Améliorer l'état du composant parent entraînera un flux de données flou et il n'est pas possible d'utiliser redux-store pour le stockage, j'ai donc utilisé useReducer pour créer rapidement un petit magasin, qui intègre l'état et la répartition en interne. résout également le problème de manière très efficace.

Comment Redux Notify réagit-il aux modifications de données ? Quel est le processus de notification ?

L'état dans le magasin dans Redux doit être obtenu à l'aide de la méthode getState. Seuls les attributs et les changements d'état dans la scène mise à jour dans le composant peuvent entraîner un nouveau rendu du composant. Par conséquent, dans le développement normal, il est souvent nécessaire de monter l'état dans le magasin à l'état correspondant du composant, attendez que l'état dans le magasin change et mettez à jour l'état du composant en même temps, ce qui amènera le composant à restituer les dernières données.

À ce stade, vous devez utiliser la méthode store,.subscribe pour surveiller les changements d'état dans le magasin. Lorsque l'état dans le magasin change, le composant mettra à jour son propre état.

Après avoir utilisé la connexion de React-Redux, vous n'avez pas besoin d'écrire un tel code, car le composant conteneur généré par la connexion basée sur mapStateToProps a déjà surveillé les changements d'état et le composant d'interface utilisateur n'a qu'à attendre la réception des propriétés.

Le rôle des clés dans React

Lorsqu'un composant React est mis à jour, React générera une nouvelle arborescence DOM virtuelle complète à comparer avec le DOM virtuel précédent, puis mettra à jour les positions liées aux nœuds mis à jour.

La correspondance et la comparaison sont souvent nécessaires avant la comparaison.Afin d'obtenir une correspondance plus précise,React espère ajouter manuellement des attributs clés aux éléments dans les boucles de liste et à d'autres positions, afin qu'une correspondance précise puisse être effectuée en recherchant des clés pendant la comparaison.

J'ai déjà rencontré cette situation lorsque je travaillais sur des projets auparavant. J'utilise généralement l'ID des données comme clé. Une fois qu'il y a eu un problème. Il n'y avait pas de clé primaire comme l'ID dans les données fournies par le backend, j'ai donc utilisé le index comme clé. , la comparaison s'est mal déroulée lors de l'ajout de l'élément en haut de la liste de données. En fin de compte, j'ai dû trouver le backend pour ajouter un identifiant unique pour le gérer.

Comment simuler le cycle de vie lors de la programmation avec des hooks ?

La principale utilisation des hooks pour simuler le cycle de vie des composants de fonction est useEffect.

Si le tableau de dépendances de useEffect est un tableau vide, composantDidMount est simulé à ce moment-là ;

Si le tableau de dépendances de useEffect n'est pas vide, composantDidUpdate est simulé à ce moment-là ;

Si la fonction de rappel de useEffect renvoie une fonction, à ce moment-là, la fonction renvoyée simule ComponentWillUnmount.