Wichtige Reaktionskonzepte

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

Mit

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!