Wenn wir Anwendungen in React erstellen, stoßen wir häufig auf die Begriffe Rendern und erneutes Rendern von Komponenten. Obwohl dies auf den ersten Blick einfach erscheinen mag, wird es interessant, wenn verschiedene Zustandsverwaltungssysteme wie useState, Redux oder wenn wir Lifecycle-Hooks wie useEffect einfügen, involviert sind. Wenn Sie möchten, dass Ihre Anwendung schnell und effizient ist, ist das Verständnis dieser Prozesse von entscheidender Bedeutung.

Was ist Rendering?

Rendering ist der Prozess, durch den React Ihre Benutzeroberfläche (UI) basierend auf Status oder Requisiten auf dem Bildschirm rendert. Wenn Ihre Komponente zum ersten Mal gerendert wird, wird dies als erstes Rendern bezeichnet.

Wie funktioniert das erste Rendern?

Wenn eine Komponente zum ersten Mal im DOM „gemountet“ wird, passiert Folgendes:

1. Statusinitialisierung:
Unabhängig davon, ob Sie useState, props oder Redux verwenden, wird der Anfangszustand der Komponente erstellt.

2. Renderfunktion:
React durchläuft den JSX-Code und generiert ein virtuelles DOM basierend auf dem aktuellen Status.

3. Erstellt ein virtuelles DOM (Virtuelles DOM) für den aktuellen Zustand der Komponente.

4. Vergleichen (unterscheiden):
Das virtuelle DOM wird mit dem realen DOM verglichen (da es das erste Rendering ist, werden alle Elemente vollständig gerendert).

5. Angezeigt:
Die Komponente wird auf dem Bildschirm angezeigt.
Sobald die Komponente gerendert ist, besteht die nächste Herausforderung im erneuten Rendern.

Neu-Rendering: Wann und warum?

Das Rendern erfolgt jedes Mal, wenn sich der Status oder die Requisiten ändern. Haben Sie auf die Schaltfläche geklickt, mit der sich die Nummer auf dem Bildschirm ändert? Einen Wert im Redux-Store geändert? All diese Aktionen können dazu führen, dass React die Komponente erneut rendert, und hier kommt das erneute Rendern ins Spiel.

Wie funktioniert das Rendern?

Statusänderungserkennung:

• Wenn Sie mit useState setState aufrufen, weiß React, dass die Komponente aktualisiert werden muss.

• Wenn sich bei Redux ein Wert im Speicher ändert, wird jede mit diesem Teil des Zustands verknüpfte Komponente neu gerendert.

Render-Trigger:

Wenn sich der Status ändert, erstellt React basierend auf dieser Änderung ein neues virtuelles DOM.

Vergleichen (Unterscheiden):

• React vergleicht das neue virtuelle DOM mit dem alten und berechnet, welche Änderungen anzuwenden sind. Dies ist eine Möglichkeit, wie React das Rendering optimiert.

Änderungen anzeigen:

• Nachdem die Änderungen berechnet wurden, wendet React sie auf das tatsächliche DOM an. Somit werden nur die geänderten Teile der Seite wieder angezeigt.

Welche Komponenten werden neu gerendert?

Nicht alle Komponenten sind von jeder Änderung betroffen. React rendert nur die Komponenten erneut, die:

Lokale Bundesstaaten verwenden:
Wenn Sie useState verwenden, wird die Komponente jedes Mal neu gerendert, wenn setState aufgerufen wird.

Redux-Status verwenden:
Wenn Ihre Komponente vom Redux-Status abhängt (über useSelector oder connect), wird sie neu gerendert, wenn sich dieser Teil des Status ändert.

Requisiten verwenden:
Wenn sich der Requisitenwert ändert, wird die Komponente mit den neuen Werten neu gerendert.

Optimierung des Renderings

Natürlich ist es nicht immer ideal, alle Komponenten unnötig neu zu rendern. Wenn wir möchten, dass die Anwendung schnell und effizient funktioniert, finden Sie hier einige Optimierungstechniken:

1. Memoisierungskomponenten
React bietet Funktionen zur Komponenten-Memoisierung über React.memo. Wenn Ihre Komponente nicht von Requisiten oder Statusänderungen abhängt, können Sie sie „merken“, sodass sie nur dann neu gerendert wird, wenn sich die relevanten Werte ändern.

Beispiel:

const MemoizedComponent = React.memo(MyComponent);

2. Auswendiglernen von Funktionen und Werten

Um zu vermeiden, dass Funktionen oder Werte bei jedem Rendern neu erstellt werden, verwenden Sie useCallback zum Merken von Funktionen und useMemo zum Merken von Werten.

• useCallback ermöglicht es Ihnen, sich eine Funktion zu merken und zu verhindern, dass sie neu erstellt wird, bis sich die Abhängigkeiten ändern.

• useMemo speichert das Ergebnis der Funktion, sodass es nicht bei jedem Rendern neu berechnet wird.

Beispiel:

const increment = useCallback(() => {
  setCount(prevCount => prevCount   1);
}, []);

const expensiveCalculation = useMemo(() => {
  return count * 2;
}, [count]);

3. Redux-Optimierung

Wenn Sie Redux verwenden, können Sie die Anwendung mit gespeicherten Selektoren wie Reselect weiter optimieren. Dadurch kann vermieden werden, dass Komponenten, die von der Zustandsänderung nicht betroffen sind, erneut gerendert werden müssen.

Lebenszyklus-Hooks und Rendering

In klassischen React-Klassen haben wir ShouldComponentUpdate verwendet, um zu steuern, wann die Komponente erneut gerendert wird. In funktionalen Komponenten kann dieses Konzept mithilfe von useEffect und memoization simuliert werden.

Abschluss

Rendering und erneutes Rendern sind für die UI-Anzeige in React-Apps von entscheidender Bedeutung, aber das richtige Verständnis und die Optimierung dieser Prozesse können den Unterschied zwischen einer langsamen und einer superschnellen App ausmachen. Die korrekte Verwendung von Memoization, useCallback, useMemo sowie der sorgfältige Umgang mit Redux tragen dazu bei, unnötiges erneutes Rendern zu vermeiden und unsere Anwendungen schnell und reaktionsfähig zu halten.

Beispielcode: Rendern und erneutes Rendern in Aktion
Hier ist ein Beispiel einer Komponente, die useState, Redux und Memoization verwendet, um das Rendering zu optimieren:

import React, { useState, useEffect, useCallback, useMemo } from 'react';
import { useSelector, useDispatch } from 'react-redux';

const MyComponent = () => {
  // Lokalni state
  const [count, setCount] = useState(0);

  // Redux state
  const reduxValue = useSelector(state => state.someValue);
  const dispatch = useDispatch();

  // Memoizacija funkcije kako bi se izbeglo ponovno kreiranje na svakom renderu
  const increment = useCallback(() => {
    setCount(prevCount => prevCount   1);
  }, []);

  // Memoizacija izračunate vrednosti
  const expensiveCalculation = useMemo(() => {
    return count * 2;
  }, [count]);

  // Efekat koji se pokreće samo pri promeni reduxValue
  useEffect(() => {
    console.log("Redux value changed:", reduxValue);
  }, [reduxValue]);

  return (
    

      
Count: {count}
      
Expensive Calculation: {expensiveCalculation}
      Increment
       dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      
    
  );
};

Wie wir sehen können, wird hier eine Kombination aus lokalem Status, Redux, Memoisierung und useEffect-Hook verwendet, um die Anwendung so effizient wie möglich zu gestalten.