[Questions d'entretien frontal] Questions d'entretien frontal 2023 - React

Il y a toujours des hauts et des bas dans la vie d'une personne. Il ne se lèvera pas toujours comme le soleil levant, et il ne sera pas toujours misérable. Des hauts et des bas répétés constituent un entraînement pour une personne. Par conséquent, ceux qui flottent au-dessus n’ont pas besoin d’être fiers ; ceux qui coulent en bas n’ont pas besoin d’être pessimistes. Nous devons être francs et humbles, optimistes et entreprenants, et aller de l’avant. ——Konosuke Matsushita

Bonjour à tous, je m'appelle Jiang Chen. Dans l'environnement Internet d'aujourd'hui, tout le monde a dû le ressentir dans une certaine mesure. Dans cette société impétueuse, ce n'est qu'en maintenant constamment son caractère que l'on peut percevoir des gains différents et s'encourager mutuellement.

Une collection des dernières questions d'entretien en 2023, alors soyez prêt à tout moment.

Cet article a été publié pour la première fois sur le compte public WeChat : Wild Programmer Jiang Chen

Tout le monde est invité à aimer, collectionner et suivre

Liste des articles

Quand faire appel à des gestionnaires d’État ?

Du point de vue de la structure globale du projet, il est nécessaire de choisir une vitesse adaptée au contexte du projet. Si l'arrière-plan du projet ne convient pas à l'utilisation du gestionnaire de statut, il n'est alors pas nécessaire de l'utiliser, comme l'applet WeChat, etc., qui peut être visualisé à partir des dimensions suivantes

L'utilisation des utilisateurs est complexe

Les utilisateurs avec des identités différentes ont des méthodes d'utilisation différentes (comme les utilisateurs ordinaires et les administrateurs)
La collaboration entre plusieurs utilisateurs est possible
Interagir fortement avec le serveur ou utiliser des WebSockets
View doit obtenir des données de plusieurs sources

Du point de vue des composants

L'état d'un certain composant doit être partagé
Un certain état doit être disponible de n'importe où
Un composant doit changer d'état global
Un composant doit changer l'état d'un autre composant

Qu’est-ce que le détournement de rendu ?

Qu'est-ce que le détournement de rendu ? Le concept de détournement de rendu est la capacité de contrôler la sortie d'un composant à partir d'un autre composant. Bien entendu, ce concept est généralement expliqué plus clairement avec les composants d'ordre supérieur (HOC) dans React.

Les composants d'ordre supérieur peuvent effectuer de nombreuses opérations dans la fonction de rendu pour contrôler la sortie de rendu du composant d'origine.Tant que le rendu du composant d'origine est modifié, nous appelons cela une sorte de détournement de rendu.

En fait, dans les composants d'ordre élevé, le rendu combiné et le rendu conditionnel sont tous deux des types de détournement de rendu. Grâce à l'héritage inverse, non seulement les deux points ci-dessus peuvent être obtenus, mais également les éléments React générés par la fonction de rendu du composant d'origine. être renforcée.

Dans les opérations réelles, le détournement du rendu peut être réalisé par l'état de fonctionnement et les accessoires.

Comment parvenir à l’internationalisation des composants React ?

La solution qui s'appuie sur i18next a un problème très pénible pour les grands projets d'entreprise, à savoir la maintenance des fichiers json. Chaque itération du produit doit ajouter de nouvelles configurations, donc qui maintiendra cette configuration et comment la maintenir posera de nombreux problèmes. Et si votre projet doit prendre en charge des dizaines de langues, qu'en est-il de ces dizaines de documents ?

Par conséquent, une solution plus courante parmi les grands fabricants consiste désormais à utiliser AST. Chaque fois qu'une nouvelle version est développée, tous les codes sont scannés via AST pour découvrir le chinois dans le code. Le chinois est utilisé comme clé et le service de traduction intelligent est appelé pour générer automatiquement le fichier project.json. De cette façon, les humains n'ont plus besoin de maintenir les fichiers json, tout repose sur des outils d'automatisation. À l’heure actuelle, il existe déjà des sources ouvertes de grands fabricants, comme le di18n de Didi et le kiwi d’Alibaba.

Comment React effectue-t-il le fractionnement du code ? Quel est le principe du fractionnement ?

Je pense que la condition préalable au fractionnement de réaction est les spécifications de conception du répertoire de code, les spécifications de définition de module, les spécifications de conception de code et le respect des principes généraux de conception de programme, tels qu'une cohésion élevée, un faible couplage, etc.

Dans notre projet React :

Au niveau de l'API, nous l'encapsulons séparément et exposons les résultats des requêtes http au monde extérieur.
Dans la couche de données, nous utilisons le package mobx pour gérer les requêtes asynchrones et le traitement de la logique métier.
Dans la couche vue, essayez d'utiliser les données transmises par la couche mobx pour modifier la logique.
Les ressources de type statique sont placées séparément
Les composants publics, les composants de niveau supérieur et les plug-ins sont placés séparément
Les fichiers d'outils sont placés séparément

Où détecter les erreurs dans React ?

Exemple de site officiel :

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    logErrorToMyService(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <h1>Something went wrong.</h1>;
    }

    return this.props.children; 
  }
}

utiliser

<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

Mais les limites d'erreur ne seront pas détectées :

try{}catch(err){}
///异步代码（例如 setTimeout 或 requestAnimationFrame 回调函数）
///服务端渲染
///它自身抛出来的错误（并非它的子组件)

Pourquoi les accessoires dans React sont-ils en lecture seule ?

Le modèle de conception qui garantit le flux de données unidirectionnel de React rend l'état plus prévisible. Si la modification d'un auto-composant est autorisée, alors un composant parent transmettra l'état à plusieurs sous-composants. Si ces sous-composants sont modifiés à volonté, ce sera complètement imprévisible. Nous ne savons pas où l'état est modifié, donc nous devons protéger les accessoires contre la modification comme des fonctions pures.

Comment utiliser les Hooks pour obtenir des données côté serveur ?

import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
  const [data, setData] = useState({ hits: [] });
  useEffect(async () => {
    const result = await axios(
      'https://api/url/to/data',
    );
    setData(result.data);
  });
  return (
    <ul>
      {data.hits.map(item => (
        <li key={item.objectID}>
          <a href={item.url}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}
export default App;

Quels principes doivent être suivis lors de l’utilisation de Hooks ?

N'utilisez les crochets qu'au niveau supérieur

N'appelez pas de Hooks à l'intérieur de boucles, de conditions ou de fonctions imbriquées, assurez-vous de toujours les appeler au niveau supérieur de votre fonction React.

Appelez uniquement les Hooks dans les fonctions React

N'appelez pas de Hooks dans des fonctions JavaScript ordinaires. tu peux:

✅ Appelez Hook dans le composant de fonction React
✅ Appelez d'autres Hooks dans des Hooks personnalisés

Quel problème React Fiber est-il conçu pour résoudre ?

En raison du problème de récursion ininterrompue de la StackReconcilersolution React15, si le temps Diff est trop long (temps de calcul JS), l'interface utilisateur de la page ne répondra plus (comme les zones de saisie) et vdomne pourra pas lui être appliquée dom.

Afin de résoudre ce problème, React16 a implémenté un nouveau requestIdleCallbackplanificateur basé sur (en raison de requestIdleCallbackproblèmes de compatibilité et de stabilité, je l'ai implémenté moi-même polyfill) Grâce à l'idée de priorité des tâches, lorsqu'une tâche hautement prioritaire entre, elle s'interrompt reconciler.

Afin de s'adapter à ce nouveau planificateur, il a été lancé FiberReconcilerpour convertir la structure arborescente d'origine (vdom) sous la forme d'une liste chaînée Fibre (enfant/frère/soeur/retour). L'ensemble du parcours Fibre est basé sur des boucles plutôt que sur la récursion et peut être interrompu à tout moment. .

Plus important encore, la structure de liste chaînée basée sur la fibre dispose d'une très bonne base d'application pour le rendu asynchrone ultérieur (architecture React 17 voies) et les calculs (éventuelles) des travailleurs.

Dites-moi quelles sont, selon vous, les meilleures pratiques dans React

Référez-vous au site officiel

Pourquoi React a-t-il besoin de Hooks ?

Réponse du site officiel :

motivation

Les hooks résolvent une variété de problèmes apparemment sans rapport que nous avons rencontrés au cours de cinq années d'écriture et de maintenance de milliers de composants. Que vous appreniez React, que vous l'utilisiez tous les jours ou que vous préfériez essayer un autre framework avec un modèle de composant similaire à React, vous connaissez peut-être ces problèmes.

La réutilisation de la logique d'état entre les composants est difficile

React ne fournit pas de moyen d'« attacher » un comportement réutilisable aux composants (par exemple, connecter des composants à un magasin). Si vous utilisez React depuis un certain temps, vous connaissez peut-être certaines solutions à ce problème, telles que les accessoires de rendu et les composants d'ordre supérieur. Mais de telles solutions nécessitent de réorganiser la structure de vos composants, ce qui peut s'avérer fastidieux et rendre votre code difficile à comprendre. Si vous observez les applications React dans React DevTools, vous constaterez que les composants composés de fournisseurs, de consommateurs, de composants d'ordre supérieur, d'accessoires de rendu et d'autres couches d'abstraction formeront un « enfer imbriqué ». Bien que nous puissions les filtrer dans DevTools, cela illustre un problème plus profond : React doit fournir une meilleure méthode native pour la logique d'état partagé.

Vous pouvez utiliser des Hooks pour extraire la logique d'état des composants afin que la logique puisse être testée indépendamment et réutilisée. Les hooks vous permettent de réutiliser la logique d’état sans modifier la structure des composants. Cela facilite le partage de Hooks entre composants ou au sein de la communauté.

Les composants complexes deviennent difficiles à comprendre

Nous maintenons souvent certains composants. Les composants sont simples au début, mais se remplissent progressivement de logique d'état et d'effets secondaires. Chaque cycle de vie contient souvent une logique sans rapport. Par exemple, les composants obtiennent souvent des données dans composantDidMount et composantDidUpdate. Cependant, le même composantDidMount peut également contenir de nombreuses autres logiques, telles que la configuration de l'écoute d'événements, qui doivent ensuite être effacées dans composantWillUnmount. Le code lié et qui doit être modifié est divisé, tandis que le code totalement indépendant est combiné dans la même méthode. Cela peut facilement conduire à des bugs et à des incohérences logiques.

Dans la plupart des cas, il n'est pas possible de diviser les composants en granularités plus petites car la logique avec état est omniprésente. Cela pose également certains défis en matière de tests. En même temps, c'est l'une des raisons pour lesquelles de nombreuses personnes utilisent React avec une bibliothèque de gestion d'état. Cependant, cela introduit souvent de nombreux concepts abstraits et vous oblige à basculer entre différents fichiers, ce qui rend la réutilisation plus difficile.

Pour résoudre ce problème, Hooks a divisé les parties interdépendantes du composant en fonctions plus petites (telles que la configuration d'un abonnement ou la demande de données), plutôt que de forcer leur division en fonction du cycle de vie. Vous pouvez également utiliser des réducteurs pour gérer l'état interne d'un composant afin de le rendre plus prévisible.

Classe incompréhensible

Outre les difficultés rencontrées dans la réutilisation et la gestion du code, nous avons également constaté que les cours constituent un frein majeur à l’apprentissage de React. Il faut comprendre comment cela fonctionne en JavaScript, qui est très différent des autres langages. N'oubliez pas de lier les gestionnaires d'événements. Il n’existe pas de proposition de syntaxe stable et le code est très redondant. Tout le monde peut très bien comprendre les accessoires, l'état et le flux de données descendant, mais ils sont perdus pour les cours. Même parmi les développeurs React expérimentés, il existe des désaccords sur les différences entre les composants de fonction et les composants de classe, et même sur les scénarios d'utilisation des deux composants.

De plus, React est disponible depuis cinq ans et nous espérons qu'il suivra également son rythme au cours des cinq prochaines années. Comme l'ont montré des bibliothèques comme Svelte, Angular, Glimmer et d'autres, la précompilation de composants a un énorme potentiel. Surtout quand cela ne se limite pas aux modèles. Récemment, nous avons utilisé Prepack pour expérimenter le pliage de composants et avons obtenu de premiers résultats. Cependant, nous avons constaté que l’utilisation de composants de classe encourageait par inadvertance les développeurs à utiliser des solutions invalidant les mesures d’optimisation. les classes posent également quelques problèmes aux outils actuels. Par exemple, les classes ne se compressent pas bien et peuvent rendre le rechargement à chaud instable. Par conséquent, nous voulions fournir une API qui facilite l’optimisation du code.

Pour résoudre ces problèmes, les Hooks vous permettent d'utiliser davantage de fonctionnalités React sans classes. Conceptuellement, les composants React ont toujours ressemblé davantage à des fonctions. Les Hooks englobent des fonctions sans sacrifier les principes spirituels de React. Les hooks fournissent des solutions aux problèmes sans avoir à apprendre des techniques de programmation fonctionnelles ou réactives complexes

Quel problème la gestion étatique résout-elle ?

Concentrez-vous sur la couche de vue

Ceci est l’introduction du site officiel de React. Bibliothèque JavaScript pour créer des interfaces utilisateur. Les caractéristiques de la concentration sur la couche d'affichage déterminent qu'il ne s'agit pas d'un framework complet. Par rapport aux frameworks polyvalents tels qu'Angular, React a des fonctions plus simples et uniques. Par exemple, il n'y a pas de routage frontal, pas de gestion d'état, pas de documentation de développement unique, etc.

f(état) = vue

Le composant React restitue la page en fonction de l'état (ou des accessoires), similaire à une fonction qui entre l'état et affiche la vue. Cependant, il ne s’agit pas de MDV (Model Driven View) au sens complet et ne dispose pas d’une couche de modèle complète. D'ailleurs, j'ai l'impression que la composantisation et le MDV sont actuellement populaires dans le développement front-end, et c'est la tendance générale...

l'état circule de haut en bas, les accessoires sont en lecture seule

Nous avons compris cette fonctionnalité depuis que nous avons commencé à écrire React. La direction du flux de l'état va de l'extérieur vers l'intérieur du composant, et de haut en bas, et les accessoires passés sont en lecture seule. Si vous souhaitez modifier les accessoires, vous ne pouvez transmettre qu'une méthode setState packagée à partir du niveau supérieur composant. Contrairement à angulaire, qui a ng-model, vue a v-model, qui fournit des instructions de liaison bidirectionnelle. C'est la convention dans React. Vous pensez peut-être que c'est lourd, mais le flux d'état est plus clair. Le flux de données unidirectionnel est toujours plus agréable dans les grands spas.

Ces caractéristiques déterminent que React lui-même ne fournit pas de puissantes fonctions de gestion d'état. Il existe environ trois méthodes natives.

Les composants fonctionnels ont-ils un cycle de vie ?

Il ne fournit pas le concept de cycle de vie, contrairement aux composants de classe qui héritent de React.component, qui permet d'utiliser le cycle de vie et de mettre spécifiquement l'accent sur les concepts associés.

Quel est le principe de l'immuabilité ?

Utilisez l'arborescence du dictionnaire pour conserver la structure des données, optimiser la logique de génération d'objets et réduire les coûts lors de la mise à jour.

Comment empêcher l'échappement du HTML ?

dangerouslySetInnerHTML

Dites-moi comment vous améliorez l'efficacité du rendu des composants

rendre

qu'est-ce que

React est basé sur la combinaison parfaite du DOM virtuel et de l'algorithme Diff efficace pour obtenir la plus petite mise à jour de granularité du DOM. Dans la plupart des cas, l'efficacité de rendu du DOM de React est suffisante pour nos activités quotidiennes.

Dans des scénarios commerciaux complexes, les problèmes de performances continueront de nous gêner. À l'heure actuelle, certaines mesures doivent être prises pour améliorer les performances d'exécution. Éviter les rendus inutiles est l'une des méthodes d'optimisation courantes en entreprise.

Comment faire

Composant de classe :

HériterPureComponent
Optimiser à l'aide de ShouldComponentUpdate

Composant fonctionnel :

mémo simule PureComponent
Utilisez useMemo pour mettre en cache les variables
Utiliser la fonction de cache useCallback
Ajoutez des clés dans une boucle. Il est préférable d'utiliser la valeur unique de l'élément du tableau pour la clé. L'index n'est pas recommandé.

Résumer

Dans le processus de développement réel, les problèmes de performances front-end sont un problème qui doit être pris en compte. À mesure que l'entreprise devient plus complexe, la probabilité de rencontrer des problèmes de performances augmente également.

De plus, il est recommandé de granuler la page en granularités plus petites. Si l'une d'entre elles est trop grande, lorsque l'état est modifié, cela entraînera le rendu de l'intégralité du composant volumineux. Une fois les composants divisés, la granularité devient plus petite et le Possibilité de réduire le rendu inutile des sous-composants

Parlez de votre compréhension des composants d'ordre élevé (HOC) ?

Fonction d'ordre supérieur, fonction qui remplit au moins l'une des conditions suivantes

Accepte une ou plusieurs fonctions en entrée
afficher une fonction

Dans React, un composant d'ordre supérieur accepte un ou plusieurs composants comme paramètres et renvoie un composant. Il s'agit essentiellement d'une fonction, pas d'un composant.

const EnhancedComponent = highOrderComponent(WrappedComponent);

Dans le code ci-dessus, la fonction accepte un composant WrappedComponentcomme paramètre et renvoie le nouveau composant traité.EnhancedComponent

Cette implémentation de composants d’ordre supérieur est essentiellement un modèle de conception de décorateur.

Parlez-moi de votre compréhension des références React ?

Les références sont appelées Resilient File System dans les ordinateurs (anglais : Resilient File System, appelé ReFS)

Les références dans React fournissent un moyen d'accéder aux nœuds DOM ou aux éléments React créés dans la méthode de rendu

Il s'agit essentiellement de l'instance de composant renvoyée par ReactDOM.render(). S'il s'agit d'un composant de rendu, il renvoie l'instance de composant. S'il rend dom, il renvoie le nœud dom spécifique.

classe

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref="myref" />;
  }
}

crochets

function App(props) {
  const myref = useRef()
  return (
    <>
      <div ref={myref}></div>
    </>
  )
}