Wichtige React Concepts

1- reagieren Haken

Sie können usereducer verwenden, um komplexe Zustandsstrukturen zu verwalten. Sie können usecallback / useememo für die Leistungsoptimierung, useref für Dom -Zugriff und erstellen benutzerdefinierte Hooks. . 2. Muster von Requisiten rendern

Eine andere Möglichkeit, Komponenten sehr wiederverwendbar zu machen, ist die Verwendung der

. Eine Render -Prop ist eine Requisite für eine Komponente, die eine Funktion ist, die ein jsx element zurückgibt. Die Komponente selbst rendert nichts anderes als die Render -Requisite. Stattdessen ruft die Komponente einfach die Render -Prop an, anstatt ihre eigene Rendering Logic zu implementieren. 3. Spannung

Lassen Sie sich einen Fallback anzeigen, bis die Kinder geladen sind.

:
}>

}>
  

ist eine reaktspezifische Komponente, die sich um einen Komponentenbaum umschließt und Fehler innerhalb dieser Komponente daran hindert, sich zu verbreiten und eine gesamte Anwendung zum Absturz zu bringen. Um es zu verwenden, müssen Sie einfach den Komponentenbaum wickeln, den Sie mit einer Fehlergrenzkomponente schützen möchten. Der Fehlerrand erfasst Fehler und zeigt die Fallback -Benutzeroberfläche an, wenn sie innerhalb des verpackten Komponentenbaums auftreten.

:
class errorboundary erweitert react.comPonent { Konstruktor (Requisiten) { Super (Requisiten); this.state = {Haserror: false}; } statische GetedivedStateFromError (Fehler) { // Status aktualisieren, damit der nächste Render die Fallback -Benutzeroberfläche zeigt. return {haserror: true}; } componentDidCatch (Fehler, info) { // Beispiel "componentStack": // in componentthatthrows (durch App erstellt) // in fehlerboundarisch (durch App erstellt) // in Div (erstellt von App) // in App loggerrortomyService (Fehler, info.comPonentStack); } render () { if (this.state.hasError) { // Sie können jede benutzerdefinierte Fallback -Benutzeroberfläche rendern kehre this.props.Fallback zurück; } kehre this.Props.Children zurück; } } Etwas lief schief

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


Something went wrong}>
  

Normalerweise übergeben Sie Informationen von einer übergeordneten Komponente an eine untergeordnete Komponente über

. Das Übergeben von Requisiten kann jedoch ausführlich und unpraktisch werden, wenn Sie sie durch viele Komponenten in der Mitte geleitet haben oder wenn viele Komponenten in Ihrer App die gleichen Informationen benötigen. context lässt die übergeordnete Komponente für eine beliebige Komponente im Baum unten einige Informationen zur Verfügung stellen. 6. Staatsmanagement State Management ist ein entscheidendes Konzept in React. Anwendungsstatus verwalten mit Redux.

bundling
ist großartig, aber wenn deine App wächst, wird dein Bundle auch wachsen. Vor allem, wenn Sie große

einbeziehen. Sie müssen den Code im Auge behalten, den Sie in Ihr

einbeziehen, damit Sie es nicht versehentlich so groß machen, dass Ihre App eine lange Zeit nimmt, um zu laden. Um es zu vermeiden, mit einem großen Bundle einzuschließen, ist es gut, dem Problem voraus zu sein und Ihre bündel zu „teilen“. codesspaltung

webpack , rollup und browserify (über Faktor-Bundle) unterstützt wird, die mehrere Bundles erstellen können, die dynamisch geladen werden können. code-splitting Ihre App kann Ihnen helfen, "faul zu laden", nur die Dinge, die derzeit vom Benutzer benötigt werden, die die Leistung Ihrer App drastisch verbessern können. Während Sie die Gesamtmenge an Code in Ihrer App nicht reduziert haben, haben Sie es vermieden, Code zu laden, den der Benutzer möglicherweise nie benötigt, und die Menge an Code reduziert, die während der ersten Load erforderlich sind. . Abschluss In diesem Artikel habe ich über erweiterte Konzepte in react

. Sie können diese Konzepte grundsätzlich verstehen und verwenden