Maison >interface Web >js tutoriel >Quelques questions d'entretien courantes sur React (partager)

Quelques questions d'entretien courantes sur React (partager)

青灯夜游
青灯夜游avant
2020-08-04 17:16:125467parcourir

Quelques questions d'entretien courantes sur React (partager)

[Recommandations de sujets connexes : questions d'entrevue de réaction (2020)]

1. Le logiciel fournit un mode plug-in tiers pour personnaliser le processus d'interception du réducteur d'action-> Devenir action -> middlewares -> Ce mécanisme nous permet de modifier le flux de données et de mettre en œuvre des fonctions telles que l'action asynchrone, le filtrage des actions, la sortie du journal, le rapport d'exceptions, etc.

Middleware commun : redux-logger : fournit une sortie de journal ; redux-thunk : gère les opérations asynchrones ; redux-promise : gère les opérations asynchrones ; la valeur de retour d'actionCreator est promise

2. sont les inconvénients ?

Réponse : 1. Les données requises par un composant doivent être transmises depuis le composant parent, et ne peuvent pas être obtenues directement depuis le magasin comme le flux.

2. Lorsque les données pertinentes d'un composant sont mises à jour, même si le composant parent n'a pas besoin d'utiliser ce composant, le composant parent sera quand même restitué, ce qui peut avoir un impact sur l'efficacité, ou il peut être nécessaire d'écrire un ShouldComponentUpdate complexe pour le jugement.

3. Comment les composants de réaction sont-ils divisés en composants métier et composants techniques ?

Réponse : les composants sont généralement divisés en composants d'interface utilisateur et en composants de conteneur en fonction de leurs responsabilités. Les composants de l'interface utilisateur sont responsables de la présentation de l'interface utilisateur et les composants du conteneur sont responsables de la gestion des données et de la logique. Les deux sont connectés via la méthode de connexion fournie par React-Redux.

4. Fonction de cycle de vie React

Réponse : 1. Phase d'initialisation :

getDefaultProps : récupère les propriétés par défaut de l'instance

getInitialState : récupère chaque instance État d'initialisation

componentWillMount : Le composant est sur le point d'être chargé et rendu sur la page

render : Le composant génère un nœud DOM virtuel ici

componentDidMount : Le composant est réellement chargé après son chargement

2. État d'exécution :

componentWillReceiveProps : appelé lorsque le composant est sur le point de recevoir des propriétés

shouldComponentUpdate : lorsque le composant reçoit de nouvelles propriétés ou de nouvelles status (peut renvoyer false , ne se met pas à jour après avoir reçu des données, empêche les appels de rendu et les fonctions suivantes ne continueront pas à être exécutées)

componentWillUpdate : le composant est sur le point d'être mis à jour et ne peut pas modifier les propriétés et l'état

Render : Le composant est redessiné

componentDidUpdate : Le composant a été mis à jour

3 Phase de destruction :

componentWillUnmount : Le composant est sur le point d'être détruit

5. Quelle fonction périodique est l'optimisation des performances de réaction ?

Réponse : ShouldComponentUpdate Cette méthode est utilisée pour déterminer si la méthode de rendu doit être appelée pour redessiner le dom. Étant donné que le rendu du DOM consomme beaucoup de performances, si nous pouvons écrire un algorithme de comparaison DOM plus optimisé dans la méthode ShouldComponentUpdate, les performances peuvent être considérablement améliorées.

6. Pourquoi le dom virtuel améliore-t-il les performances ?

Réponse : Le dom virtuel équivaut à ajouter un cache entre js et le dom réel, en utilisant l'algorithme dom diff pour éviter les opérations dom inutiles, améliorant ainsi. performance.

Les étapes spécifiques de mise en œuvre sont les suivantes :

1. Utilisez la structure d'objet JavaScript pour représenter la structure de l'arborescence DOM, puis utilisez cette arborescence pour créer une véritable arborescence DOM et insérez-la dans le document;

2. Lorsque l'état change, reconstruisez une nouvelle arborescence d'objets. Comparez ensuite le nouvel arbre avec l'ancien arbre et enregistrez les différences entre les deux arbres ;

Appliquez les différences enregistrées à l'étape 2 au véritable arbre DOM construit à l'étape 1, et la vue sera mise à jour.

7. Algorithme Diff ?

Réponse : 1. Décomposez l'arborescence selon les niveaux et comparez uniquement les éléments du même niveau.

2. Ajoutez un attribut clé unique à chaque unité de la structure de liste pour faciliter la comparaison.

3. React ne fera correspondre que les composants de la même classe (la classe fait ici référence au nom du composant)

4. Dans l'opération de fusion, lors de l'appel de la méthode setState du composant. , React sera marqué comme sale. À la fin de chaque boucle d'événement, React vérifie tous les composants marqués comme sales et les redessine

6. Rendu sélectif des sous-arbres. Les développeurs peuvent remplacer ShouldComponentUpdate pour améliorer les performances des différences.

8. Solution d'optimisation des performances React

Réponse : 1) Réécrivez ShouldComponentUpdate pour éviter les opérations DOM inutiles.

2) Utilisez la version de production de React.js.

3) Utilisez la clé pour aider React à identifier les plus petits changements de tous les sous-composants de la liste

9 Décrivez brièvement l'idée du flux

Réponse : La plus grande fonctionnalité de Flux est. le « sens unique » du flux de données ».

1. L'utilisateur accède à la vue

2. La vue émet l'action de l'utilisateur

3 Le répartiteur reçoit l'action et demande au magasin de se mettre à jour en conséquence

.

4 Après la mise à jour du .Store, un événement "change" est envoyé

5. Vue Après avoir reçu l'événement "change", la page est mise à jour

10. Quel type de un échafaudage a-t-il été utilisé dans le projet React ? Mern ? Yeoman ?

Réponse : Mern : MERN est un outil d'échafaudage qui peut facilement générer des applications JS isomorphes à l'aide de Mongo, Express, React et NodeJS. Il minimise le temps d'installation et vous permet d'utiliser une technologie éprouvée pour accélérer le développement.

11. Connaissez-vous React ?

R : Oui, React est une bibliothèque de composants légère développée par Facebook. Elle est utilisée pour résoudre certains problèmes de la couche de vue frontale, qui est le problème de la couche V dans MVC son site Web interne Instagram. utilise React.

12. Quels problèmes React résout-il ?

Réponse : Trois problèmes ont été résolus : 1. Problème de réutilisation des composants, 2. Problème de performances, 3. Problème de compatibilité :

13. Protocole React ?

Réponse : L'accord suivi par React est "Licence BSD + Accord Open Source breveté". Cet accord est assez étrange si votre produit n'est pas en concurrence avec Facebook, vous pouvez utiliser React librement, mais s'il y a de la concurrence. , , votre licence d'utilisation de React sera annulée

14. Comprenez-vous ShouldComponentUpdate ?

Réponse : La technologie React Virtual dom nécessite une comparaison différentielle constante entre le dom et le dom virtuel. Si l'arborescence dom est grande, cette opération de comparaison prendra plus de temps. Par conséquent, React fournit une fonction de correctif telle que ShouldComponentUpdate. Si Pour certains changements, si nous ne voulons pas qu'un composant soit actualisé, ou s'il est actualisé et reste le même qu'avant, nous pouvons utiliser cette fonction pour l'indiquer directement à React, éliminant ainsi le besoin d'opérations de comparaison et améliorant encore l'efficacité.

15. Comment fonctionne React ?

Réponse : React créera un DOM virtuel. Lorsque l'état d'un composant change, React marquera d'abord les changements dans le DOM virtuel via l'algorithme de « différence ». La deuxième étape est la réconciliation, et le DOM sera mis à jour avec les résultats de la différence.

16. Quels sont les avantages d’utiliser React ?

Réponse : 1. Il est facile de savoir comment un composant est rendu en regardant simplement la fonction de rendu

2 L'introduction de JSX rend le code du composant plus lisible et plus facile à comprendre. la disposition des composants, ou la façon dont les composants se réfèrent les uns aux autres

3. Prise en charge du rendu côté serveur, ce qui peut améliorer le référencement et les performances

4 Facile à tester

5. . React se concentre uniquement sur la couche View, il peut donc être utilisé avec n'importe quel autre framework (tel que Backbone.js, Angular.js)

17 Il existe une différence entre le composant de présentation (composant Présentation) et. le composant conteneur (Composant Container) Quelle est la différence ?

Réponse : 1. Les composants d'affichage se soucient de leur apparence. Display accepte spécifiquement les données et les rappels via des accessoires et n'a presque jamais son propre état, mais lorsque le composant d'affichage a son propre état, il ne se soucie généralement que de l'état de l'interface utilisateur plutôt que de l'état des données.

2. Les composants du conteneur sont plus préoccupés par la façon dont les composants fonctionnent. Les composants de conteneur fournissent des données et un comportement au composant de présentation ou à d'autres composants de conteneur. Ils appellent des actions Flux et les fournissent sous forme de rappels au composant de présentation. Les composants conteneurs sont souvent avec état car ce sont des sources de données (pour les autres composants)

18. Quelle est la différence entre un composant Classe et un composant Fonctionnel ?

Réponse : 1. Les composants de classe vous permettent non seulement d'utiliser davantage de fonctions supplémentaires, telles que l'état et les hooks de cycle de vie du composant, mais permettent également au composant d'accéder directement au magasin et de maintenir son état

2. Lorsqu'un composant reçoit uniquement des accessoires et restitue le composant lui-même sur la page, le composant est un « composant sans état » et peut être créé à l'aide d'une fonction pure. De tels composants sont également appelés composants stupides ou composants de présentation

19. Quelle est la différence entre l'état (state) et les accessoires (d'un composant) ?

Réponse : 1. L'état est une structure de données utilisée pour la valeur par défaut des données requises lors du montage du composant. L'état peut muter au fil du temps, mais le plus souvent en raison du comportement des événements de l'utilisateur.

2. Props (abréviation de propriétés) est la configuration du composant. Les accessoires sont transmis des composants parents aux composants enfants, et en ce qui concerne les composants enfants, les accessoires sont immuables. Un composant ne peut pas modifier ses propres accessoires, mais il peut assembler les accessoires de ses sous-composants (gestion unifiée). Les accessoires ne sont pas non plus de simples données : les fonctions de rappel peuvent également être transmises via des accessoires.

20. Où la requête Ajax doit-elle être initiée dans le composant React ?

Réponse : dans les composants React, les requêtes réseau doivent être initiées dans composantDidMount. Cette méthode sera exécutée lors du premier "montage" du composant (ajouté au DOM) et ne sera exécutée qu'une seule fois dans le cycle de vie du composant. Plus important encore, vous n'êtes pas assuré que la requête Ajax soit terminée avant que le composant ne soit monté, et si c'est le cas, cela signifie que vous essaierez d'appeler setState sur un composant non monté, ce qui ne fonctionnera pas. Faire une requête réseau dans composantDidMount garantira qu'il existe un composant prêt à être mis à jour.

21. Qu'est-ce qu'un composant contrôlé ?

Réponse ; En HTML, les éléments de formulaire tels que ,