React memo: Komponendi memoisatsiooni ja renderdamise optimeerimise meisterlik valdamine

Reacti arendusmaailmas on jõudlus esmatähtis. Rakenduste keerukuse kasvades muutub sujuva ja tõhusa renderdamise tagamine üha kriitilisemaks. Üks võimas tööriist Reacti arendaja arsenalis selle saavutamiseks on React.memo. See blogipostitus süveneb React.memo keerukustesse, uurides selle eesmärki, kasutamist ja parimaid tavasid renderdamise jõudluse optimeerimiseks.

Mis on komponendi memoisatsioon?

Komponendi memoisatsioon on optimeerimistehnika, mis hoiab ära komponendi ebavajaliku uuesti renderdamise, kui selle propsid ei ole muutunud. Mäletades renderdatud väljundit antud propside komplekti jaoks, saab React komponendi uuesti renderdamise vahele jätta, kui propsid jäävad samaks, mis toob kaasa olulise jõudluse kasvu, eriti arvutuslikult kulukate või sageli uuesti renderdatavate komponentide puhul.

Ilma memoisatsioonita renderdatakse Reacti komponente uuesti iga kord, kui nende vanemkomponent uuesti renderdatakse, isegi kui alamkomponendile edastatud propsid ei ole muutunud. See võib põhjustada uuesti renderdamiste kaskaadi läbi kogu komponendipuu, mõjutades rakenduse üldist jõudlust.

Tutvustame React.memo't

React.memo on Reacti pakutav kõrgema järgu komponent (HOC), mis memoiseerib funktsionaalse komponendi. Sisuliselt ütleb see Reactile, et "jäta meelde" komponendi väljund antud propside komplekti jaoks ja renderda komponent uuesti ainult siis, kui propsid on tegelikult muutunud.

Kuidas React.memo töötab

React.memo teostab praeguste ja eelmiste propside pinnapealse võrdluse. Kui propsid on samad (või kui kohandatud võrdlusfunktsioon tagastab tõeväärtuse true), jätab React.memo komponendi uuesti renderdamise vahele. Vastasel juhul renderdab see komponendi uuesti nagu tavaliselt.

React.memo põikasutus

React.memo kasutamiseks mähkige lihtsalt oma funktsionaalne komponent sellesse:

            import React from 'react';

const MyComponent = (props) => {
  // Komponendi loogika
  return (
    <div>
      {props.data}
    </div>
  );
};

export default React.memo(MyComponent);

            

              
                Copy
              
            
          

Selles näites renderdatakse MyComponent uuesti ainult siis, kui data prop muutub. Kui data prop jääb samaks, takistab React.memo komponendi uuesti renderdamist.

Pinnapealse võrdluse mõistmine

Nagu varem mainitud, teostab React.memo propside pinnapealse võrdluse. See tähendab, et see võrdleb ainult propsidena edastatud objektide ja massiivide ülemise taseme omadusi. See ei võrdle sügavuti nende objektide või massiivide sisu.

Pinnapealne võrdlus kontrollib, kas viited objektidele või massiividele on samad. Kui edastate propsidena objekte või massiive, mis on loodud "inline" või mida on muteeritud, peab React.memo neid tõenäoliselt erinevaks, isegi kui nende sisu on sama, mis viib ebavajalike uuesti renderdamisteni.

Näide: Pinnapealse võrdluse lõksud

            import React, { useState } from 'react';

const MyComponent = React.memo((props) => {
  console.log('Komponent renderdati!');
  return <div>{props.data.name}</div>;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // See põhjustab MyComponenti uuesti renderdamise iga kord
    // kuna igal klõpsul luuakse uus objekt.
    setData({ ...data });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Selles näites, kuigi name omadus data objektis ei muutu, renderdatakse MyComponent ikkagi uuesti iga kord, kui nupule klõpsatakse. See on sellepärast, et igal klõpsul luuakse uus objekt kasutades laialilaotamise operaatorit ({ ...data }), mille tulemuseks on erinev viide.

Kohandatud võrdlusfunktsioon

Pinnapealse võrdluse piirangutest ülesaamiseks võimaldab React.memo pakkuda kohandatud võrdlusfunktsiooni teise argumendina. See funktsioon võtab kaks argumenti: eelmised propsid ja järgmised propsid. See peaks tagastama true, kui propsid on võrdsed (mis tähendab, et komponenti ei pea uuesti renderdama) ja false vastasel juhul.

Süntaks

            React.memo(MyComponent, (prevProps, nextProps) => {
  // Kohandatud võrdlusloogika
  return true; // Tagasta true uuesti renderdamise vältimiseks, false uuesti renderdamise lubamiseks
});

            

              
                Copy
              
            
          

Näide: Kohandatud võrdlusfunktsiooni kasutamine

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

const MyComponent = React.memo((props) => {
  console.log('Komponent renderdati!');
  return <div>{props.data.name}</div>;
}, (prevProps, nextProps) => {
  // Renderda uuesti ainult siis, kui nime omadus muutub
  return prevProps.data.name === nextProps.data.name;
});

const ParentComponent = () => {
  const [data, setData] = useState({ name: 'John', age: 30 });

  const handleClick = () => {
    // See põhjustab MyComponenti uuesti renderdamise ainult siis, kui nimi muutub
    setData({ ...data, age: data.age + 1 });
  };

  return (
    <div>
      <MyComponent data={data} />
      <button onClick={handleClick}>Update Data</button>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Selles näites kontrollib kohandatud võrdlusfunktsioon ainult seda, kas data objekti name omadus on muutunud. Seetõttu renderdatakse MyComponent uuesti ainult siis, kui name muutub, isegi kui teised data objekti omadused on uuendatud.

Millal kasutada React.memo't

Kuigi React.memo võib olla võimas optimeerimisvahend, on oluline seda kasutada läbimõeldult. Selle rakendamine igale komponendile teie rakenduses võib tegelikult jõudlust kahjustada pinnapealse võrdluse lisakulu tõttu.

Kaaluge React.memo kasutamist järgmistes stsenaariumides:

• Sageli uuesti renderdatavad komponendid: Kui komponenti renderdatakse sageli uuesti, isegi kui selle propsid ei ole muutunud, võib React.memo oluliselt vähendada ebavajalike uuesti renderdamiste arvu.
• Arvutuslikult kulukad komponendid: Kui komponent teostab keerulisi arvutusi või renderdab suurt hulka andmeid, võib ebavajalike uuesti renderdamiste vältimine jõudlust parandada.
• Puhtad komponendid: Kui komponendi väljund sõltub ainult selle propsidest, on React.memo hea valik.
• Kui propsid saadakse vanemkomponentidelt, mis võivad sageli uuesti renderdada: Mäluge alamkomponent, et vältida selle ebavajalikku uuesti renderdamist.

Vältige React.memo kasutamist järgmistes stsenaariumides:

• Harva uuesti renderdatavad komponendid: Pinnapealse võrdluse lisakulu võib kaaluda üles memoisatsiooni kasu.
• Sageli muutuvate propsidega komponendid: Kui propsid muutuvad pidevalt, ei takista React.memo paljusid uuesti renderdamisi.
• Lihtsad komponendid minimaalse renderdamisloogikaga: Jõudluse kasv võib olla tühine.

React.memo kombineerimine teiste optimeerimistehnikatega

React.memo't kasutatakse sageli koos teiste Reacti optimeerimistehnikatega, et saavutada maksimaalne jõudluse kasv.

useCallback

useCallback on Reacti hook, mis memoiseerib funktsiooni. See tagastab funktsiooni memoiseeritud versiooni, mis muutub ainult siis, kui mõni selle sõltuvustest on muutunud. See on eriti kasulik, kui funktsioone edastatakse propsidena memoiseeritud komponentidele.

Ilma useCallback'ita luuakse igal vanemkomponendi renderdamisel uus funktsiooni eksemplar, isegi kui funktsiooni loogika jääb samaks. See põhjustab React.memo'l funktsiooni propi pidamise muutunuks, mis viib ebavajalike uuesti renderdamisteni.

Näide: useCallback'i kasutamine koos React.memo'ga

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

const MyComponent = React.memo((props) => {
  console.log('Komponent renderdati!');
  return <button onClick={props.onClick}>Click Me</button>;
});

const ParentComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <MyComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Selles näites tagab useCallback, et handleClick funktsioon luuakse uuesti ainult siis, kui count olek muutub. See takistab MyComponenti ebavajalikku uuesti renderdamist, kui vanemkomponent renderdatakse uuesti count oleku uuenduse tõttu.

useMemo

useMemo on Reacti hook, mis memoiseerib väärtuse. See tagastab memoiseeritud väärtuse, mis muutub ainult siis, kui mõni selle sõltuvustest on muutunud. See on kasulik keeruliste arvutuste või tuletatud andmete memoiseerimiseks, mida edastatakse propsidena memoiseeritud komponentidele.

Sarnaselt useCallback'ile, ilma useMemo'ta, teostatakse keerulised arvutused uuesti igal renderdamisel, isegi kui sisendväärtused ei ole muutunud. See võib jõudlust oluliselt mõjutada.

Näide: useMemo kasutamine koos React.memo'ga

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

const MyComponent = React.memo((props) => {
  console.log('Komponent renderdati!');
  return <div>{props.data}</div>;
});

const ParentComponent = () => {
  const [input, setInput] = useState('');

  const data = useMemo(() => {
    // Simuleeri keerulist arvutust
    console.log('Arvutan andmeid...');
    let result = 0;
    for (let i = 0; i < 1000000; i++) {
      result += i;
    }
    return input + result;
  }, [input]);

  return (
    <div>
      <input type="text" value={input} onChange={(e) => setInput(e.target.value)} />
      <MyComponent data={data} />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Selles näites tagab useMemo, et data väärtus arvutatakse uuesti ainult siis, kui input olek muutub. See takistab MyComponenti ebavajalikku uuesti renderdamist ja väldib keerulise arvutuse uuesti teostamist igal vanemkomponendi renderdamisel.

Praktilised näited ja juhtumiuuringud

Vaatleme mõnda reaalset stsenaariumi, kus React.memo't saab tõhusalt kasutada:

Näide 1: Nimekirja elemendi komponendi optimeerimine

Kujutage ette, et teil on nimekirja komponent, mis renderdab suurt hulka nimekirja elemente. Iga nimekirja element saab andmeid propsidena ja kuvab need. Ilma memoisatsioonita renderdatakse iga kord, kui nimekirja komponent uuesti renderdatakse (näiteks vanemkomponendi oleku uuenduse tõttu), ka kõik nimekirja elemendid uuesti, isegi kui nende andmed ei ole muutunud.

Mähkides nimekirja elemendi komponendi React.memo'ga, saate vältida ebavajalikke uuesti renderdamisi ja oluliselt parandada nimekirja jõudlust.

Näide 2: Keeruka vormikomponendi optimeerimine

Vaatleme vormikomponenti, millel on mitu sisendvälja ja keeruline valideerimisloogika. Selle komponendi renderdamine võib olla arvutuslikult kulukas. Kui vormi renderdatakse sageli uuesti, võib see mõjutada rakenduse üldist jõudlust.

Kasutades React.memo't ja hallates hoolikalt vormikomponendile edastatud propse (näiteks kasutades sündmuste käsitlejate jaoks useCallback'i), saate minimeerida ebavajalikke uuesti renderdamisi ja parandada vormi jõudlust.

Näide 3: Diagrammikomponendi optimeerimine

Diagrammikomponendid hõlmavad sageli keerulisi arvutusi ja renderdamisloogikat. Kui diagrammikomponendile edastatud andmed ei muutu sageli, võib React.memo kasutamine vältida ebavajalikke uuesti renderdamisi ja parandada diagrammi reageerimisvõimet.

Parimad tavad React.memo kasutamiseks

React.memo kasu maksimeerimiseks järgige neid parimaid tavasid:

• Profileerige oma rakendust: Enne React.memo rakendamist kasutage Reacti Profiler tööriista, et tuvastada komponente, mis põhjustavad jõudluse kitsaskohti. See aitab teil oma optimeerimispingutused keskendada kõige kriitilisematele aladele.
• Mõõtke jõudlust: Pärast React.memo rakendamist mõõtke jõudluse paranemist, et veenduda, et see tegelikult midagi muudab.
• Kasutage kohandatud võrdlusfunktsioone hoolikalt: Kohandatud võrdlusfunktsioonide kasutamisel veenduge, et need on tõhusad ja võrdlevad ainult asjakohaseid omadusi. Vältige kulukate operatsioonide teostamist võrdlusfunktsioonis.
• Kaaluge muutumatute andmestruktuuride kasutamist: Muutumatud andmestruktuurid võivad lihtsustada propside võrdlemist ja hõlbustada ebavajalike uuesti renderdamiste vältimist. Teegid nagu Immutable.js võivad selles osas abiks olla.
• Kasutage useCallback'i ja useMemo'd: Kui edastate funktsioone või keerulisi väärtusi propsidena memoiseeritud komponentidele, kasutage useCallback'i ja useMemo'd ebavajalike uuesti renderdamiste vältimiseks.
• Vältige objektide "inline" loomist: Objektide loomine propsidena "inline" möödub memoisatsioonist, kuna igal renderdustsüklil luuakse uus objekt. Kasutage selle vältimiseks useMemo'd.

Alternatiivid React.memo'le

Kuigi React.memo on võimas tööriist komponendi memoisatsiooniks, on ka teisi lähenemisviise, mida võite kaaluda:

• PureComponent: Klassikomponentide jaoks pakub PureComponent sarnast funktsionaalsust nagu React.memo. See teostab propside ja oleku pinnapealse võrdluse enne uuesti renderdamist.
• Immer: Immer on teek, mis lihtsustab muutumatute andmetega töötamist. See võimaldab teil andmeid muutumatult modifitseerida, kasutades muteeritavat API-d, mis võib olla abiks Reacti komponentide optimeerimisel.
• Reselect: Reselect on teek, mis pakub memoiseeritud selektoreid Reduxi jaoks. Seda saab kasutada andmete tõhusaks tuletamiseks Reduxi poest ja vältida nendest andmetest sõltuvate komponentide ebavajalikku uuesti renderdamist.

Täpsemad kaalutlused

Konteksti ja React.memo haldamine

Komponendid, mis kasutavad Reacti konteksti, renderdatakse uuesti iga kord, kui konteksti väärtus muutub, isegi kui nende propsid ei ole muutunud. See võib olla väljakutse React.memo kasutamisel, kuna memoisatsioonist möödutakse, kui konteksti väärtus sageli muutub.

Selle lahendamiseks kaaluge useContext hook'i kasutamist mitte-memoiseeritud komponendis ja seejärel asjakohaste väärtuste edastamist propsidena memoiseeritud komponendile. See võimaldab teil kontrollida, millised konteksti muudatused käivitavad memoiseeritud komponendi uuesti renderdamise.

React.memo probleemide silumine

Kui kogete ootamatuid uuesti renderdamisi React.memo kasutamisel, on mõned asjad, mida saate kontrollida:

• Veenduge, et propsid on tegelikult samad: Kasutage console.log'i või silurit, et kontrollida propse ja veenduda, et need on tõepoolest samad enne ja pärast uuesti renderdamist.
• Kontrollige objektide "inline" loomist: Vältige objektide loomist propsidena "inline", kuna see möödub memoisatsioonist.
• Vaadake üle oma kohandatud võrdlusfunktsioon: Kui kasutate kohandatud võrdlusfunktsiooni, veenduge, et see on õigesti implementeeritud ja võrdleb ainult asjakohaseid omadusi.
• Uurige komponendipuud: Kasutage Reacti DevTools'i, et uurida komponendipuud ja tuvastada, millised komponendid põhjustavad uuesti renderdamisi.

Kokkuvõte

React.memo on väärtuslik tööriist renderdamise jõudluse optimeerimiseks Reacti rakendustes. Mõistes selle eesmärki, kasutamist ja piiranguid, saate seda tõhusalt kasutada ebavajalike uuesti renderdamiste vältimiseks ja oma rakenduste üldise tõhususe parandamiseks. Pidage meeles, et kasutage seda läbimõeldult, kombineerige seda teiste optimeerimistehnikatega ja mõõtke alati jõudluse mõju, et veenduda, et see tegelikult midagi muudab.

Hoolikalt rakendades komponendi memoisatsiooni tehnikaid, saate luua sujuvamaid, paremini reageerivaid Reacti rakendusi, mis pakuvad paremat kasutajakogemust.

Lisalugemist ja ressursid

• React.memo dokumentatsioon
• Jõudluse optimeerimine Reactis
• useMemo and useCallback