Concepts de réaction importants

Concepts React importants

1- Réagir aux crochets

Vous pouvez utiliser useReducer pour gérer des structures d'état complexes, vous pouvez useEffect pour React Hook qui vous permet de synchroniser un composant avec un système externe. Vous pouvez useCallback/ useMemo pour l'optimisation des performances, useRef pour l'accès au DOM et créer des hooks personnalisés.

2. Modèle d'accessoires de rendu

Une autre façon de rendre les composants très réutilisables consiste à utiliser le modèle d'accessoire de rendu. Un accessoire de rendu est un accessoire sur un composant, dont la valeur est une fonction qui renvoie un élément JSX. Le composant lui-même ne restitue rien d'autre que l'accessoire de rendu. Au lieu de cela, le composant appelle simplement le render prop, au lieu d'implémenter sa propre logique de rendu.

3. Suspense

Suspense permet d'afficher un repli jusqu'à ce que ses enfants aient fini de charger.

Exemple :

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>

4. Limite d'erreur

Bordure d'erreur est un composant spécifique à React qui s'enroule autour d'une arborescence de composants et empêche toute erreur au sein de ce composant de se propager et de provoquer le crash d'une application entière.

Pour l'utiliser, vous devez simplement envelopper l'arborescence des composants que vous souhaitez protéger avec un composant de limite d'erreur. La bordure d'erreur détectera les erreurs et affichera l'interface utilisateur de secours lorsqu'elles se produisent dans l'arborescence des composants encapsulés.

Exemple :

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

  static getDerivedStateFromError(error) {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    // Example "componentStack":
    //   in ComponentThatThrows (created by App)
    //   in ErrorBoundary (created by App)
    //   in div (created by App)
    //   in App
    logErrorToMyService(error, info.componentStack);
  }

  render() {
    if (this.state.hasError) {
      // You can render any custom fallback UI
      return this.props.fallback;
    }

    return this.props.children;
  }
}


<ErrorBoundary fallback={<p>Something went wrong</p>}>
  <Profile />
</ErrorBoundary>

5. Transmission de données avec contexte

Habituellement, vous transmettrez des informations d'un composant parent à un composant enfant via props. Mais transmettre des accessoires peut devenir verbeux et peu pratique si vous devez les transmettre via de nombreux composants au milieu, ou si de nombreux composants de votre application ont besoin des mêmes informations. Context permet au composant parent de rendre certaines informations disponibles à n'importe quel composant de l'arborescence en dessous, quelle que soit la profondeur, sans les transmettre explicitement via les accessoires.

6. Gestion de l'État

La gestion des états est un concept crucial dans React, les bibliothèques JavaScript les plus populaires au monde pour créer des interfaces utilisateur dynamiques.
Gérer l'état de l'application à l'aide de Redux.

7. Fractionnement de code

Le

Le regroupement est génial, mais à mesure que votre application se développe, votre offre groupée grandira également. Surtout si vous incluez de grandes bibliothèques tierces. Vous devez garder un œil sur le code que vous incluez dans votre bundle afin de ne pas le rendre accidentellement si volumineux que votre application prenne beaucoup de temps à charger.

Pour éviter de vous retrouver avec un gros paquet, il est bon d'anticiper le problème et de commencer à « diviser » votre lot. Code-Splitting est une fonctionnalité prise en charge par les bundlers comme Webpack, Rollup et Browserify (via factor-bundle) qui peuvent créer plusieurs bundles qui peut être chargé dynamiquement au exécution.

Répartition du code votre application peut vous aider à « charger paresseusement » uniquement les éléments dont l'utilisateur a actuellement besoin, ce qui peut considérablement améliorer les performances de votre application. Même si vous n'avez pas réduit la quantité globale de code dans votre application, vous avez évité de charger du code dont l'utilisateur n'aurait peut-être jamais besoin et réduit la quantité de code nécessaire lors du chargement initial.

Conclusion

Dans cet article, j'ai parlé des concepts avancés dans React. Ces concepts avancés améliorent les performances et la maintenabilité de vos applications React. Vous pouvez essentiellement comprendre et utiliser ces concepts

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!