React.memo: Põhjalik juhend komponentide memoiseerimiseks globaalse jõudluse tagamiseks

Kaasaegse veebiarenduse dünaamilisel maastikul, eriti keerukate üheleheküljeliste rakenduste (SPA) levikuga, ei ole optimaalse jõudluse tagamine pelgalt valikuline täiustus; see on kasutajakogemuse kriitiline alustala. Kasutajad erinevates geograafilistes asukohtades, kes kasutavad rakendusi mitmesuguste seadmete ja võrgutingimuste kaudu, ootavad universaalselt sujuvat, reageerivat ja katkematut suhtlust. React pakub oma deklaratiivse paradigma ja ülitõhusa lepitusalgoritmiga (reconciliation algorithm) tugeva ja skaleeritava aluse selliste suure jõudlusega rakenduste loomiseks. Sellegipoolest, isegi Reacti sisseehitatud optimeerimistega, puutuvad arendajad sageli kokku olukordadega, kus üleliigsed komponentide uuesti renderdamised võivad rakenduse jõudlust kahjulikult mõjutada. See toob sageli kaasa aeglase kasutajaliidese, suurenenud ressursikulu ja üldiselt kehva kasutajakogemuse. Just nendes olukordades kerkib esile React.memo kui asendamatu tööriist – võimas mehhanism komponentide memoiseerimiseks, mis suudab oluliselt vähendada renderdamise lisakulu.

Selle põhjaliku juhendi eesmärk on pakkuda sügavuti minevat uurimust React.memo kohta. Me uurime hoolikalt selle põhilist eesmärki, lahkame selle toimimismehaanikat, piiritleme selged juhised, millal ja millal mitte seda kasutada, tuvastame levinud lõksud ja arutame täpsemaid tehnikaid. Meie peamine eesmärk on anda teile vajalikud teadmised, et teha kaalutletud, andmetel põhinevaid otsuseid jõudluse optimeerimise kohta, tagades seeläbi, et teie Reacti rakendused pakuvad erakordset ja järjepidevat kogemust tõeliselt globaalsele publikule.

Reacti renderdamisprotsessi mõistmine ja tarbetute uuesti renderdamiste probleem

Et täielikult mõista React.memo kasulikkust ja mõju, on hädavajalik esmalt luua alusteadmised sellest, kuidas React haldab komponentide renderdamist ja, mis on kriitilise tähtsusega, miks tekivad tarbetud uuesti renderdamised. Oma olemuselt on Reacti rakendus struktureeritud hierarhilise komponendipuu kujul. Kui komponendi sisemine olek või välised propsid muutuvad, käivitab React tavaliselt selle konkreetse komponendi ja vaikimisi kõigi selle alamkomponentide uuesti renderdamise. See kaskaadne uuesti renderdamise käitumine on standardne omadus, mida sageli nimetatakse 'render-on-update'.

Virtuaalne DOM ja lepitusprotsess (Reconciliation): Sügavam ülevaade

Reacti geniaalsus seisneb selle kaalutletud lähenemises brauseri dokumendiobjekti mudeliga (DOM) suhtlemisel. Selle asemel, et iga uuenduse puhul otse tegelikku DOM-i manipuleerida – operatsioon, mis on teadaolevalt arvutuslikult kulukas – kasutab React abstraktset esitust, mida tuntakse 'virtuaalse DOM-ina'. Iga kord, kui komponent renderdatakse (või uuesti renderdatakse), konstrueerib React Reacti elementide puu, mis on sisuliselt kerge, mälusisene esitus tegelikust DOM-i struktuurist, mida see ootab. Kui komponendi olek või propsid muutuvad, genereerib React uue virtuaalse DOM-i puu. Järgnevat, ülitõhusat võrdlusprotsessi selle uue puu ja eelmise vahel nimetatakse 'lepituseks' (reconciliation).

Lepitusprotsessi ajal tuvastab Reacti erinevuste leidmise (diffing) algoritm arukalt absoluutselt minimaalse hulga muudatusi, mis on vajalikud tegeliku DOM-i sünkroonimiseks soovitud olekuga. Näiteks, kui suures ja keerulises komponendis on muudetud ainult ühte teksti sõlme, uuendab React täpselt seda konkreetset teksti sõlme brauseri tegelikus DOM-is, vältides täielikult vajadust renderdada uuesti kogu komponendi tegelikku DOM-i esitust. Kuigi see lepitusprotsess on märkimisväärselt optimeeritud, tarbivad pidev virtuaalse DOM-i puude loomine ja hoolikas võrdlemine, isegi kui need on vaid abstraktsed esitused, siiski väärtuslikke protsessori tsükleid. Kui komponenti renderdatakse sageli uuesti ilma tegeliku muutusteta selle renderdatud väljundis, kulutatakse need protsessori tsüklid asjatult, mis viib raisatud arvutusressurssideni.

Tarbetute uuesti renderdamiste käegakatsutav mõju globaalsele kasutajakogemusele

Kujutage ette funktsioonirikast ettevõtte armatuurlaua rakendust, mis on hoolikalt loodud paljude omavahel seotud komponentidega: dünaamilised andmetabelid, keerulised interaktiivsed graafikud, geograafiliselt teadlikud kaardid ja mitmeastmelised vormid. Kui kõrgetasemelises vanemkomponendis toimub näiliselt väike oleku muutus ja see muutus levib tahtmatult, käivitades alamkomponentide uuesti renderdamise, mis on oma olemuselt arvutuslikult kulukad renderdada (nt keerukad andmete visualiseerimised, suured virtualiseeritud loendid või interaktiivsed georuumilised elemendid), isegi kui nende konkreetsed sisendpropsid ei ole funktsionaalselt muutunud, võib see kaskaadne efekt kaasa tuua mitmeid soovimatuid tulemusi:

• Suurenenud protsessori kasutus ja aku tühjenemine: Pidev uuesti renderdamine koormab kliendi protsessorit rohkem. See tähendab suuremat akukulu mobiilseadmetes, mis on ülemaailmne murekoht kasutajatele, ja üldiselt aeglasemat, vähem sujuvat kogemust vähem võimsatel või vanematel arvutitel, mis on levinud paljudel maailma turgudel.
• Kasutajaliidese hangumine ja tajutav viivitus: Kasutajaliides võib uuenduste ajal ilmutada märgatavat hakkimist, külmumist või 'jank'i, eriti kui uuesti renderdamise operatsioonid blokeerivad brauseri peamise lõime. See nähtus on teravalt tajutav piiratud protsessori võimsuse või mäluga seadmetes, mis on levinud paljudes arenevates majandustes.
• Vähenenud reageerimisvõime ja sisendi latentsus: Kasutajad võivad kogeda tajutavaid viivitusi oma sisenditoimingute (nt klikid, klahvivajutused) ja vastava visuaalse tagasiside vahel. See vähenenud reageerimisvõime muudab rakenduse loiuks ja kohmakaks, kahandades kasutajate usaldust.
• Halvenenud kasutajakogemus ja loobumismäärad: Lõppkokkuvõttes on aeglane, mittereageeriv rakendus masendav. Kasutajad ootavad kohest tagasisidet ja sujuvaid üleminekuid. Kehv jõudlusprofiil aitab otseselt kaasa kasutajate rahulolematusele, suurenenud põrkemääradele ja potentsiaalsele rakendusest loobumisele performantsemate alternatiivide kasuks. Globaalselt tegutsevate ettevõtete jaoks võib see tähendada märkimisväärset kaasatuse ja tulu kaotust.

Just see levinud probleem, funktsionaalsete komponentide tarbetu uuesti renderdamine, kui nende sisendpropsid ei ole muutunud, on see, mida React.memo on loodud lahendama ja tõhusalt parandama.

React.memo tutvustus: Komponentide memoiseerimise põhikontseptsioon

React.memo on elegantselt disainitud kõrgema järgu komponendina (HOC), mida pakub otse Reacti teek. Selle põhimehhanism keerleb funktsionaalse komponendi viimase renderdatud väljundi 'memoiseerimise' (või vahemällu salvestamise) ümber. Järelikult korraldab see komponendi uuesti renderdamise ainult siis, kui selle sisendpropsid on läbinud pinnapealse muutuse. Kui propsid on identsed eelmises renderdustsüklis saadutega, taaskasutab React.memo arukalt eelnevalt renderdatud tulemust, vältides seeläbi täielikult sageli ressursimahukat uuesti renderdamise protsessi.

Kuidas React.memo töötab: Pinnapealse võrdluse nüanss

Kui te kapseldate funktsionaalse komponendi React.memo-sse, teostab React selle propside hoolikalt määratletud pinnapealse võrdluse. Pinnapealne võrdlus toimib järgmiste reeglite alusel:

• Primitiivsete väärtuste puhul: Siia kuuluvad andmetüübid nagu numbrid, stringid, tõeväärtused, null, undefined, sümbolid ja bigintid. Nende tüüpide puhul viib React.memo läbi range võrdsuse kontrolli (===). Kui prevProp === nextProp, loetakse need võrdseks.
• Mitteprimitiivsete väärtuste puhul: Sellesse kategooriasse kuuluvad objektid, massiivid ja funktsioonid. Nende puhul uurib React.memo, kas viited nendele väärtustele on identsed. On ülioluline mõista, et see EI teosta objektide või massiivide sisemise sisu või struktuuri sügavat võrdlust. Kui propina edastatakse uus objekt või massiiv (isegi identse sisuga), on selle viide erinev ja React.memo tuvastab muutuse, käivitades uuesti renderdamise.

Konkretiseerime seda praktilise koodinäitega:

            import React from 'react';

// Funktsionaalne komponent, mis logib oma uuesti renderdamisi
const MyPureComponent = ({ value, onClick }) => {
  console.log('MyPureComponent re-rendered'); // See logi aitab visualiseerida uuesti renderdamisi
  return (
    <div style={{ padding: '10px', border: '1px solid #ccc', marginBottom: '10px' }}>
      <h4>Memoized Child Component</h4>
      <p>Current Value from Parent: <strong>{value}</strong></p>
      <button onClick={onClick} style={{ padding: '8px 15px', background: '#007bff', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
        Increment Value (via Child's Click)
      </button>
    </div>
  );
};

// Komponendi memoiseerimine jõudluse optimeerimiseks
const MemoizedMyPureComponent = React.memo(MyPureComponent);

const ParentComponent = () => {
  const [count, setCount] = React.useState(0);
  const [otherState, setOtherState] = React.useState(0); // Olek, mida ei edastata alamkomponendile

  // useCallback'i kasutamine onClick käitleja memoiseerimiseks
  const handleClick = React.useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); // Tühi sõltuvuste massiiv tagab, et selle funktsiooni viide on stabiilne

  console.log('ParentComponent re-rendered');

  return (
    <div style={{ border: '2px solid #000', padding: '20px', backgroundColor: '#f9f9f9' }}>
      <h2>Parent Component</h2>
      <p>Parent's Internal Count: <strong>{count}</strong></p>
      <p>Parent's Other State: <strong>{otherState}</strong></p>
      <button onClick={() => setOtherState(otherState + 1)} style={{ padding: '8px 15px', background: '#28a745', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer', marginRight: '10px' }}>
        Update Other State (Parent Only)
      </button>
      <button onClick={() => setCount(count + 1)} style={{ padding: '8px 15px', background: '#dc3545', color: 'white', border: 'none', borderRadius: '4px', cursor: 'pointer' }}>
        Update Count (Parent Only)
      </button>
      
      <hr style={{ margin: '20px 0' }} />
      
      <MemoizedMyPureComponent value={count} onClick={handleClick} />
    </div>
  );
};

export default ParentComponent;

            

              
                Copy
              
            
          

Selles illustreerivas näites, kui ParentComponent-is kutsutakse välja `setOtherState`, algatab uuesti renderdamise ainult ParentComponent ise. Oluline on, et MemoizedMyPureComponent ei renderdu uuesti. See on tingitud sellest, et selle `value` prop (mis on `count`) ei ole oma primitiivset väärtust muutnud ja selle `onClick` prop (mis on `handleClick` funktsioon) on säilitanud sama viite tänu `React.useCallback` hookile. Järelikult käivitatakse MyPureComponent-i sees olev `console.log('MyPureComponent re-rendered')` lause ainult siis, kui `count` prop tõeliselt muutub, demonstreerides memoiseerimise tõhusust.

Millal kasutada React.memo: Strateegiline optimeerimine maksimaalse mõju saavutamiseks

Kuigi React.memo on võimas vahend jõudluse parandamiseks, on hädavajalik rõhutada, et see ei ole imerohi, mida valimatult igale komponendile rakendada. Juhuslik või liigne React.memo rakendamine võib paradoksaalselt lisada tarbetut keerukust ja potentsiaalset jõudluse lisakulu, mis on tingitud võrdluskontrollidest endist. Eduka optimeerimise võti peitub selle strateegilises ja sihipärases kasutamises. Kasutage React.memo-d kaalutletult järgmistes täpselt määratletud stsenaariumides:

1. Komponendid, mis renderdavad identsete propside korral identse väljundi (puhtad komponendid)

See on React.memo kõige olulisem ja ideaalsem kasutusjuhtum. Kui funktsionaalse komponendi renderdatud väljund sõltub ainult selle sisendpropsidest ega sõltu ühestki sisemisest olekust või React Contextist, mis läbib sagedasi, ettearvamatuid muutusi, siis on see suurepärane kandidaat memoiseerimiseks. Sellesse kategooriasse kuuluvad tavaliselt esitluskomponendid, staatilised kuvakaardid, üksikud elemendid suurtes loendites või komponendid, mis peamiselt teenindavad vastuvõetud andmete renderdamist.

            // Näide: Nimekirja element, mis kuvab kasutaja andmeid
const UserListItem = React.memo(({ user }) => {
  console.log(`Rendering User: ${user.name}`); // Jälgi uuesti renderdamisi
  return (
    <li style={{ padding: '8px', borderBottom: '1px dashed #eee', display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
      <span><strong>{user.name}</strong> ({user.id})</span>
      <em>{user.email}</em>
    </li>
  );
});

const UserList = ({ users }) => {
  console.log('UserList re-rendered');
  return (
    <ul style={{ listStyle: 'none', padding: '0', border: '1px solid #ddd', borderRadius: '4px', margin: '20px 0' }}>
      {users.map(user => (
        <UserListItem key={user.id} user={user} />
      ))}
    </ul>
  );
};

// Vanemkomponendis, kui 'users' massiivi viide ise jääb muutumatuks
// ja ka üksikud 'user' objektid selles massiivis säilitavad oma viited
// (st neid ei asendata uute objektidega, millel on samad andmed), siis UserListItem
// komponendid ei renderdu uuesti. Kui massiivi lisatakse uus kasutaja objekt (luues uue viite),
// või olemasoleva kasutaja ID või mõni muu atribuut põhjustab selle objekti viite muutumise,
// siis renderdub valikuliselt uuesti ainult mõjutatud UserListItem, kasutades Reacti tõhusat diffing-algoritmi.

            

              
                Copy
              
            
          

2. Suure renderdamiskuluga komponendid (arvutusmahukad renderdused)

Kui komponendi renderdusmeetod hõlmab keerulisi ja ressursimahukaid arvutusi, ulatuslikke DOM-manipulatsioone või märkimisväärse hulga pesastatud alamkomponentide renderdamist, võib selle memoiseerimine anda väga olulise jõudluse kasvu. Sellised komponendid tarbivad oma renderdustsükli jooksul sageli märkimisväärselt protsessori aega. Näitlikud stsenaariumid hõlmavad:

• Suured, interaktiivsed andmetabelid: Eriti need, millel on palju ridu, veerge, keerukas lahtrite vormindus või reasisene redigeerimisvõimalus.
• Keerulised graafikud või graafilised esitused: Rakendused, mis kasutavad teeke nagu D3.js, Chart.js või lõuendipõhist renderdamist keerukate andmete visualiseerimiseks.
• Komponendid, mis töötlevad suuri andmehulki: Komponendid, mis itereerivad läbi suurte andmemassiivide oma visuaalse väljundi genereerimiseks, mis võib hõlmata kaardistamist, filtreerimist või sorteerimist.
• Komponendid, mis laadivad väliseid ressursse: Kuigi see ei ole otsene renderduskulu, võib laaditud sisu kuvamise memoiseerimine vältida vilkumist, kui nende renderdatud väljund on seotud sageli muutuvate laadimise olekutega.

3. Komponendid, mis renderdatakse sageli uuesti vanemkomponendi oleku muutuste tõttu

Reacti rakendustes on levinud muster, kus vanemkomponendi oleku uuendused käivitavad tahtmatult kõigi selle laste uuesti renderdamise, isegi kui nende laste spetsiifilised propsid ei ole funktsionaalselt muutunud. Kui alamkomponent on oma sisult suhteliselt staatiline, kuid selle vanem uuendab sageli oma sisemist olekut, põhjustades seeläbi kaskaadi, saab React.memo tõhusalt need tarbetud, ülalt-alla uuesti renderdamised kinni püüda ja ära hoida, murdes levikuahela.

Millal MITTE kasutada React.memo: Tarbetu keerukuse ja lisakoormuse vältimine

Sama kriitiline kui mõistmine, millal strateegiliselt kasutada React.memo-d, on ära tunda olukordi, kus selle rakendamine on kas ebavajalik või, mis veelgi hullem, kahjulik. React.memo rakendamine ilma hoolika kaalumiseta võib lisada asjatut keerukust, varjata silumisradasid ja potentsiaalselt isegi lisada jõudluse lisakoormust, mis tühistab kõik tajutavad eelised.

1. Harva renderdatavad komponendid

Kui komponent on loodud uuesti renderduma ainult harvadel juhtudel (nt üks kord esmasel paigaldamisel ja võib-olla üks kord hiljem globaalse oleku muutuse tõttu, mis tõeliselt mõjutab selle kuvamist), võib React.memo poolt teostatava prop-võrdluse marginaalne lisakulu kergesti ületada igasuguse potentsiaalse säästu renderduse vahelejätmisest. Kuigi pinnapealse võrdluse kulu on minimaalne, on igasuguse lisakulu rakendamine juba niigi odavalt renderdatavale komponendile põhimõtteliselt vastupidise tulemusega.

2. Sageli muutuvate propsidega komponendid

Kui komponendi propsid on oma olemuselt dünaamilised ja muutuvad peaaegu iga kord, kui selle vanemkomponent uuesti renderdub (nt prop, mis on otseselt seotud kiiresti uueneva animatsioonikaadriga, reaalajas finantstickeriga või otseandmevooga), tuvastab React.memo järjepidevalt need prop-muutused ja käivitab seetõttu ikkagi uuesti renderdamise. Sellistes stsenaariumides lisab React.memo mähis vaid võrdlusloogika lisakulu, pakkumata tegelikku kasu vahelejäänud renderduste näol.

3. Komponendid, millel on ainult primitiivsed propsid ja pole keerulisi lapsi

Kui funktsionaalne komponent saab propsidena ainult primitiivseid andmetüüpe (nagu numbrid, stringid või tõeväärtused) ja ei renderda lapsi (või ainult äärmiselt lihtsaid, staatilisi lapsi, mis pole ise mähitud), on selle olemuslik renderduskulu väga tõenäoliselt tühine. Nendel juhtudel oleks memoiseerimisest saadav jõudluse kasu märkamatu ja üldiselt on soovitatav eelistada koodi lihtsust, jättes React.memo mähise ära.

4. Komponendid, mis saavad pidevalt propsidena uusi objekti/massiivi/funktsiooni viiteid

See on kriitiline ja sageli esinev lõks, mis on otseselt seotud React.memo pinnapealse võrdlusmehhanismiga. Kui teie komponent saab mitteprimitiivseid propsid (nagu objektid, massiivid või funktsioonid), mis on tahtmatult või disaini tõttu iga vanemkomponendi uuesti renderdamise korral täiesti uute eksemplaridena instantseeritud, siis tajub React.memo neid propsid pidevalt muutununa, isegi kui nende aluseks olev sisu on semantiliselt identne. Sellistes levinud stsenaariumides nõuab tõhus lahendus React.useCallback-i ja React.useMemo-i kasutamist koos React.memo-ga, et tagada stabiilsed ja järjepidevad prop-viited renderduste vahel.

Viidete võrdsuse probleemide ületamine: useCallback ja useMemo oluline partnerlus

Nagu eelnevalt selgitatud, tugineb React.memo propside pinnapealsele võrdlusele. See kriitiline omadus tähendab, et propsidena edastatud funktsioone, objekte ja massiive peetakse alati 'muutunuks', kui need on vanemkomponendis iga renderdustsükli ajal uuesti loodud. See on väga levinud stsenaarium, mis, kui seda ei lahendata, tühistab täielikult React.memo kavandatud jõudluseelised.

Levinud probleem propsidena edastatavate funktsioonidega

            const ParentWithProblem = () => {
  const [count, setCount] = React.useState(0);

  // PROBLEEM: See 'increment' funktsioon luuakse iga ParentWithProblem'i renderdamise korral
  // täiesti uue objektina. Selle viide muutub.
  const increment = () => {
    setCount(prevCount => prevCount + 1);
  };

  console.log('ParentWithProblem re-rendered');

  return (
    <div style={{ border: '1px solid red', padding: '15px', marginBottom: '15px' }}>
      <h3>Parent with Function Reference Problem</h3>
      <p>Count: <strong>{count}</strong></p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>Update Parent Count Directly</button>
      <MemoizedChildComponent onClick={increment} />
    </div>
  );
};

const MemoizedChildComponent = React.memo(({ onClick }) => {
  // See logi käivitub tarbetult, sest 'onClick' viide muutub pidevalt
  console.log('MemoizedChildComponent re-rendered due to new onClick ref');
  return (
    <div style={{ border: '1px solid blue', padding: '10px', marginTop: '10px' }}>
      <p>Child Component</p>
      <button onClick={onClick}>Click Me (Child's Button)</button>
    </div>
  );
});

            

              
                Copy
              
            
          

Eespool nimetatud näites renderdatakse MemoizedChildComponent kahjuks uuesti iga kord, kui ParentWithProblem uuesti renderdatakse, isegi kui `count` olek (või mõni muu prop, mida see võiks saada) pole põhimõtteliselt muutunud. See soovimatu käitumine tekib seetõttu, et `increment` funktsioon on defineeritud `ParentWithProblem` komponendi sees. See tähendab, et iga renderdustsükli ajal genereeritakse täiesti uus funktsiooni objekt, millel on eraldiseisev mäluaadress. React.memo, tehes oma pinnapealset võrdlust, tuvastab selle uue funktsiooniviite `onClick` propi jaoks ja järeldab, oma vaatenurgast õigesti, et prop on muutunud, käivitades seega lapse tarbetu uuesti renderdamise.

Lõplik lahendus: useCallback funktsioonide memoiseerimiseks

React.useCallback on fundamentaalne Reacti Hook, mis on spetsiaalselt loodud funktsioonide memoiseerimiseks. See tagastab tagasikutse funktsiooni (callback function) memoiseeritud versiooni. See memoiseeritud funktsiooni eksemplar muutub (st luuakse uus funktsiooni viide) ainult siis, kui mõni selle sõltuvuste massiivis määratud sõltuvus on muutunud. See tagab alamkomponentidele stabiilse funktsiooniviite.

            const ParentWithSolution = () => {
  const [count, setCount] = React.useState(0);

  // LAHENDUS: Memoiseeri 'increment' funktsioon useCallback'i abil.
  // Tühja sõltuvuste massiiviga ([]) luuakse 'increment' ainult üks kord paigaldamisel.
  const increment = React.useCallback(() => {
    setCount(prevCount => prevCount + 1);
  }, []); 

  // Näide sõltuvusega: kui 'count' oleks otseselt vajalik increment'i sees (harvem setCount(prev...) puhul)
  // const incrementWithDep = React.useCallback(() => {
  //   console.log('Current count from closure:', count);
  //   setCount(count + 1);
  // }, [count]); // See funktsioon luuakse uuesti ainult siis, kui 'count' muudab oma primitiivset väärtust

  console.log('ParentWithSolution re-rendered');

  return (
    <div style={{ border: '1px solid green', padding: '15px', marginBottom: '15px' }}>
      <h3>Parent with Function Reference Solution</h3>
      <p>Count: <strong>{count}</strong></p>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>Update Parent Count Directly</button>
      <MemoizedChildComponent onClick={increment} />
    </div>
  );
};

// Eelmise näite MemoizedChildComponent kehtib endiselt.
// Nüüd renderdatakse see uuesti ainult siis, kui 'count' tegelikult muutub või muud propsid, mida see saab, muutuvad.

            

              
                Copy
              
            
          

Selle rakendusega renderdatakse MemoizedChildComponent nüüd uuesti ainult siis, kui selle `value` prop (või mõni muu prop, mille see saab ja mis tõeliselt muudab oma primitiivset väärtust või stabiilset viidet) põhjustab `ParentWithSolution` uuesti renderdamise ja seejärel `increment` funktsiooni uuesti loomise (mis tühja sõltuvuste massiiviga `[]` on pärast esmast paigaldamist tegelikult mitte kunagi). Funktsioonide puhul, mis sõltuvad olekust või propsidest (`incrementWithDep` näide), loodaksid need uuesti ainult siis, kui need spetsiifilised sõltuvused muutuvad, säilitades memoiseerimise eelised enamiku ajast.

Väljakutse propsidena edastatavate objektide ja massiividega

            const ParentWithObjectProblem = () => {
  const [data, setData] = React.useState({ id: 1, name: 'Alice' });

  // PROBLEEM: See 'config' objekt luuakse iga renderdamise korral uuesti.
  // Selle viide muutub, isegi kui selle sisu on identne.
  const config = { type: 'user', isActive: true, permissions: ['read', 'write'] };

  console.log('ParentWithObjectProblem re-rendered');

  return (
    <div style={{ border: '1px solid orange', padding: '15px', marginBottom: '15px' }}>
      <h3>Parent with Object Reference Problem</h3>
      <button onClick={() => setData(prevData => ({ ...prevData, name: 'Bob' }))}>Change Data Name</button>
      <MemoizedDisplayComponent item={data} settings={config} />
    </div>
  );
};

const MemoizedDisplayComponent = React.memo(({ item, settings }) => {
  // See logi käivitub tarbetult, sest 'settings' objekti viide muutub pidevalt
  console.log('MemoizedDisplayComponent re-rendered due to new object ref');
  return (
    <div style={{ border: '1px solid purple', padding: '10px', marginTop: '10px' }}>
      <p>Displaying Item: <strong>{item.name}</strong> (ID: {item.id})</p>
      <p>Settings: Type: {settings.type}, Active: {settings.isActive.toString()}, Permissions: {settings.permissions.join(', ')}</p>
    </div>
  );
});

            

              
                Copy
              
            
          

Analoogselt funktsioonide probleemiga on `config` objekt selles stsenaariumis värske eksemplar, mis genereeritakse igal `ParentWithObjectProblem` renderdamisel. Järelikult renderdatakse MemoizedDisplayComponent soovimatult uuesti, sest React.memo tajub, et `settings` propi viide muutub pidevalt, isegi kui selle kontseptuaalne sisu jääb staatiliseks.

Elegantne lahendus: useMemo objektide ja massiivide memoiseerimiseks

React.useMemo on täiendav Reacti Hook, mis on loodud väärtuste (mis võivad sisaldada objekte, massiive või kulukate arvutuste tulemusi) memoiseerimiseks. See arvutab väärtuse ja arvutab selle väärtuse uuesti (luues seeläbi uue viite) ainult siis, kui mõni selle määratud sõltuvustest on muutunud. See muudab selle ideaalseks lahenduseks stabiilsete viidete pakkumiseks objektidele ja massiividele, mis edastatakse propsidena memoiseeritud alamkomponentidele.

const ParentWithObjectSolution = () => {
  const [data, setData] = React.useState({ id: 1, name: 'Alice' });
  const [theme, setTheme] = React.useState('light');

  // LAHENDUS 1: Memoiseeri staatiline objekt useMemo abil tühja sõltuvuste massiiviga
  const staticConfig = React.useMemo(() => ({
    type: 'user',
    isActive: true,
  }), []); // Selle objekti viide on renderduste vahel stabiilne

  // LAHENDUS 2: Memoiseeri objekt, mis sõltub olekust, arvutades uuesti ainult siis, kui 'theme' muutub
  const dynamicSettings = React.useMemo(() => ({
    displayTheme: theme,
    notificationsEnabled: true,
  }), [theme]); // Selle objekti viide muutub ainult siis, kui 'theme' muutub

  // Näide tuletatud massiivi memoiseerimisest
  const processedItems = React.useMemo(() => {
    // Kujutage siin ette rasket töötlemist, nt suure nimekirja filtreerimist
    return data.id % 2 === 0 ? ['even', 'processed'] : ['odd', 'processed'];
  }, [data.id]); // Arvuta uuesti ainult siis, kui data.id muutub

  console.log('ParentWithObjectSolution re-rendered');

  return (
    <div style={{ border: '1px solid blue', padding: '15px', marginBottom: '15px' }}>
      <h3>Parent with Object Reference Solution</h3>
      <button onClick={() => setData(prevData => ({ ...prevData, id: prevData.id + 1 }))}>Change Data ID</button>
      <button onClick={() => setTheme(prevTheme => (prevTheme === 'light' ? 'dark' : 'light'))}>Toggle Theme</button>
      <MemoizedDisplayComponent item={data} settings={staticConfig} dynamicSettings={dynamicSettings} processedItems={processedItems} />
    </div>
  );
};

const MemoizedDisplayComponent = React.memo(({ item, settings, dynamicSettings, processedItems }) => {
  console.log('MemoizedDisplayComponent re-rendered'); // See logib nüüd ainult siis, kui asjakohased propsid tegelikult muutuvad
  return (
    <div style={{ border: '1px solid teal', padding: '10px', marginTop: '10px' }}>
      <p>Displaying Item: <strong>{item.name}</strong> (ID: {item.id})</p>
      <p>Static Settings: Type: {settings.type}, Active: {settings.isActive.toString()}</p>
      <p>Dynamic Settings: Theme: {dynamicSettings.displayTheme}, Notifications: {dynamicSettings.notificationsEnabled.toString()}</p>
      <p>Processed Items: {processedItems.join(', ')}</p>
    </div>
  );
});
```

const ComplexChartComponent = ({ dataPoints, options, onChartClick }) => {
  console.log('ComplexChartComponent re-rendered');
  // Kujutage ette, et see komponent hõlmab väga kulukat renderdusloogikat, nt d3.js või lõuendi joonistamist
  return (
    <div style={{ border: '1px solid #c0ffee', padding: '20px', marginBottom: '20px' }}>
      <h4>Advanced Chart Display</h4>
      <p>Data Points Count: <strong>{dataPoints.length}</strong></p>
      <p>Chart Title: <strong>{options.title}</strong></p>
      <p>Zoom Level: <strong>{options.zoomLevel}</strong></p>
      <button onClick={onChartClick}>Interact with Chart</button>
    </div>
  );
};

// Kohandatud võrdlusfunktsioon ComplexChartComponent'i jaoks
const areChartPropsEqual = (prevProps, nextProps) => {
  // 1. Võrdle 'dataPoints' massiivi viite järgi (eeldades, et see on vanema poolt memoiseeritud või muutumatu)
  if (prevProps.dataPoints !== nextProps.dataPoints) return false;

  // 2. Võrdle 'onChartClick' funktsiooni viite järgi (eeldades, et see on vanema poolt memoiseeritud useCallback'i kaudu)
  if (prevProps.onChartClick !== nextProps.onChartClick) return false;

  // 3. Kohandatud sügavapoolne võrdlus 'options' objekti jaoks
  // Meid huvitab ainult see, kas 'title' või 'zoomLevel' options'is muutuvad,
  // ignoreerides teisi võtmeid nagu 'debugMode' uuesti renderdamise otsuse tegemisel.
  const optionsChanged = (
    prevProps.options.title !== nextProps.options.title ||
    prevProps.options.zoomLevel !== nextProps.options.zoomLevel
  );

  // Kui optionsChanged on tõene, siis propsid EI ole võrdsed, seega tagasta false (renderda uuesti).
  // Vastasel juhul, kui kõik ülaltoodud kontrollid läbisid, loetakse propsid võrdseks, seega tagasta true (ära renderda uuesti).
  return !optionsChanged;
};

const MemoizedComplexChartComponent = React.memo(ComplexChartComponent, areChartPropsEqual);

// Kasutamine vanemkomponendis:
const DashboardPage = () => {
  const [chartData, setChartData] = React.useState([
    { id: 1, value: 10 }, { id: 2, value: 20 }, { id: 3, value: 15 }
  ]);
  const [chartOptions, setChartOptions] = React.useState({
    title: 'Sales Performance',
    zoomLevel: 1,
    debugMode: false, // See propi muutus EI tohiks käivitada uuesti renderdamist
    theme: 'light'
  });

  const handleChartInteraction = React.useCallback(() => {
    console.log('Chart interacted!');
    // Potentsiaalselt uuenda vanema olekut, nt setChartData(...)
  }, []);

  return (
    <div style={{ border: '2px solid #555', padding: '25px', backgroundColor: '#f0f0f0' }}>
      <h3>Dashboard Analytics</h3>
      <button onClick={() => setChartOptions(prev => ({ ...prev, zoomLevel: prev.zoomLevel + 1 }))}
      style={{ marginRight: '10px' }}>
        Increase Zoom
      </button>
      <button onClick={() => setChartOptions(prev => ({ ...prev, debugMode: !prev.debugMode }))}
      style={{ marginRight: '10px' }}>
        Toggle Debug (No Re-render expected)
      </button>
      <button onClick={() => setChartOptions(prev => ({ ...prev, title: 'Revenue Overview' }))}
      >
        Change Chart Title
      </button>
      
      <MemoizedComplexChartComponent
        dataPoints={chartData}
        options={chartOptions}
        onChartClick={handleChartInteraction}
      />
    </div>
  );
};
```