Hauptkonzept von React || Reagieren

In React.js stehen verschiedene Methoden zum Verwalten von Komponenten, zum Behandeln von Lebenszyklusereignissen und zum Arbeiten mit Hooks zur Verfügung. Nachfolgend habe ich die wichtigsten Methoden in verschiedene Abschnitte kategorisiert:

1. Komponentenlebenszyklusmethoden (Klassenkomponenten)

In React Klassenkomponenten gibt es mehrere Lebenszyklusmethoden, die Sie überschreiben können, um Code zu bestimmten Zeitpunkten im Lebenszyklus einer Komponente auszuführen:

Montagephase (Initialisierung einer Komponente)

• Konstruktor()

  • Wird aufgerufen, bevor die Komponente gemountet wird.
  • Nützlich zum Initialisieren von Status- oder Bindungsereignishandlern.

• statisches getDerivedStateFromProps(props, state)

  • Wird vor dem Rendern aufgerufen, sowohl beim ersten Mount als auch bei nachfolgenden Updates.
  • Ermöglicht die Aktualisierung des Status basierend auf Requisiten.

• render()

  • Die einzige erforderliche Methode in einer Klassenkomponente.
  • Sollten React-Elemente zurückgeben, die im DOM gerendert werden.

• componentDidMount()

  • Wird sofort nach der Montage einer Komponente aufgerufen.
  • Wird häufig zum Abrufen von Daten, zum Einrichten von Abonnements oder zum Durchführen von API-Aufrufen verwendet.

Aktualisierungsphase (erneutes Rendern aufgrund von Änderungen an Requisiten oder Status)

• statisches getDerivedStateFromProps(props, state)

  • (Wird auch während Aktualisierungen aufgerufen) Wird verwendet, um den Status basierend auf Requisiten zu aktualisieren.

• shouldComponentUpdate(nextProps, nextState)

  • Bestimmt, ob ein erneutes Rendern erforderlich ist.
  • Kann zur Optimierung der Leistung verwendet werden, indem unnötiges Rendern verhindert wird.

• render()

  • (Wird während Aktualisierungen erneut angerufen)

• getSnapshotBeforeUpdate(prevProps, prevState)

  • Wird direkt aufgerufen, bevor Änderungen vom virtuellen DOM auf das tatsächliche DOM angewendet werden.
  • Nützlich zum Erfassen von Informationen (z. B. Scroll-Position) vor Aktualisierungen.

• componentDidUpdate(prevProps, prevState, snapshot)

  • Wird sofort nach der Aktualisierung aufgerufen.
  • Nützlich zum Ausführen von Vorgängen, nachdem die Komponente aktualisiert wurde (z. B. Durchführen von API-Aufrufen basierend auf Requisitenänderungen).

Unmounting-Phase (Aufräumen, bevor eine Komponente entfernt wird)

• componentWillUnmount()
  • Wird aufgerufen, kurz bevor eine Komponente ausgehängt und zerstört wird.
  • Nützlich zum Bereinigen von Abonnements, Timern oder Ereignis-Listenern.

Fehlerbehandlung

• componentDidCatch(error, info)
  • Wird aufgerufen, wenn beim Rendern, in einer Lebenszyklusmethode oder im Konstruktor einer untergeordneten Komponente ein Fehler auftritt.
  • Nützlich zum Protokollieren von Fehlern und zum Anzeigen der Fallback-Benutzeroberfläche.

2. React Hooks (Funktionskomponenten)

Hooks sind eine neue Ergänzung in React 16.8, mit der Sie Status- und andere React-Funktionen verwenden können, ohne eine Klasse schreiben zu müssen.

Einfache Haken

• useState(initialState)
  • Ermöglicht das Hinzufügen eines Status zu einer Funktionskomponente.
  • Gibt eine Statusvariable und eine Funktion zum Aktualisieren zurück.

  const [count, setCount] = useState(0);

• useEffect(callback, dependencies)
  • Ähnlich wie „componentDidMount“, „componentDidUpdate“ und „componentWillUnmount“ in Kombination.
  • Wird für Nebeneffekte wie Datenabruf, Abonnements oder manuelle Änderung des DOM verwendet.

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

• useContext(Context)
  • Ermöglicht das Abonnieren des React-Kontexts ohne Verschachtelung von Consumer-Komponenten.

  const value = useContext(MyContext);

Zusätzliche Haken

• useReducer(reducer, initialState)
  • Eine Alternative zu useState zur Verwaltung komplexerer Zustandslogik.

  const [state, dispatch] = useReducer(reducer, initialState);

• useCallback(callback, dependencies)
  • Gibt eine gespeicherte Version einer Rückruffunktion zurück, die für die Optimierung untergeordneter Komponenten nützlich ist, die auf Referenzgleichheit basieren.

  const memoizedCallback = useCallback(() => {
    doSomething();
  }, [dependencies]);

• useMemo(create, dependencies)
  • Gibt einen gespeicherten Wert zurück, der zur Optimierung aufwendiger Berechnungen verwendet wird.

  const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• useRef(initialValue)
  • Gibt ein veränderbares Referenzobjekt zurück, das zwischen dem Rendern bestehen bleibt.
  • Nützlich für den Zugriff auf DOM-Elemente oder das Speichern veränderlicher Werte.

  const inputRef = useRef();

• useImperativeHandle(ref, createHandle, dependencies)
  • Passt den Instanzwert an, der bei Verwendung von ref mit forwardRef verfügbar gemacht wird.

  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus()
  }));

• useLayoutEffect(callback, dependencies)

  • Ähnlich wie useEffect, wird jedoch nach allen DOM-Mutationen synchron ausgelöst.
  • Nützlich zum Lesen des Layouts aus dem DOM und zum synchronen erneuten Rendern.

• useDebugValue(value)

  • Kann verwendet werden, um in React DevTools eine Beschriftung für benutzerdefinierte Hooks anzuzeigen.

  const [count, setCount] = useState(0);

3. Methoden zur Ereignisbehandlung

React bietet Methoden zur Behandlung von Ereignissen, ähnlich der regulären DOM-Ereignisbehandlung, jedoch mit einigen Unterschieden:

• onClick
• onChange
• onSubmit
• onFocus
• onBlur
• onKeyPress

Beispiel:

  useEffect(() => {
    // Effect logic here
    return () => {
      // Cleanup logic here (like componentWillUnmount)
    };
  }, [dependencies]);

4. Andere Reaktionsmethoden

Dies sind zusätzliche Methoden, die Sie möglicherweise nützlich finden:

• React.createRef()

  • Wird zum Erstellen von Referenzen in Klassenkomponenten verwendet.

• React.forwardRef()

  • Pass verweist auf untergeordnete Komponenten.

• React.memo(Komponente)

  • Eine Komponente höherer Ordnung, die ein erneutes Rendern verhindert, wenn sich die Requisiten nicht geändert haben.

• React.lazy()

  • Wird zur Codeaufteilung und zum verzögerten Laden von Komponenten verwendet.

• React.Suspense

  • Wird in Kombination mit React.lazy() verwendet, um einen Fallback beim Laden einer Lazy-Komponente anzuzeigen.

5. Reagieren Sie auf Router-Methoden (für Routing)

• useNavigate() (React Router v6)
• useParams()
• useLocation()
• useMatch()

Beispiel:

  const value = useContext(MyContext);

6. Requisitentypen und Standard-Requisiten

• propTypes

  • Wird verwendet, um den Typ der an eine Komponente übergebenen Requisiten zu validieren.

• defaultProps

  • Wird verwendet, um Standardwerte für Requisiten festzulegen.

Beispiel:

  const [state, dispatch] = useReducer(reducer, initialState);

Abschluss

• Klassenkomponenten sind traditioneller und verwenden Lebenszyklusmethoden.
• Funktionskomponenten nutzen Hooks und werden in der modernen React-Entwicklung aufgrund ihrer Einfachheit und Leistungsvorteile im Allgemeinen bevorzugt.

Verwenden Sie Klassenkomponenten, wenn Sie eine detaillierte Kontrolle über den Komponentenlebenszyklus benötigen, und Hooks, wenn Sie eine einfachere und sauberere API wünschen.

Das obige ist der detaillierte Inhalt vonHauptkonzept von React || Reagieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!