Catégories
Astuces et Design

15 questions d'entrevue React avec des solutions – SitePoint

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 sont hors du marché du travail depuis un certain temps), démontrer vos connaissances au stade de l'entretien peut être intimidant.

Dans cet article, nous examinerons quinze questions couvrant un éventail de 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épondre

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épondre

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 réguliers, offrant une meilleure façon de créer le balisage pour vos composants.

Prenez ce JSX:

Cela se traduit par le 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épondre

Avant React 16.8 (l'introduction des crochets), les composants basés sur les classes étaient utilisés pour créer des composants qui devaient maintenir l'état interne ou utiliser des méthodes de cycle de vie (c.-à-d. componentDidMount et shouldComponentUpdate). Un composant basé sur une classe est une classe ES6 qui étend la capacité de React Component classe et, au minimum, met en œuvre un render() méthode.

Composant de classe:

class Welcome extends React.Component {
  render() {
    return 

Hello, {this.props.name}

; } }

Les composants fonctionnels sont sans état (encore une fois, <React 16.8) et retournent 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:

function Welcome(props) {
  return 

Hello, {props.name}

; }

Remarque: l'introduction de crochets dans React 16.8 signifie que ces distinctions ne s'appliquent plus (voir les questions 14 et 15).

Lectures complémentaires

4. À quoi servent les clés?

Répondre

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}
  • )};

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.

Lectures complémentaires

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

Répondre

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 l'état directement en mutation?

Répondre

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 le setState() , React peut mettre à jour l'interface utilisateur du composant.

Prime

En prime, vous pouvez également parler de la façon dont les mises à jour d'état ne sont pas garanties d'être 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 state et props comme ses deux arguments:

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

Lectures complémentaires

7. Comment restreignez-vous le type de valeur transmis comme accessoire ou le rendez-vous obligatoire?

Répondre

Pour vérifier les accessoires d'un composant, vous pouvez utiliser le prop-types package (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:

import PropTypes from 'prop-types';

class Greeting extends React.Component {
  render() {
    return (
      

Hello, {this.props.name}

); } } Greeting.propTypes = { name: PropTypes.string };

Lectures complémentaires

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

Répondre

Le perçage des accessoires 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 «perçant» d'autres composants qui n'ont pas besoin des accessoires eux-mêmes, sauf pour les transmettre.

Parfois, le forage d'hélice 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. Quel est le contexte de React?

Répondre

L'API de contexte est fournie par React pour résoudre le problème du partage de l'é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. Qu'est-ce que Redux?

Répondre

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 abonnés.

Diagramme conceptuel de Redux

Lectures complémentaires

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

Répondre

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 novices de React
  • Style CSS-in-JS: il existe une variété de bibliothèques qui permettent de déclarer les styles comme JavaScript dans les composants, en les traitant plus comme du code.

Lectures complémentaires

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

Répondre

Dans un document HTML, de nombreux éléments de formulaire (par ex.