Für die Erstellung effizienter und leistungsstarker Anwendungen ist es wichtig zu verstehen, wie React Native Komponenten rendert. Wenn sich der Status oder die Requisiten einer Komponente ändern, aktualisiert React automatisch die Benutzeroberfläche (UI), um diese Änderungen widerzuspiegeln. Infolgedessen ruft React die Render-Methode der Komponente erneut auf, um die aktualisierte UI-Darstellung zu generieren.

In diesem Artikel werden wir drei React Hooks untersuchen und wie sie unnötige Renderings in React verhindern

• useMemo
• useCallback
• useRef

Mit diesen Tools können wir unseren Code optimieren, indem wir unnötige erneute Renderings vermeiden, die Leistung verbessern und Werte effizient speichern.

Am Ende dieses Artikels werden wir besser verstehen, wie wir unsere React-Anwendungen mithilfe dieser praktischen React-Hooks schneller und reaktionsfähiger machen können.

Verwenden von useMemo von React

In React kann useMemo unnötige Neu-Renderings verhindern und die Leistung optimieren.

Lassen Sie uns untersuchen, wie der useMemo-Hook unnötige erneute Renderings in unseren React-Komponenten verhindern kann.

Durch das Speichern des Ergebnisses einer Funktion und das Verfolgen ihrer Abhängigkeiten stellt useMemo sicher, dass der Prozess nur bei Bedarf neu berechnet wird.

Betrachten Sie das folgende Beispiel:

import { useMemo, useState } from 'react';

    function Page() {
      const [count, setCount] = useState(0);
      const [items] = useState(generateItems(300));

      const selectedItem = useMemo(() => items.find((item) => item.id === count), [
        count,
        items,
      ]);

      function generateItems(count) {
        const items = [];
        for (let i = 0; i 
          
Count: {count}
          
Selected Item: {selectedItem?.id}
           setCount(count   1)}>Increment
        
      );
    }

    export default Page;

Der obige Code ist eine React-Komponente namens Page, die useMemo verwendet, um die selectedItem-Berechnung zu optimieren.

Hier ist die Erklärung:

• Die Komponente verwaltet die Anzahl der Statusvariablen mithilfe des useState-Hooks.
• Der Elementstatus wird mithilfe des useState-Hooks mit dem Ergebnis der Funktion „generateItems“ initialisiert.
• Das selectedItem wird mit useMemo berechnet, das das Ergebnis der items.find-Operation speichert. Es wird nur dann neu berechnet, wenn sich die Anzahl oder die Artikel ändern.
• Die Funktion „generateItems“ generiert ein Array von Elementen basierend auf der angegebenen Anzahl.
• Die Komponente rendert den aktuellen count-Wert, die selectedItem-ID und eine Schaltfläche zum Erhöhen der Anzahl.

Die Verwendung von useMemo optimiert die Leistung, indem das Ergebnis der items.find-Operation gespeichert wird. Dadurch wird sichergestellt, dass die Berechnung von selectedItem nur dann durchgeführt wird, wenn sich die Abhängigkeiten (Anzahl oder Elemente) ändern, wodurch unnötige Neuberechnungen bei nachfolgenden Renderings vermieden werden.

Memoisierung sollte selektiv für rechenintensive Vorgänge eingesetzt werden, da sie zusätzlichen Overhead für den Rendering-Prozess mit sich bringt.

Verwenden von useCallback von React

Der useCallback-Hook in React ermöglicht das Auswendiglernen von Funktionen und verhindert so, dass sie bei jedem Rendern der Komponente neu erstellt werden. Durch die Verwendung von useCallback. Ein Teil wird nur einmal erstellt und in nachfolgenden Renderings wiederverwendet, solange seine Abhängigkeiten unverändert bleiben.

Betrachten Sie das folgende Beispiel:

import React, { useState, useCallback, memo } from 'react';

    const allColors = ['red', 'green', 'blue', 'yellow', 'orange'];

    const shuffle = (array) => {
      const shuffledArray = [...array];
      for (let i = shuffledArray.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i   1));
        [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
      }
      return shuffledArray;
    };

    const Filter = memo(({ onChange }) => {
      console.log('Filter rendered!');

      return (
         onChange(e.target.value)}
        />
      );
    });

    function Page() {
      const [colors, setColors] = useState(allColors);
      console.log(colors[0])

      const handleFilter = useCallback((text) => {
        const filteredColors = allColors.filter((color) =>
          color.includes(text.toLowerCase())
        );
        setColors(filteredColors);
      }, [colors]);


      return (
        

        

           setColors(shuffle(allColors))}>
            Shuffle
          
          
        
        

          {colors.map((color) => (
            
{color}
          ))}
        
      
      );
    }

    export default Page;

Der obige Code demonstriert eine einfache Farbfilter- und Mischfunktion in einer React-Komponente. Gehen wir es Schritt für Schritt durch:

• Das anfängliche Farbarray ist als allColors definiert.
• Die Shuffle-Funktion nimmt ein Array und mischt seine Elemente zufällig. Es verwendet den Fisher-Yates-Algorithmus, um das Mischen zu erreichen.
• Die Filterkomponente ist eine gespeicherte Funktionskomponente, die ein Eingabeelement rendert. Es empfängt eine onChange-Requisite und löst die Rückruffunktion aus, wenn sich der Eingabewert ändert.
• Die Seitenkomponente ist die Hauptkomponente, die die Farbfilter- und Mischfunktionalität darstellt.
• Die Statusvariablenfarben werden mit dem useState-Hook initialisiert, wobei der Anfangswert auf allColors gesetzt ist. Es stellt die gefilterte Liste der Farben dar.
• Die handleFilter-Funktion wird mit dem useCallback-Hook erstellt. Es nimmt einen Textparameter und filtert das Array allColors basierend auf dem bereitgestellten Text. Die gefilterten Farben werden dann mithilfe der Funktion setColors aus dem Hook useState festgelegt. Das Abhängigkeitsarray [colors] stellt sicher, dass die handleFilter-Funktion nur dann neu erstellt wird, wenn sich der Farbstatus ändert, wodurch die Leistung optimiert wird, indem unnötiges erneutes Rendern verhindert wird.
• In der Seitenkomponente befindet sich eine Schaltfläche zum Mischen der Farben. Wenn Sie auf die Schaltfläche klicken, wird die Funktion „setColors“ mit dem gemischten Array „allColors“ aufgerufen.
• Die Filterkomponente wird mit der onChange-Requisite gerendert, die auf die handleFilter-Funktion gesetzt ist.
• Abschließend wird das Farbarray zugeordnet, um die Liste der Farbelemente als
darzustellen.
• Elemente.

Der useCallback-Hook wird verwendet, um die handleFilter-Funktion zu speichern, was bedeutet, dass die Funktion nur einmal erstellt und bei nachfolgenden Renderings wiederverwendet wird, wenn die Abhängigkeiten (in diesem Fall der Farbstatus) gleich bleiben.

Diese Optimierung verhindert unnötiges erneutes Rendern untergeordneter Komponenten, die die handleFilter-Funktion als Requisite erhalten, wie z. B. die Filterkomponente.
Dadurch wird sichergestellt, dass die Filterkomponente nicht erneut gerendert wird, wenn sich der Farbstatus nicht geändert hat, wodurch die Leistung verbessert wird.

Verwenden von useRef von React

Ein weiterer Ansatz zur Verbesserung der Leistung in React-Anwendungen und zur Vermeidung unnötiger erneuter Renderings ist die Verwendung des useRef-Hooks. Mit useRef können wir einen veränderlichen Wert speichern, der über alle Renderings hinweg bestehen bleibt und so unnötige erneute Renderings effektiv verhindert.

Diese Technik ermöglicht es uns, einen Verweis auf einen Wert beizubehalten, ohne Komponentenaktualisierungen auszulösen, wenn sich dieser Wert ändert. Indem wir die Veränderlichkeit der Referenz nutzen, können wir die Leistung in bestimmten Szenarien optimieren.

Betrachten Sie das folgende Beispiel:

import React, { useRef, useState } from 'react';

function App() {
  const [name, setName] = useState('');
  const inputRef = useRef(null);

  function handleClick() {
    inputRef.current.focus();
  }

  return (
    

       setName(e.target.value)}
        ref={inputRef}
      />
      Focus
    
  );
}

Das obige Beispiel verfügt über ein einfaches Eingabefeld und eine Schaltfläche. Der useRef-Hook erstellt eine Referenz namens inputRef. Sobald auf die Schaltfläche geklickt wird, wird die handleClick-Funktion aufgerufen, die sich auf das Eingabeelement konzentriert, indem sie auf die aktuelle Eigenschaft des inputRef-Ref-Objekts zugreift. Dadurch wird ein unnötiges erneutes Rendern der Komponente verhindert, wenn sich der Eingabewert ändert.

Um eine optimale Nutzung von useRef zu gewährleisten, reservieren Sie es ausschließlich für veränderbare Werte, die sich nicht auf das Rendering der Komponente auswirken. Wenn ein veränderlicher Wert das Rendering der Komponente beeinflusst, sollte er stattdessen in seinem Zustand gespeichert werden.

Abschluss

In diesem Tutorial haben wir das Konzept des React-Re-Renderings und seine möglichen Auswirkungen auf die Leistung unserer Anwendungen untersucht. Wir haben uns mit den Optimierungstechniken befasst, die dazu beitragen können, unnötige Neu-Renderings zu vermeiden. React bietet eine Vielzahl von Hooks, mit denen wir die Leistung unserer Anwendungen verbessern können. Durch die Nutzung dieser Hooks können wir Werte und Funktionen effektiv zwischen Renderings speichern und so die Leistung der React-Anwendung erheblich steigern.