Detaillierte Erläuterung der Ideen zur Leistungsoptimierung für funktionale React-Komponenten

Optimierungsideen

Es gibt zwei Hauptoptimierungsrichtungen:

1. Reduzieren Sie die Anzahl der erneuten Renderings. Denn der schwerste (zeitaufwendigste) Teil in React ist die Abstimmung (die einfach als Diff verstanden werden kann). Wenn Sie nicht rendern, findet keine Abstimmung statt.
2. Reduzieren Sie den Rechenaufwand. Der Hauptzweck besteht darin, wiederholte Berechnungen zu reduzieren. Bei Funktionskomponenten führt jeder Renderer den Funktionsaufruf von Anfang an aus.

Bei der Verwendung von Klassenkomponenten werden hauptsächlich die folgenden React-Optimierungs-APIs verwendet: shouldComponentUpdate und PureComponent

Wie optimieren wir also die Leistung funktionaler Komponenten? Zur Optimierung werden vor allem folgende Methoden eingesetzt:

• Reagieren.memo
• useCallback
• verwendenMemo

Reagieren.memo

Schauen wir uns ein Beispiel an:

Wir fügen der übergeordneten Komponente eine Schaltfläche hinzu, um den Untertitel zu ändern und die untergeordnete Unterkomponente einzuführen.

Wie Sie sehen, wird beim ersten Eintreffen der Unterkomponente console.log('Ich bin eine Unterkomponente') gedruckt.

Wenn Sie zum Ändern des Untertitels klicken, wird auch die untergeordnete Komponente gedruckt, was zu unnötigen wiederholten Renderzeiten führt.

//Übergeordnete Komponente importiere {useState} von 'react'

importiere Child aus "./Child";
const Index = ()=>{
    const [subTitle, setSubTitle] = useState('Ich bin ein Untertitel')
    const updateSubTitle = ()=>{
      setSubTitle('Untertitel ändern')
    }
    zurückkehren (
      <div>
        <div>Optimierung der Leistung funktionaler Komponenten</div>
        <div>{Untertitel}</div>
        <button onClick={updateSubTitle}>Untertitel ändern</button>
        <Kind/>
      </div>
    );
  }
  
  Standardindex exportieren;


//Untergeordnete Komponente Child.js
const Kind = ()=>{
    console.log('Ich bin eine untergeordnete Komponente')
    zurückkehren (
        <div>Ich bin eine untergeordnete Komponente</div>
    )
}
Standard-Untergeordnetes Element exportieren

Optimieren Sie es und verwenden Sie React.memo, um die Unterkomponente zu umschließen.

importiere React von „react“;

const Kind = ()=>{
    console.log('Ich bin eine untergeordnete Komponente')
    zurückkehren (
        <div>Ich bin eine untergeordnete Komponente</div>
    )
}
Standardmäßig exportieren React.memo (Kind)

Beobachten Sie erneut und stellen Sie fest, dass die untergeordnete Unterkomponente nicht wiederholt gerendert wird

useCallback

Hier ändern wir es erneut, fügen der untergeordneten Unterkomponente ein Onclick-Ereignis hinzu, klicken dann auf die Schaltfläche „Untertitel ändern“ und stellen fest, dass unsere untergeordnete Unterkomponente erneut gerendert wird. Dies liegt hauptsächlich daran, dass die Funktion „handlerClick“ die Änderungen beim Ändern des Untertitels erneut rendert, wodurch die Unterkomponente erneut gerendert wird.

// Übergeordnete Komponente const Index = ()=>{
    const [subTitle, setSubTitle] = useState('Ich bin ein Untertitel')
    const updateSubTitle = ()=>{
      setSubTitle('Untertitel ändern')
    }
    const handlerClick = ()=>{
      console.log('Unterkomponentenklick')
    }
    zurückkehren (
      <div>
        <div>Optimierung der Leistung funktionaler Komponenten</div>
        <div>{Untertitel}</div>
        <button onClick={updateSubTitle}>Untertitel ändern</button>
        <Untergeordnetes Element bei Klick={handlerClick}/>
      </div>
    );
  }

//Kind-Unterkomponente const Child = (props)=>{
    console.log('Ich bin eine untergeordnete Komponente')
    zurückkehren (
        <div>
            <div>Ich bin eine untergeordnete Komponente</div>
            <button onClick={props.onClick}>Unterkomponenten-Schaltfläche</button>
        </div>
    )
}
Standardmäßig exportieren React.memo (Kind)

Um die Funktion zu optimieren, verwenden Sie useCallback, um die Funktion handlerClick der untergeordneten Komponente zu umschließen. Klicken Sie erneut auf updateSubTitle, um den Untertitel zu ändern. Stellen Sie fest, dass die untergeordnete Komponente nicht erneut gerendert wird.

// Übergeordnete Komponente const Index = ()=>{
    const [subTitle, setSubTitle] = useState('Ich bin ein Untertitel')
    const updateSubTitle = ()=>{
      setSubTitle('Untertitel ändern')
    }
    const handlerClick = useCallback(()=>{
      console.log('Unterkomponentenklick')
    },[])

    zurückkehren (
      <div>
        <div>Optimierung der Leistung funktionaler Komponenten</div>
        <div>{Untertitel}</div>
        <button onClick={updateSubTitle}>Untertitel ändern</button>
        <Untergeordnetes Element bei Klick={handlerClick}/>
      </div>
    );
  }
  
  Standardindex exportieren;

Hier ist die Verwendung von useCallback

const callback = () => {
  tuEtwas(a, b);
}

const memoizedCallback = useCallback(callback, [a, b])

Übergeben Sie die Funktion und Abhängigkeiten als Parameter an useCallback, das eine gespeicherte Version der Rückruffunktion zurückgibt. Dieser gespeicherte Callback wird nur aktualisiert, wenn sich die Abhängigkeiten ändern.

verwendenMemo

useMemo wird zum Zwischenspeichern von Berechnungsergebnissen verwendet

Schauen wir uns ein Beispiel an. Wir fügen eine calcCount-Berechnungsfunktion basierend auf der vorherigen hinzu und klicken dann auf updateSubTitle, um den Untertitel zu aktualisieren. Wir stellen fest, dass calcCount neu berechnet wird, was bedeutet, dass jedes Rendern wiederholte Berechnungen verursacht. Wenn der Berechnungsumfang groß ist, wirkt sich dies erheblich auf die Leistung aus.

// Übergeordnete Komponente const Index = ()=>{
    const [subTitle, setSubTitle] = useState('Ich bin ein Untertitel')
    const updateSubTitle = ()=>{
      setSubTitle('Untertitel ändern')
    }
    const handlerClick = useCallback(()=>{
      console.log('Unterkomponentenklick')
    },[])

    const calcCount = ()=>{
      
      let totalCount = 0
      für (lass i = 0; i < 10000; i++) {
        Gesamtanzahl + = i
      }
      console.log('Gesamtzahl',Gesamtzahl)
      Gesamtanzahl zurückgeben
    }

    Konstante Anzahl = calcCount()

    zurückkehren (
      <div>
        <div>Optimierung der Leistung funktionaler Komponenten</div>
        <div>{Untertitel}</div>
        <button onClick={updateSubTitle}>Untertitel ändern</button>
        <div>Anzahl:{Anzahl}</div>
        <Untergeordnetes Element bei Klick={handlerClick}/>
      </div>
    );
  }

Optimieren Sie es und verwenden Sie useMemo, um die Berechnungsergebnisse zwischenzuspeichern. Klicken Sie erneut auf die Schaltfläche updateSubTitle, um den Untertitel zu ändern. Sie werden feststellen, dass die Funktion calcCount die Berechnung nicht mehr wiederholt.

 const calcCount = ()=>{
      
      let totalCount = 0
      für (lass i = 0; i < 10000; i++) {
        Gesamtanzahl + = i
      }
      console.log('Gesamtzahl',Gesamtzahl)
      Gesamtanzahl zurückgeben
    }

    Konstante Anzahl = useMemo(calcCount,[])

Abschließend sei darauf hingewiesen, dass useMemo nicht blind verwendet werden kann. Es sollte je nach bestimmten Szenarien verwendet werden. Wenn beispielsweise die Datenmenge relativ groß ist, ist es besser anwendbar. Für einige normale Berechnungen, die eine Berechnung wert sind, kann es ignoriert werden, da useMemo selbst auch etwas Leistung verbraucht. Blinde Verwendung wäre kontraproduktiv.

Verweise

https://mp.weixin.qq.com/s/YGvmSrr-yhPUNHbwlLSFsA

http://www.ptbird.cn/react-hook-useMemo-purerender.html

Dies ist das Ende dieses Artikels zur Leistungsoptimierung von React-Funktionskomponenten. Weitere relevante Inhalte zur Leistungsoptimierung von React finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!