React useCallback: Sügav sukeldumine funktsiooni memoriseerimisse ja jõudluse optimeerimisse

Kaasaegse veebiarenduse maailmas paistab React silma oma deklaratiivse kasutajaliidese ja tõhusa renderdusmudeliga. Kuid rakenduste keerukuse kasvades muutub optimaalse jõudluse tagamine iga arendaja jaoks kriitiliseks vastutuseks. React pakub võimsaid tööriistu nende väljakutsetega toimetulekuks ja olulisimate – ning sageli valesti mõistetavate – hulgas on optimeerimiskonksud. Täna sukeldume sügavuti ühte neist: useCallback.

See põhjalik juhend demüstifitseerib useCallback konksu. Uurime põhimõttelist JavaScripti kontseptsiooni, mis muudab selle vajalikuks, mõistame selle süntaksit ja mehaanikat ning mis kõige tähtsam, kehtestame selged juhised, millal peaksite seda oma koodis kasutama – ja millal mitte. Lõpuks olete varustatud useCallback'i kasutamiseks mitte võluvitsana, vaid täpse tööriistana oma Reacti rakenduste kiiremaks ja tõhusamaks muutmiseks.

Põhiprobleem: Referentsiaalse võrdsuse mõistmine

Enne kui saame hinnata, mida useCallback teeb, peame esmalt mõistma JavaScripti põhikontseptsiooni: referentsiaalne võrdsus. JavaScriptis on funktsioonid objektid. See tähendab, et kui võrrelda kahte funktsiooni (või mis tahes kahte objekti), ei võrdle te nende sisu, vaid nende viidet – nende konkreetset asukohta mälus.

Mõelge sellele lihtsale JavaScripti koodijupile:

            const func1 = () => { console.log('Hello'); };
const func2 = () => { console.log('Hello'); };

console.log(func1 === func2); // Outputs: false
            

              
                Copy
              
            
          

Isegi kui func1 ja func2 omavad identset koodi, on nad kaks eraldi funktsiooni objekti, mis on loodud erinevatel mälu aadressidel. Seega ei ole nad võrdsed.

Kuidas see Reacti komponente mõjutab

Reacti funktsionaalne komponent on oma olemuselt funktsioon, mis käivitatakse iga kord, kui komponenti on vaja renderdada. See juhtub siis, kui selle olek muutub või kui selle vanemkomponent uuesti renderdub. Kui see funktsioon käivitub, luuakse kõik selle sees olev, sealhulgas muutujate ja funktsioonide deklaratsioonid, nullist uuesti.

Vaatame tüüpilist komponenti:

            import React, { useState } from 'react';

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

  // This function is re-created on every single render
  const handleIncrement = () => {
    console.log('Creating a new handleIncrement function');
    setCount(count + 1);
  };

  return (
    

      
Count: {count}
      Increment
    
  );
};

            

              
                Copy
              
            
          

Iga kord, kui klõpsate nupul "Increment", muutub count olek, põhjustades Counter komponendi uuesti renderdumise. Iga uuesti renderdumise ajal luuakse täiesti uus handleIncrement funktsioon. Sellise lihtsa komponendi puhul on jõudluse mõju tühine. JavaScripti mootor on funktsioonide loomisel uskumatult kiire. Miks me siis peaksime selle pärast isegi muretsema?

Miks funktsioonide uuesti loomine probleemiks muutub

Probleem ei ole funktsiooni loomine iseenesest; see on ahelreaktsioon, mida see võib põhjustada, kui see antakse propina lastekomponentidele, eriti neile, mis on optimeeritud React.memo abil.

React.memo on Higher-Order Component (HOC), mis memoriseerib komponendi. See töötab, võrreldes komponendi propeid pinnapealselt. Kui uued propped on samad, mis vanad propped, jätab React komponendi uuesti renderdamise vahele ja kasutab viimati renderdatud tulemust. See on võimas optimeerimine tarbetute renderdussükklite vältimiseks.

Nüüd vaatame, kus meie probleem referentsiaalse võrdsusega esile kerkib. Kujutame ette, et meil on vanemkomponent, mis annab käsitleja funktsiooni memoriseeritud lastekomponendile.

            import React, { useState } from 'react';

// A memoized child component that only re-renders if its props change.
const MemoizedButton = React.memo(({ onIncrement }) => {
  console.log('MemoizedButton is rendering!');
  return Increment from Child;
});

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

  // This function is re-created every time ParentComponent renders
  const handleIncrement = () => {
    setCount(count + 1);
  };

  return (
    

      
Parent Count: {count}
      
Other State: {String(otherState)}
       setOtherState(!otherState)}>Toggle Other State
      

      
    
  );
};

            

              
                Copy
              
            
          

Selles näites saab MemoizedButton ühe propi: onIncrement. Võite oodata, et kui klõpsate nupul "Toggle Other State", renderdub uuesti ainult ParentComponent, sest count pole muutunud ja seega on onIncrement funktsioon loogiliselt sama. Kuid kui käivitate selle koodi, näete konsoolis iga kord, kui klõpsate "Toggle Other State", teadet "MemoizedButton is rendering!".

Miks see juhtub?

Kui ParentComponent uuesti renderdub (tänu setOtherState'ile), loob see handleIncrement funktsiooni uue eksemplari. Kui React.memo võrdleb MemoizedButton'i prope, näeb see, et oldProps.onIncrement !== newProps.onIncrement referentsiaalse võrdsuse tõttu. Uus funktsioon on erineval mälu aadressil. See nurjunud kontroll sunnib meie memoriseeritud last uuesti renderduma, kaotades täielikult React.memo eesmärgi.

See on peamine stsenaarium, kus useCallback appi tuleb.

Lahendus: Memoriseerimine `useCallback` abil

useCallback konks on loodud just selle probleemi lahendamiseks. See võimaldab teil funktsiooni definitsiooni renderduste vahel memoriseerida, tagades, et see säilitab referentsiaalse võrdsuse, välja arvatud juhul, kui selle sõltuvused muutuvad.

Süntaks

            const memoizedCallback = useCallback(
  () => {
    // The function to memoize
    doSomething(a, b);
  },
  [a, b], // The dependency array
);

            

              
                Copy
              
            
          

• Esimene argument: Siseselt defineeritud tagasikutsumisfunktsioon, mida soovite memoriseerida.
• Teine argument: Sõltuvuste massiiv. useCallback tagastab uue funktsiooni ainult siis, kui üks selle massiivi väärtustest on pärast viimast renderdust muutunud.

Refaktoreerime meie eelmise näite, kasutades useCallback'i:

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

const MemoizedButton = React.memo(({ onIncrement }) => {
  console.log('MemoizedButton is rendering!');
  return Increment from Child;
});

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

  // Now, this function is memoized!
  const handleIncrement = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Dependency: 'count'

  return (
    

      
Parent Count: {count}
      
Other State: {String(otherState)}
       setOtherState(!otherState)}>Toggle Other State
      

      
    
  );
};

            

              
                Copy
              
            
          

Nüüd, kui klõpsate "Toggle Other State", renderdub ParentComponent uuesti. React käivitab useCallback konksu. See võrdleb count väärtust oma sõltuvuste massiivis eelmise renderduse väärtusega. Kuna count pole muutunud, tagastab useCallback täpselt sama funktsiooni eksemplari, mis ta viimati tagastas. Kui React.memo võrdleb MemoizedButton'i prope, leiab see, et oldProps.onIncrement === newProps.onIncrement. Kontroll õnnestub ja lapse tarbetu uuesti renderdumine on edukalt vahele jäetud! Probleem lahendatud.

Sõltuvuste massiivi valdamine

Sõltuvuste massiiv on useCallback'i õigel kasutamisel kõige kriitilisem osa. See ütleb Reactile, millal on funktsiooni ohutu uuesti luua. Vale kasutamine võib viia peente vigadeni, mida on raske jälgida.

Tühi massiiv: `[]`

Kui annate tühja sõltuvuste massiivi, ütlete Reactile: "Seda funktsiooni pole kunagi vaja uuesti luua. Algse renderduse versioon on igavesti hea."

            const stableFunction = useCallback(() => {
  console.log('This will always be the same function');
}, []); // Empty array

            

              
                Copy
              
            
          

See loob väga stabiilse viite, kuid sellega kaasneb suur hoiatus: "aegunud sulgu" probleem. Sulg on see, kui funktsioon "mäletab" muutujaid ulatusest, milles see loodi. Kui teie tagasikutsumine kasutab olekut või prope, kuid te ei loetle neid sõltuvustena, siis see sulgub nende algväärtuste kohal.

Näide aegunud sulust:

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

  const handleLogCount = useCallback(() => {
    // This 'count' is the value from the initial render (0)
    // because `count` is not in the dependency array.
    console.log(`Current count is: ${count}`); 
  }, []); // WRONG! Missing dependency

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
      Log Count
    
  );
};

            

              
                Copy
              
            
          

Selles näites, olenemata sellest, mitu korda klõpsate "Increment", prindib nupule "Log Count" klõpsamine alati "Current count is: 0". Funktsioon handleLogCount on kinni jäänud count väärtusega esimesest renderdusest, sest selle sõltuvuste massiiv on tühi.

Õige massiiv: `[dep1, dep2, ...]`

Aegunud sulgu probleemi lahendamiseks peate lisama sõltuvuste massiivi sisse iga komponendi ulatuse muutuja (olek, propped jne), mida teie funktsioon kasutab.

            const handleLogCount = useCallback(() => {
  console.log(`Current count is: ${count}`);
}, [count]); // CORRECT! Now it depends on count.

            

              
                Copy
              
            
          

Nüüd, iga kord, kui count muutub, loob useCallback uue handleLogCount funktsiooni, mis sulgub count uue väärtuse kohal. See on konksu korrektne ja ohutu kasutamise viis.

Proffide nõuanne: Kasutage alati paketti eslint-plugin-react-hooks. See pakub `exhaustive-deps` reeglit, mis hoiatab teid automaatselt, kui jätate oma `useCallback`, `useEffect` või `useMemo` konksudes sõltuvuse vahele. See on hindamatu ohutusvõrk.

Täiustatud mustrid ja tehnikad

1. Funktsionaalsed uuendused sõltuvuste vältimiseks

Mõnikord soovite stabiilset funktsiooni, mis uuendab olekut, kuid te ei soovi seda iga kord, kui olek muutub, uuesti luua. See on tavaline funktsioonide puhul, mis antakse edasi kohandatud konksudele või konteksti pakkujatele. Selle saate saavutada, kasutades olekusättija funktsionaalset uuendusvormi.

            const handleIncrement = useCallback(() => {
  // `setCount` can take a function that receives the previous state.
  // This way, we don't need to depend on `count` directly.
  setCount(prevCount => prevCount + 1);
}, []); // The dependency array can now be empty!

            

              
                Copy
              
            
          

Kasutades setCount(prevCount => ...), ei pea meie funktsioon enam count muutujat komponendi ulatusest lugema. Kuna see ei sõltu millestki, saame ohutult kasutada tühja sõltuvuste massiivi, luues funktsiooni, mis on komponendi kogu elutsükli jooksul tõeliselt stabiilne.

2. `useRef` kasutamine muutlike väärtuste jaoks

Mis siis, kui teie tagasikutsumine peab juurde pääsema sageli muutuva propi või oleku uusimale väärtusele, kuid te ei soovi oma tagasikutsumist ebastabiilseks muuta? Saate kasutada `useRef`'i, et säilitada muutuv viide uusimale väärtusele ilma uuesti renderdust käivitamata.

            const VeryFrequentUpdates = ({ onEvent }) => {
  const [value, setValue] = useState('');

  // Keep a ref to the latest version of the onEvent callback
  const onEventRef = useRef(onEvent);
  useEffect(() => {
    onEventRef.current = onEvent;
  }, [onEvent]);

  // This internal callback can be stable
  const handleInternalAction = useCallback(() => {
    // ...some internal logic...
    
    // Call the latest version of the prop function via the ref
    if (onEventRef.current) {
      onEventRef.current();
    }
  }, []); // Stable function

  // ...
};

            

              
                Copy
              
            
          

See on täiustatud muster, kuid see on kasulik keerukates stsenaariumides nagu debouncing, throttling või kolmanda osapoole teekidega suhtlemisel, mis nõuavad stabiilseid tagasikutsumisviiteid.

Oluline nõuanne: Millal MITTE `useCallback`'i kasutada

Reacti konksude algajad langevad sageli lõksu, mässides iga funktsiooni useCallback'i. See on vastumuster, mida tuntakse enneaegse optimeerimisena. Pidage meeles, et useCallback ei ole tasuta; sellel on jõudluse kulu.

`useCallback`'i kulu

• Mälu: See peab salvestama memoriseeritud funktsiooni mällu.
• Arvutus: Igal renderdusel peab React ikkagi konksu kutsuma ja sõltuvuste massiivi elemente võrdlema nende eelnevate väärtustega.

Paljudel juhtudel võib see kulu ületada kasu. Konksu kutsumise ja sõltuvuste võrdlemise üldkulud võivad olla suuremad kui funktsiooni lihtsalt uuesti loomise ja lapse komponendi uuesti renderdumise lubamise kulud.

Ärge kasutage `useCallback`'i siis, kui:

1. Funktsioon antakse edasi natiivsele HTML-elemendile: Komponendid nagu <div>, <button> või <input> ei hooli nende sündmuste käsitlejate referentsiaalsest võrdsusest. Uue funktsiooni edastamine onClick-ile iga renderduse ajal on täiesti normaalne ja sellel puudub jõudluse mõju.

            // NO need for useCallback here
const handleClick = () => { console.log('Clicked!'); };
return <button onClick={handleClick}>Click Me</button>;

            

              
                Copy
              
            
          

2. Vastuvõttev komponent ei ole memoriseeritud: Kui annate tagasikutsumise lastekomponendile, mis ei ole mähitud React.memo'sse, on tagasikutsumise memoriseerimine mõttetu. Lastekomponent renderdub ikkagi uuesti, kui selle vanem uuesti renderdub.
3. Funktsioon on defineeritud ja kasutatakse ühes komponendi renderdussüklis: Kui funktsiooni ei anta edasi propina ega kasutata sõltuvusena teises konksus, pole selle viite memoriseerimiseks põhjust.

Kuldreegel: Kasutage useCallback'i ainult sihipärase optimeerimisena. Kasutage React DevTools Profilerit, et tuvastada komponendid, mis renderduvad tarbetult uuesti. Kui leiate komponendi, mis on mähitud React.memo'sse ja mis ikka renderdub uuesti ebastabiilse tagasikutsumise propi tõttu, on see ideaalne aeg useCallback'i rakendamiseks.

`useCallback` vs. `useMemo`: Peamine erinevus

Teine levinud segadusepunkt on useCallback'i ja useMemo erinevus. Need on väga sarnased, kuid teenivad erinevaid eesmärke.

• useCallback(fn, deps) memoriseerib funktsiooni eksemplari. See annab teile tagasi sama funktsiooni objekti renderduste vahel.
• useMemo(() => value, deps) memoriseerib funktsiooni tagastusväärtuse. See käivitab funktsiooni ja annab teile tagasi selle tulemuse, arvutades selle uuesti ainult siis, kui sõltuvused muutuvad.

Sisuliselt on `useCallback(fn, deps)` lihtsalt süntaksiline suhkur `useMemo(() => fn, deps)` jaoks. See on mugavuskonks funktsioonide memoriseerimise spetsiifilise kasutusjuhtumi jaoks.

Millal kasutada kumbagi?

• Kasutage useCallback funktsioonide jaoks, mida annate lastekomponentidele, et vältida tarbetut uuesti renderdumist (nt sündmuste käsitlejad nagu onClick, onSubmit).
• Kasutage useMemo arvutuslikult kallite arvutuste jaoks, nagu suure andmekogumi filtreerimine, keerulised andmetöötlused või mis tahes väärtus, mille arvutamine võtab kaua aega ja mida ei tohiks iga renderduse puhul uuesti arvutada.

            // Use case for useMemo: Expensive calculation
const visibleTodos = useMemo(() => {
  console.log('Filtering list...'); // This is expensive
  return todos.filter(t => t.status === filter);
}, [todos, filter]);

// Use case for useCallback: Stable event handler
const handleAddTodo = useCallback((text) => {
  dispatch({ type: 'ADD_TODO', text });
}, []); // Stable dispatch function

return (
  
);

            

              
                Copy
              
            
          

Kokkuvõte ja parimad tavad

useCallback konks on võimas tööriist teie Reacti jõudluse optimeerimise tööriistakastis. See lahendab otse referentsiaalse võrdsuse probleemi, võimaldades teil stabiliseerida funktsiooni prope ja avada `React.memo` ning teiste konksude, nagu `useEffect`, täieliku potentsiaali.

Peamised järeldused:

• Eesmärk: useCallback tagastab memoriseeritud versiooni tagasikutsumisfunktsioonist, mis muutub ainult siis, kui üks selle sõltuvustest on muutunud.
• Peamine kasutusjuhtum: Vältida lastekomponentide tarbetut uuesti renderdumist, mis on mähitud React.memo'sse.
• Sekundaarne kasutusjuhtum: Pakkuda stabiilne funktsiooni sõltuvus teistele konksudele, näiteks useEffect'ile, et vältida nende käivitamist igal renderdusel.
• Sõltuvuste massiiv on kriitiline: Lisage alati kõik komponendi ulatuse muutujad, millest teie funktsioon sõltub. Kasutage `exhaustive-deps` ESLint reeglit selle jõustamiseks.
• See on optimeerimine, mitte vaikimisi: Ärge mähkige iga funktsiooni useCallback'i. See võib kahjustada jõudlust ja lisada tarbetut keerukust. Profileerige oma rakendust esmalt ja rakendage optimeerimisi strateegiliselt seal, kus neid kõige rohkem vaja on.

Mõistes useCallback'i "miks" ja järgides neid parimaid tavasid, saate liikuda mööda oletustest ja alustada teadlike, mõjukate jõudluse paranduste tegemist oma Reacti rakendustes, luues kasutajakogemusi, mis pole mitte ainult funktsioonirikkad, vaid ka sujuvad ja reageerivad.