So verhindern Sie unnötiges erneutes Rendern von Reaktionskomponenten

Zu verstehen, wie React Native Komponenten rendert, ist für die Erstellung effizienter und leistungsstarker Anwendungen unerlässlich. 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

• Memo verwenden
• 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; i++) {
          items.push({
            id: i,
            isSelected: i === count - 1,
          });
        }
        return items;
      }

      return (
        <div className="tutorial">
          <h1>Count: {count}</h1>
          <h1>Selected Item: {selectedItem?.id}</h1>
          <button onClick={() => setCount(count + 1)}>Increment</button>
        </div>
      );
    }

    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 Wert Anzahl, die ID des ausgewählten Elements 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 diese bei jedem Komponentenrendering 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 (
        <input
          type='text'
          placeholder='Filter colors...'
          onChange={(e) => 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 (
        <div className='tutorial'>
        <div className='align-center mb-2 flex'>
          <button onClick={() => setColors(shuffle(allColors))}>
            Shuffle
          </button>
          <Filter onChange={handleFilter} />
        </div>
        <ul>
          {colors.map((color) => (
            <li key={color}>{color}</li>
          ))}
        </ul>
      </div>
      );
    }

    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ötige erneute Renderings verhindert werden.
• 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 Funktion handleFilter gesetzt ist.
• Schließlich wird das Farbarray zugeordnet, um die Liste der Farbelemente als
darzustellen
• Elemente.

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

This optimization prevents unnecessary re-renders of child components that receive the handleFilter function as a prop, such as the Filter component.
It ensures that the Filter component is not re-rendered if the colors state hasn't changed, improving performance.

Using React's useRef

Another approach to enhance performance in React applications and avoid unnecessary re-renders is using the useRef hook. Using useRef, we can store a mutable value that persists across renders, effectively preventing unnecessary re-renders.

This technique allows us to maintain a reference to a value without triggering component updates when that value changes. By leveraging the mutability of the reference, we can optimize performance in specific scenarios.

Consider the following example:

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

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

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

  return (
    <div>
      <input
        type="text"
        value={name}
        onChange={(e) => setName(e.target.value)}
        ref={inputRef}
      />
      <button onClick={handleClick}>Focus</button>
    </div>
  );
}

The example above has a simple input field and a button. The useRef hook creates a ref called inputRef. As soon as the button is clicked, the handleClick function is called, which focuses on the input element by accessing the current property of the inputRef ref object. As such, it prevents unnecessary rerendering of the component when the input value changes.

To ensure optimal use of useRef, reserve it solely for mutable values that do not impact the component's rendering. If a mutable value influences the component's rendering, it should be stored within its state instead.

Conclusion

Throughout this tutorial, we explored the concept of React re-rendering and its potential impact on the performance of our applications. We delved into the optimization techniques that can help mitigate unnecessary re-renders. React offers a variety of hooks that enable us to enhance the performance of our applications. We can effectively store values and functions between renders by leveraging these hooks, significantly boosting React application performance.

Das obige ist der detaillierte Inhalt vonSo verhindern Sie unnötiges erneutes Rendern von Reaktionskomponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!