Préparation à l'entretien de réaction

1. Quelle est la différence entre useState et useRef ?

Réponse :-

• useState est utilisé pour déclarer une variable d'état dans un composant fonctionnel. Lorsque l'état change, le composant sera restitué.

• useRef, quant à lui, renvoie un objet ref mutable dont la propriété .current est initialisée avec l'argument passé (initialValue).

• L'objet renvoyé persistera pendant toute la durée de vie du composant.

• Un cas d'utilisation courant de useRef consiste à accéder impérativement aux propriétés d'un composant enfant. Il est important de noter que les modifications apportées à la propriété .current d'une référence n'entraînent pas un nouveau rendu du composant.

2. Que sont les portails dans React ?

• Disons que dans certains scénarios, nous devons restituer un composant en dehors du nœud racine DOM. Ici, nous pouvons utiliser le portail.

• Nous pouvons l'utiliser pour le Modal / certains composants Pop-up.

3. Pourquoi avons-nous besoin d'un composant super en classe ?

Réponse :-

• Un constructeur de classe enfant ne peut pas utiliser cette référence tant que le super() n'a pas été appelé.

• Si vous n'appelez pas super(), JavaScript générera une erreur car celui-ci n'est pas initialisé. En effet, dans le contexte de la classe enfant, ceci n'est pas initialisé jusqu'à ce que super() ait été appelé.
  

class Parent {
  constructor() {
    this.name = 'Parent';
  }
}

class Child extends Parent {
  constructor() {
    super(); // Must call super() here
    this.name = 'Child';
  }
}

4. useCallback vs useMemo vs React.memo

Réponse :-

• useCallback est un hook qui renverra une version mémorisée d'une fonction de rappel qui ne change que si l'une des dépendances a changé.
• C'est utile lors de la transmission de rappels à des composants enfants optimisés qui s'appuient sur l'égalité des références pour éviter les rendus inutiles.

import React, { useState, useCallback } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const increment = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={increment}>
        Click me
      </button>
    </div>
  );
}

• useMemo est un hook qui renverra une valeur mémorisée, qui ne recalcule que si l'une des dépendances a changé. C'est utile pour les calculs coûteux.

 import React, { useState, useMemo } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  const expensiveValue = useMemo(() => {
    // Perform expensive calculation here
    return computeExpensiveValue(count);
  }, [count]);

  return (
    <div>
      <p>Expensive value: {expensiveValue}</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

• React.memo est un composant d'ordre supérieur qui mémorise le résultat d'un composant de fonction et le restitue uniquement lorsque les accessoires changent.
• Il est utile d'éviter les rendus inutiles pour les composants qui rendent le même résultat avec les mêmes accessoires.

import React from 'react';

const MyComponent = React.memo(function MyComponent(props) {
  // render logic here
});

export default MyComponent;

REMARQUE :-
useCallback est utilisé pour mémoriser les fonctions, useMemo est utilisé pour mémoriser les valeurs et React.memo est utilisé pour mémoriser les composants.

5. Que se passera-t-il si nous utilisons trop les fonctionnalités useMemo, Memo et useCallback ci-dessus ?

Utilisation de la mémoire :

• Une utilisation excessive de React.memo peut augmenter l'utilisation de la mémoire de votre application, car elle stocke la version précédente d'un composant en mémoire.

Problèmes de performances :

• Bien que ces hooks et React.memo soient destinés à optimiser les performances, leur utilisation excessive peut en réalité avoir l'effet inverse.

• Par exemple, useMemo et useCallback ont ​​un coût, et si le calcul qu'ils empêchent n'est pas plus cher que le coût d'utilisation du hook, vous pouvez vous retrouver avec des performances plus lentes.

6. Quelle est la différence entre le composant de réaction et l'élément de réaction ?

Réponse :-

Composant React :

• Un composant React est une fonction ou une classe qui accepte éventuellement des entrées et renvoie un élément React. Les composants peuvent être réutilisés et peuvent également conserver un état privé

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

Élément de réaction :

• Un élément React est un objet simple décrivant ce que vous souhaitez afficher à l'écran en termes de nœuds DOM ou d'autres composants. Les éléments peuvent contenir d'autres éléments dans leurs accessoires.
• Créer un élément React est bon marché. Une fois qu’un élément est créé, il n’est jamais muté.

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('root'));

7. Principe de base de Redux ?

Réponse :-

• Source unique de vérité
• L'état est en lecture seule (ne jamais mettre à jour directement)
• Les modifications sont apportées dans Pure Functions (Reducer)
• Fonctionne uniquement pour les objets sérialisables.

8. Algorithme de différence, réconciliation et fibre React ?

Réponse : - Article séparé sur le même
Une plongée approfondie dans les algorithmes et les processus d'optimisation de React

9. Que sont les événements synthétiques en réaction ?

Réponse : - Les événements dont nous nous assurons doivent être cohérents sur les différents navigateurs.

Ex : - PreventDefault(), stopPropagation()

10. Lever l’État ?

Réponse : - Lorsque plusieurs composants doivent partager les mêmes données changeantes, il est recommandé de relever l'état partagé jusqu'à leur ancêtre commun le plus proche.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!