Rendering und Rendering in React Apps verstehen: Wie sie funktionieren und wie man sie optimiert

Wenn wir Anwendungen in React erstellen, stoßen wir oft auf die Begriffe Rendering und Re-Rendering 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 Bewerbung schnell und effizient ist, ist das Verständnis dieser Prozesse der Schlüssel.

Was ist Rendering?

Rendering ist der Prozess, bei dem React Ihre Benutzeroberfläche (UI) basierend auf Status oder Requisiten auf dem Bildschirm anzeigt. 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 (Virtual 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. Anzeige:
Die Komponente wird auf dem Bildschirm angezeigt.
Sobald die Komponente gerendert ist, besteht die nächste Herausforderung darin, sie zu rendern.

Neu-Rendering: Wann und warum?

Das erneute 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?

Erkennung von Zustandsänderungen:

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

• Wenn sich mit 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 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. Auswendiglernen von Komponenten
React bietet Funktionen zur Komponenten-Memoisierung über React.memo. Wenn Ihre Komponente nicht von Requisiten oder Zustandsänderungen abhängig ist, 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 Ihre Anwendung mit gespeicherten Selektoren wie Reselect weiter optimieren. Dadurch kann vermieden werden, dass Komponenten erneut gerendert werden, die von der Statusänderung nicht betroffen sind.

Lifecycle Hook-ovi i Rerenderovanje

U klasičnim React klasama, koristili smo shouldComponentUpdate da kontrolišemo kada će se komponenta ponovo renderovati. U funkcionalnim komponentama, ovaj koncept se može simulirati pomoću useEffect i memoizacije.

Zaključak

Renderovanje i rerenderovanje su ključni za prikaz korisničkog interfejsa u React aplikacijama, ali pravilno razumevanje i optimizacija tih procesa može napraviti razliku između spore i super brze aplikacije. Ispravno korišćenje memoizacije, useCallback, useMemo, kao i pažljivo rukovanje Redux-om, pomaže da izbegnemo nepotrebne re-rendere i održimo naše aplikacije brzim i responzivnim.

Primer Koda: Renderovanje i Rerenderovanje u Akciji
Evo primera komponente koja koristi useState, Redux i memoizaciju da optimizuje renderovanje:

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 (
    <div>
      <p>Count: {count}</p>
      <p>Expensive Calculation: {expensiveCalculation}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={() => dispatch({ type: 'SOME_ACTION' })}>
        Dispatch Redux Action
      </button>
    </div>
  );
};

Kao što vidimo, ovde se koristi kombinacija lokalnog state-a, Redux-a, memoizacije i useEffect hook-a da bi aplikacija bila što efikasnija.

Das obige ist der detaillierte Inhalt vonRendering und Rendering in React Apps verstehen: Wie sie funktionieren und wie man sie optimiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!