React Essentials : fonctionnalités qui pourraient vous manquer

React a consolidé sa place en tant que bibliothèque incontournable pour créer des interfaces utilisateur dynamiques et réactives. Avec son approche déclarative et son architecture basée sur des composants, React simplifie le processus complexe de développement d'applications modernes. Cependant, comme tout outil puissant, certaines fonctionnalités et bonnes pratiques passent souvent inaperçues, même pour les développeurs expérimentés.

Dans ce blog, nous aborderons certains de ces aspects négligés de React, des fonctionnalités qui peuvent améliorer votre flux de travail de développement, optimiser les performances et vous aider à écrire du code plus propre et plus efficace.

1. Crochets de mise en page (useLayoutEffect)

Tout le monde a entendu parler du hook useEffect qui vous permet de coder efficacement chaque fois qu'une dépendance change. useLayoutEffect est une version du hook useEffect qui se déclenche chaque fois que le navigateur repeint l'écran, cela peut être utile dans de nombreux scénarios.

Info-bulles

import { useState, useRef, useLayoutEffect } from 'react';

function Tooltip() {
  const ref = useRef(null);
  const [tooltipHeight, setTooltipHeight] = useState(0);

useLayoutEffect(() => {
    const { height } = ref.current.getBoundingClientRect();
    setTooltipHeight(height);
}, []);
// ...

Ce code ici vérifie avant que l'écran ne soit rendu si l'info-bulle peut s'adapter ou non à l'écran et se réorganise donc.

Pour une explication détaillée, visitez https://react.dev/reference/react/useLayoutEffect

2. Prise (routeur React)

Bien qu'il ne fasse pas partie de React nativement, React Router est une bibliothèque très connue et utile lorsqu'il s'agit de gérer le routage dans React. Avec sa popularité, de nombreuses fonctionnalités mentionnées dans sa documentation passent inaperçues.

Comment utiliser la prise

Avez-vous déjà conçu un tableau de bord pour votre projet ? où les éléments de la barre supérieure et de la barre latérale sont toujours constants et où seule une partie de la page change entre différents itinéraires ? C'est exactement là qu'intervient le concept de routage et de prise imbriqués

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route path="messages" element={<DashboardMessages />} />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

La route parent path="/" signifie l'espace réservé ou la mise en page de la page où vous souhaitez charger les composants dynamiques, Dashboard() dans l'exemple ci-dessus n'aurait qu'un en-tête et le contenu suivant sur la page dépendrait sur l'itinéraire, nous sommes sur /messages ou /tasks. Nous pouvons également créer un contexte pour toutes les sous-pages en utilisant outletContext

En savoir plus sur : https://reactrouter.com/en/main/components/outlet

3. Optimisation du chargement (React.Suspense + Await)

React avec l'aide de React Router prend en charge les chargeurs et les solutions de secours sans utiliser d'autre bibliothèque, voici un exemple simple sur la façon de les utiliser.

function Book() {
  const { book, reviews } = useLoaderData();
  return (
    <div>
      <h1>{book.title}</h1>
      <p>{book.description}</p>
      <React.Suspense fallback={<ReviewsSkeleton />}>
        <Await
          resolve={reviews}
          errorElement={
            <div>Could not load reviews ?</div>
          }
          children={(resolvedReviews) => (
            <Reviews items={resolvedReviews} />
          )}
        />
      </React.Suspense>
    </div>
  );
}

Remarque : Await s'attend à être rendu à l'intérieur d'un ou parent pour activer l'interface utilisateur de secours.

Résumé

Nous avons exploré certaines fonctionnalités souvent négligées mais puissantes de React qui peuvent améliorer considérablement votre processus de développement. Nous avons commencé par le routage imbriqué et l'utilisation du composant Outlet, qui simplifie la gestion des routes enfants au sein de vos applications. Ensuite, nous nous sommes penchés sur les hooks de mise en page, en particulier useLayoutEffect, qui est crucial pour exécuter les mises à jour avant que le navigateur ne soit repeint, garantissant ainsi des interactions plus fluides avec l'interface utilisateur. Nous avons également discuté de l'utilisation des balises Await et Suspense de React, qui aident à gérer les opérations asynchrones plus efficacement, vous permettant de créer des interfaces utilisateur plus rapides et plus réactives. En comprenant et en utilisant ces fonctionnalités, vous pouvez écrire du code React plus propre et plus efficace, optimisé à la fois pour les performances et l'évolutivité.

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!