La popularité de React ne montre aucun signe de déclin, la demande de développeurs dépassant toujours l'offre dans de nombreuses villes du monde. Pour les développeurs moins expérimentés (ou ceux qui ont été hors du marché du travail pendant un certain temps), démontrer vos connaissances au stade de l'entretien peut être intimidant.

Dans cet article, nous examinerons quinze questions couvrant une gamme des connaissances essentielles pour comprendre et travailler efficacement avec React. Pour chaque question, je vais résumer la réponse et donner des liens vers des ressources supplémentaires où vous pouvez en savoir plus.

1. Qu'est-ce que le DOM virtuel?

Réponse

Le DOM virtuel est une représentation en mémoire des éléments HTML réels qui composent l'interface utilisateur de votre application. Lorsqu'un composant est restitué, le DOM virtuel compare les modifications apportées à son modèle de DOM afin de créer une liste de mises à jour à appliquer. Le principal avantage est qu'il est très efficace, n'apportant que les modifications minimales nécessaires au DOM réel, plutôt que d'avoir à restituer de gros morceaux.

Lectures complémentaires

2. Qu'est-ce que JSX?

Réponse

JSX est une extension de la syntaxe JavaScript qui permet d'écrire du code qui ressemble à du HTML. Il se compile en appels de fonction JavaScript normaux, offrant une meilleure façon de créer le balisage pour vos composants.

Prenez ce JSX:

Il se traduit par le code JavaScript suivant:

 React.createElement (
  'div',
  {className: 'sidebar'}
)

Lectures complémentaires

3. Quelle est la différence entre un composant de classe et un composant fonctionnel?

Réponse

Avant React 16.8 (l'introduction des hooks), les composants basés sur la classe étaient utilisés pour créer des composants qui devaient maintenir l'état interne ou utiliser des méthodes de cycle de vie (c'est-à-dire componentDidMount et shouldComponentUpdate ). Un composant basé sur une classe est une classe ES6 qui étend la classe Composant de React et, au minimum, implémente une méthode render () .

Composant de classe :

 La classe Welcome étend React.Component {
  render () {
    return 
 Bonjour, {this.props.name} 
;
  }
}

Les composants fonctionnels sont sans état (encore une fois, <React 16.8) et renvoient la sortie à rendre. Ils sont préférés pour le rendu de l'interface utilisateur qui ne dépend que des accessoires, car ils sont plus simples et plus performants que les composants basés sur les classes.

Composant fonctionnel :

 fonction Welcome (props) {
  retour 
 Bonjour, {props.name} 
;
}

Remarque: l'introduction d'hameçons dans React 16.8 signifie que ces distinctions ne s'appliquent plus (voir questions 14 et 15).

Lectures complémentaires

4. À quoi servent les clés?

Réponse

Lors du rendu des collections dans React, l'ajout d'une clé à chaque élément répété est important pour aider React à suivre l'association entre les éléments et les données. La clé doit être un ID unique, idéalement un UUID ou une autre chaîne unique de l'élément de collection, mais qui peut être un index de tableau en dernier recours:

   {todos.map ((todo) =>
    

      {todo.text}
    
  )};

Le fait de ne pas utiliser de clé peut entraîner un comportement étrange lors de l'ajout et de la suppression d'éléments de la collection.

Pour en savoir plus

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

Réponse

Les accessoires sont des données transmises à un composant à partir de son parent. Ils ne doivent pas être mutés, mais plutôt affichés ou utilisés pour calculer d'autres valeurs. L'état est les données internes d'un composant qui peuvent être modifiées pendant la durée de vie du composant et sont conservées entre les rendus.

Lectures complémentaires

6. Pourquoi appeler setState au lieu de muter directement l'état?

Réponse

Si vous essayez de muter directement l'état d'un composant, React n'a aucun moyen de savoir qu'il doit restituer le composant. En utilisant la méthode setState () React peut mettre à jour l'interface utilisateur du composant.

Bonus

En prime, vous pouvez également expliquer comment les mises à jour d'état ne sont pas garanties synchrones. Si vous devez mettre à jour l'état d'un composant en fonction d'un autre état (ou accessoires), passez une fonction à setState () qui prend l'état et les accessoires comme ses deux arguments:

 this.setState ((state, props) => ({
  compteur: state.counter + props.increment
}));

Pour en savoir plus

7. Comment restreindre le type de valeur passée en tant qu'accessoire ou le rendre obligatoire?

Réponse

Pour vérifier les accessoires d'un composant, vous pouvez utiliser le package prop-types ( précédemment inclus dans le cadre de React, avant 15.5) pour déclarer le type de valeur attendu et si l'hélice est requise ou non:

 importez des PropTypes à partir de 'prop-types';

classe Greeting étend React.Component {
  render () {
    revenir (
      
 Bonjour, {this.props.name} 
    );
  }
}

Greeting.propTypes = {
  nom: PropTypes.string
};

Lectures complémentaires

8. Qu'est-ce que le forage par hélice et comment l'éviter?

Réponse

Le forage par hélice est ce qui se produit lorsque vous devez transmettre des données d'un composant parent à un composant situé plus bas dans la hiérarchie, en «explorant» d'autres composants qui ont

Parfois, le perçage des accessoires peut être évité en refactorisant vos composants, en évitant de décomposer prématurément les composants en plus petits et en conservant l'état commun dans le parent commun le plus proche. Lorsque vous devez partager l'état entre des composants qui sont éloignés / éloignés dans votre arborescence de composants, vous pouvez utiliser l'API contextuelle de React ou une bibliothèque de gestion d'état dédiée comme Redux .

Lectures complémentaires

9. Qu'est-ce que le contexte React?

Réponse

L'API de contexte est fournie par React pour résoudre le problème du partage d'état entre plusieurs composants au sein d'une application. Avant l'introduction du contexte, la seule option consistait à introduire une bibliothèque de gestion d'état distincte, telle que Redux. Cependant, de nombreux développeurs estiment que Redux introduit beaucoup de complexité inutile, en particulier pour les petites applications.

Lectures complémentaires

10.

Réponse

Redux est une bibliothèque de gestion d'état tierce pour React, créée avant que l'API de contexte n'existe. Il est basé sur le concept d'un conteneur d'état, appelé magasin, à partir duquel les composants peuvent recevoir des données sous forme d'accessoires. La seule façon de mettre à jour le magasin est d'envoyer une action au magasin, qui est passée dans un réducteur. Le réducteur reçoit l'action et l'état actuel et renvoie un nouvel état, déclenchant le rendu des composants souscrits.

Lectures complémentaires

11. Quelles sont les approches les plus courantes pour styliser une application React?

Réponse

Il existe différentes approches pour styliser les composants React, chacune avec ses avantages et ses inconvénients. Les principaux à mentionner sont:

• Style en ligne : idéal pour le prototypage, mais a des limites (par exemple, aucun style de pseudo-classes)
• Styles CSS basés sur les classes : plus performant que le style en ligne, et familier aux développeurs débutants dans React
• Style CSS-in-JS : il existe une variété de bibliothèques qui permettent de déclarer les styles en tant que JavaScript dans les composants, en les traitant plus comme du code.

19659067] 12. Quelle est la différence entre un composant contrôlé et un composant non contrôlé?

Réponse

Dans un document HTML, de nombreux éléments de formulaire (par exemple ) conservent leur propre état. Un composant non contrôlé traite le DOM comme la source de vérité pour l'état de ces entrées. Dans un composant contrôlé, l'état interne est utilisé pour garder une trace de la valeur de l'élément. Lorsque la valeur de l'entrée change, React restitue l'entrée.

Les composants non contrôlés peuvent être utiles lors de l'intégration avec du code non React (par exemple, si vous devez prendre en charge une sorte de plugin de formulaire jQuery).

13. Quelles sont les méthodes de cycle de vie?

Réponse

Les composants basés sur une classe peuvent déclarer des méthodes spéciales qui sont appelées à certains moments de son cycle de vie, comme quand il est monté (rendu dans le DOM) et quand il est sur le point d'être démonté. Ils sont utiles pour configurer et démonter les éléments dont un composant pourrait avoir besoin, pour configurer des minuteurs ou pour se lier aux événements du navigateur, par exemple.

Les méthodes de cycle de vie suivantes sont disponibles à implémenter dans vos composants:

• componentWillMount : appelé après la création du composant, mais avant son rendu dans le DOM
• componentDidMount : appelé après le premier rendu; l'élément DOM du composant est désormais disponible
• componentWillReceiveProps : appelé lors de la mise à jour d'un accessoire
• shouldComponentUpdate : lorsque de nouveaux accessoires sont reçus, cette méthode peut empêcher un nouveau rendu pour optimiser les performances
• componentWillUpdate : appelé lorsque de nouveaux accessoires sont reçus et devraitComponentUpdate renvoie vrai
• componentDidUpdate : appelé après la mise à jour du composant
• componentWillUnmount : appelé avant que le composant ne soit supprimé du DOM, ce qui vous permet de nettoyer des choses comme les écouteurs d'événements.

Pour en savoir plus

14. Que sont les crochets React?

Réponse

Les crochets sont la tentative de React d'apporter les avantages des composants basés sur la classe (c.-à-d. L'état interne et les méthodes de cycle de vie) aux composants fonctionnels.

Pour en savoir plus

15. Quels sont les avantages des crochets React?

Réponse

L'introduction de crochets dans React présente plusieurs avantages:

• Suppression du besoin de composants basés sur la classe, de crochets de cycle de vie et ce mot-clé shenanigans
• Faciliter la réutilisation de la logique, en faisant abstraction de fonctionnalités communes dans des crochets personnalisés
• Code plus lisible et testable en étant capable de séparer la logique des composants eux-mêmes

Lectures complémentaires

Wrapping Up

Bien que nullement une liste complète (React évolue constamment), ces questions couvrent beaucoup de terrain. La compréhension de ces sujets vous donnera une bonne connaissance pratique de la bibliothèque, ainsi que certains de ses changements les plus récents. Le suivi de la lecture supplémentaire suggérée vous aidera à consolider votre compréhension, afin que vous puissiez démontrer une connaissance approfondie.

Nous ferons un suivi avec un guide des exercices de code d'entrevue React, alors gardez un œil sur cela dans le futur proche.

Bonne chance!