React Essentials: Funktionen, die Sie möglicherweise vermissen

React hat seinen Platz als Anlaufstelle für die Erstellung dynamischer und reaktionsfähiger Benutzeroberflächen gefestigt. Mit seinem deklarativen Ansatz und der komponentenbasierten Architektur vereinfacht React den komplexen Prozess der Entwicklung moderner Anwendungen. Allerdings gibt es wie bei jedem leistungsstarken Tool Funktionen und Best Practices, die oft unter dem Radar bleiben, selbst für erfahrene Entwickler.

In diesem Blog befassen wir uns mit einigen dieser übersehenen Aspekte von React – Funktionen, die Ihren Entwicklungsworkflow verbessern, die Leistung optimieren und Ihnen helfen können, saubereren und effizienteren Code zu schreiben.

1. Layout-Hooks (useLayoutEffect)

Jeder hat vom useEffect-Hook gehört, mit dem Sie effektiven Code erstellen können, wenn sich eine Abhängigkeit ändert. useLayoutEffect ist eine Version des useEffect-Hooks, der immer dann ausgelöst wird, wenn der Browser den Bildschirm neu zeichnet. Dies kann in vielen Szenarien nützlich sein.

Tooltips

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);
}, []);
// ...

Dieser Code prüft vor dem Rendern des Bildschirms, ob der Tooltip auf den Bildschirm passt oder nicht, und ordnet sich daher selbst neu an.

Detaillierte Erklärungen finden Sie unter https://react.dev/reference/react/useLayoutEffect

2. Outlet (React Router)

Obwohl React Router nicht nativ Teil von React ist, ist es eine sehr bekannte und nützliche Bibliothek, wenn es um die Verwaltung des Routings in React geht. Aufgrund seiner Beliebtheit werden in der Dokumentation viele Funktionen erwähnt, die jedoch unbemerkt bleiben.

So verwenden Sie die Steckdose

Haben Sie schon einmal ein Dashboard für Ihr Projekt entworfen? Wo die Topbar- und Sidebar-Elemente immer konstant sind und sich nur ein Teil der Seite zwischen verschiedenen Routen ändert? Genau hier kommt das Konzept des verschachtelten Routings und Outlets ins Spiel

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>
  );
}

Der übergeordnete Routenpfad="/" gibt den Platzhalter oder das Layout der Seite an, in die Sie die dynamischen Komponenten laden möchten. Dashboard() im obigen Beispiel hätte nur eine Überschrift und der folgende Inhalt auf der Seite würde davon abhängen Auf der Route befinden wir uns auf /messages oder /tasks. Mit „outletContext“ können wir auch einen Kontext für alle Unterseiten erstellen

Lesen Sie mehr auf: https://reactrouter.com/en/main/components/outlet

3. Ladeoptimierung (React.Suspense + Await)

React unterstützt mit Hilfe von React Router Loader und Fallbacks, ohne eine andere Bibliothek zu verwenden. Hier ist ein einfaches Beispiel für deren Verwendung.

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>
  );
}

Hinweis: Await wird voraussichtlich innerhalb eines gerendert. oder übergeordnetes Element, um die Fallback-Benutzeroberfläche zu aktivieren.

Zusammenfassung

Wir haben einige oft übersehene, aber leistungsstarke Funktionen von React untersucht, die Ihren Entwicklungsprozess erheblich verbessern können. Wir haben mit verschachteltem Routing und der Verwendung der Outlet-Komponente begonnen, die die Handhabung untergeordneter Routen in Ihren Anwendungen vereinfacht. Als nächstes haben wir uns mit Layout-Hooks befasst, insbesondere mit useLayoutEffect, das für die Ausführung von Updates vor dem Repainting des Browsers von entscheidender Bedeutung ist und eine reibungslosere Interaktion mit der Benutzeroberfläche gewährleistet. Wir haben auch die Verwendung der Await- und Suspense-Tags von React besprochen, die dabei helfen, asynchrone Vorgänge effektiver zu verwalten, sodass Sie schnellere und reaktionsfähigere Benutzeroberflächen erstellen können. Wenn Sie diese Funktionen verstehen und nutzen, können Sie saubereren, effizienteren React-Code schreiben, der sowohl für Leistung als auch für Skalierbarkeit optimiert ist.

Das obige ist der detaillierte Inhalt vonReact Essentials: Funktionen, die Sie möglicherweise vermissen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!