Fermer

juin 25, 2020

15 questions d'entrevue React avec des solutions –


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.

Diagramme conceptuel de Redux

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