Wichtige Reaktionskonzepte

1- Reagieren Sie auf Haken

Sie k?nnen useReducer verwenden, um komplexe Zustandsstrukturen zu verwalten. Sie k?nnen useEffect für React Hook verwenden, mit dem Sie eine Komponente mit einem externen System synchronisieren k?nnen. Sie k?nnen Callback/ Memo zur Leistungsoptimierung verwenden, Ref für den DOM-Zugriff verwenden und benutzerdefinierte Hooks erstellen.

2. Requisitenmuster rendern

Eine weitere M?glichkeit, Komponenten sehr wiederverwendbar zu machen, ist die Verwendung des Render-Prop-Musters. Eine Render-Requisite ist eine Requisite für eine Komponente, deren Wert eine Funktion ist, die ein JSX-Element zurückgibt. Die Komponente selbst rendert nichts au?er der Render-Requisite. Stattdessen ruft die Komponente einfach die Render-Requisite auf, anstatt ihre eigene Rendering-Logik zu implementieren.

3. Spannung

Suspense k?nnen Sie einen Fallback anzeigen, bis die untergeordneten Elemente vollst?ndig geladen sind.

Beispiel :

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

4. Fehlergrenze

Fehlergrenze ist eine React-spezifische Komponente, die einen Komponentenbaum umschlie?t und verhindert, dass sich Fehler innerhalb dieser Komponente ausbreiten und zum Absturz einer gesamten Anwendung führen.

Um es zu verwenden, müssen Sie einfach den Komponentenbaum, den Sie schützen m?chten, mit einer Fehlergrenzenkomponente umschlie?en. Der Fehlerrahmen erkennt Fehler und zeigt die Fallback-Benutzeroberfl?che an, wenn sie innerhalb des umschlossenen Komponentenbaums auftreten.

Beispiel :

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. Daten mit Kontext übergeben

Normalerweise übergeben Sie Informationen von einer übergeordneten Komponente über Requisiten an eine untergeordnete Komponente. Die Weitergabe von Requisiten kann jedoch ausführlich und umst?ndlich werden, wenn Sie sie durch viele Komponenten in der Mitte weiterleiten müssen oder wenn viele Komponenten in Ihrer App dieselben Informationen ben?tigen. Kontext erm?glicht es der übergeordneten Komponente, jeder Komponente im Baum darunter einige Informationen zur Verfügung zu stellen – egal wie tief –, ohne sie explizit über Requisiten weiterzuleiten.

6. Staatsverwaltung

Zustandsverwaltung ist ein entscheidendes Konzept in React, den beliebtesten JavaScript-Bibliotheken der Welt zum Erstellen dynamischer Benutzeroberfl?chen.
Verwalten Sie den Anwendungsstatus mit Redux.

7. Code-Splitting

Bündelung ist gro?artig, aber wenn Ihre App w?chst, w?chst auch Ihr Paket. Vor allem, wenn Sie gro?e Bibliotheken von Drittanbietern einbinden. Sie müssen den Code im Auge behalten, den Sie in Ihr Bundle einschlie?en, damit Sie ihn nicht versehentlich so gro? machen, dass das Laden Ihrer App lange dauert.

Um zu vermeiden, dass Sie am Ende ein gro?es Bündel haben, ist es gut, dem Problem zuvorzukommen und mit der ?Aufteilung“ Ihres Bündels zu beginnen. Code-Splitting ist eine Funktion, die von Bundlern wie Webpack, Rollup und Browserify (über Faktor-Bundle) unterstützt wird und mehrere Bundles erstellen kann das zur Laufzeit dynamisch geladen werden kann.

Code-Splitting Ihre App kann Ihnen dabei helfen, genau die Dinge ?verz?gert zu laden“, die der Benutzer gerade ben?tigt, was die Leistung Ihrer App erheblich verbessern kann. W?hrend Sie die Gesamtmenge an Code in Ihrer App nicht reduziert haben, haben Sie das Laden von Code vermieden, den der Benutzer m?glicherweise nie ben?tigt, und die Menge an Code reduziert, die w?hrend des ersten Ladevorgangs ben?tigt wird.

Abschluss

In diesem Artikel habe ich über erweiterte Konzepte in React geschrieben. Diese fortschrittlichen Konzepte verbessern die Leistung und Wartbarkeit Ihrer Reaktionsanwendungen. Sie k?nnen diese Konzepte grunds?tzlich verstehen und anwenden

Das obige ist der detaillierte Inhalt vonWichtige Reaktionskonzepte. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!