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

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.

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!