React useEvent: Stabiilsete sündmuste käsitlejate viidete saavutamine

Reacti arendajad seisavad sageli silmitsi väljakutsetega sündmuste käsitlejatega tegelemisel, eriti stsenaariumides, mis hõlmavad dünaamilisi komponente ja sulgendeid. useEvent hook, suhteliselt uus lisand Reacti ökosüsteemi, pakub nendele probleemidele elegantse lahenduse, võimaldades arendajatel luua stabiilseid sündmuste käsitlejate viiteid, mis ei käivita tarbetuid ümberrenderdusi.

Probleemi mõistmine: Sündmuste käsitlejate ebastabiilsus

Reactis renderdatakse komponente uuesti, kui nende propsid või olek muutuvad. Kui sündmuse käsitleja funktsioon edastatakse propina, luuakse vanemkomponendi igal renderdamisel sageli uus funktsiooni eksemplar. See uus funktsiooni eksemplar, isegi kui sellel on sama loogika, loetakse Reacti poolt erinevaks, mis viib selle saava alamkomponendi uuesti renderdamiseni.

Vaatleme seda lihtsat näidet:


import React, { useState } from 'react';

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

  const handleClick = () => {
    console.log('Klõpsati vanemkomponendist:', count);
    setCount(count + 1);
  };

  return (
    
      
      Loendur: {count}
    
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent renderdati');
  return ;
}

export default ParentComponent;

Selles näites luuakse handleClick uuesti igal ParentComponent'i renderdamisel. Isegi kui ChildComponent võiks olla optimeeritud (nt kasutades React.memo), renderdatakse see siiski uuesti, kuna onClick prop on muutunud. See võib põhjustada jõudlusprobleeme, eriti keerukates rakendustes.

Tutvustame useEvent'i: Lahendus

useEvent hook lahendab selle probleemi, pakkudes sündmuse käsitleja funktsioonile stabiilse viite. See eraldab sündmuse käsitleja tõhusalt oma vanemkomponendi ümberrenderdustsüklitest.

Kuigi useEvent ei ole sisseehitatud Reacti hook (seisuga React 18), saab seda hõlpsasti implementeerida kohandatud hookina või pakutakse seda mõnes raamistikus ja teegis nende utiliitide komplekti osana. Siin on levinud implementatsioon:


import { useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // useLayoutEffect on siin sünkroonsete uuenduste jaoks ülioluline
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // Sõltuvuste massiiv on taotluslikult tühi, tagades stabiilsuse
  ) as T;
}

export default useEvent;

Selgitus:

`useRef(fn)`: Luuakse ref, et hoida funktsiooni `fn` viimast versiooni. Refid püsivad renderduste vahel, põhjustamata uusi renderdusi, kui nende väärtus muutub.
`useLayoutEffect(() => { ref.current = fn; })`: See efekt uuendab refi hetkeväärtust `fn`'i uusima versiooniga. useLayoutEffect käivitub sünkroonselt pärast kõiki DOM-i mutatsioone. See on oluline, sest see tagab, et ref uuendatakse enne, kui sündmuste käsitlejaid kutsutakse. useEffect'i kasutamine võib põhjustada peeneid vigu, kus sündmuse käsitleja viitab `fn`'i vananenud väärtusele.
`useCallback((...args) => { return ref.current(...args); }, [])`: See loob memoreeritud funktsiooni, mis kutsumisel käivitab refi salvestatud funktsiooni. Tühi sõltuvuste massiiv `[]` tagab, et see memoreeritud funktsioon luuakse ainult üks kord, pakkudes stabiilset viidet. Hajussüntaks `...args` võimaldab sündmuse käsitlejal aktsepteerida mis tahes arvu argumente.

useEvent'i kasutamine praktikas

Nüüd refaktoreerime eelmise näite, kasutades useEvent'i:


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

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // useLayoutEffect on siin sünkroonsete uuenduste jaoks ülioluline
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // Sõltuvuste massiiv on taotluslikult tühi, tagades stabiilsuse
  ) as T;
}

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

  const handleClick = useEvent(() => {
    console.log('Klõpsati vanemkomponendist:', count);
    setCount(count + 1);
  });

  return (
    
      
      Loendur: {count}
    
  );
}

function ChildComponent({ onClick }) {
  console.log('ChildComponent renderdati');
  return ;
}

export default ParentComponent;

Mähkides handleClick'i useEvent'iga, tagame, et ChildComponent saab sama funktsiooni viite üle ParentComponent'i renderduste, isegi kui count'i olek muutub. See hoiab ära ChildComponent'i tarbetud ümberrenderdused.

useEvent'i kasutamise eelised

Jõudluse optimeerimine: Hoiab ära alamkomponentide tarbetud ümberrenderdused, mis viib parema jõudluseni, eriti keerukates rakendustes, kus on palju komponente.
Stabiilsed viited: Tagab, et sündmuste käsitlejad säilitavad renderduste vahel ühtse identiteedi, lihtsustades komponendi elutsükli haldamist ja vähendades ootamatut käitumist.
Lihtsustatud loogika: Vähendab vajadust keerukate memoreerimistehnikate või möödapääsude järele stabiilsete sündmuste käsitlejate viidete saavutamiseks.
Parem koodi loetavus: Muudab koodi lihtsamini mõistetavaks ja hooldatavaks, osutades selgelt, et sündmuse käsitlejal peaks olema stabiilne viide.

useEvent'i kasutusjuhud

Sündmuste käsitlejate edastamine propidena: Kõige levinum kasutusjuht, nagu näidatud ülaltoodud näidetes. Stabiilsete viidete tagamine sündmuste käsitlejate edastamisel alamkomponentidele propidena on tarbetute ümberrenderduste vältimiseks ülioluline.
Tagasikutsumised useEffectis: Kasutades sündmuste käsitlejaid useEffect'i tagasikutsumistes, saab useEvent vältida vajadust lisada käsitleja sõltuvuste massiivi, lihtsustades sõltuvuste haldamist.
Integratsioon kolmandate osapoolte teekidega: Mõned kolmandate osapoolte teegid võivad oma sisemiste optimeerimiste jaoks tugineda stabiilsetele funktsiooniviidetele. useEvent aitab tagada ühilduvuse nende teekidega.
Kohandatud hookid: Kohandatud hookide loomine, mis haldavad sündmuste kuulajaid, saavad sageli kasu useEvent'i kasutamisest, et pakkuda tarbivatele komponentidele stabiilseid käsitlejaviiteid.

Alternatiivid ja kaalutlused

Kuigi useEvent on võimas tööriist, on olemas alternatiivseid lähenemisviise ja kaalutlusi, mida meeles pidada:

`useCallback` tühja sõltuvuste massiiviga: Nagu nägime useEvent'i implementatsioonis, võib useCallback tühja sõltuvuste massiiviga pakkuda stabiilset viidet. Kuid see ei uuenda automaatselt funktsiooni keha, kui komponent uuesti renderdatakse. Siin paistab useEvent silma, kasutades useLayoutEffect'i refi uuendatuna hoidmiseks.
Klassikomponendid: Klassikomponentides on sündmuste käsitlejad tavaliselt seotud komponendi eksemplariga konstruktoris, pakkudes vaikimisi stabiilset viidet. Kuid klassikomponendid on tänapäevases Reacti arenduses vähem levinud.
React.memo: Kuigi React.memo võib takistada komponentide uuesti renderdamist, kui nende propid pole muutunud, teostab see ainult propide pindmist võrdlust. Kui sündmuse käsitleja prop on igal renderdamisel uus funktsiooni eksemplar, ei takista React.memo uuesti renderdamist.
Üleoptimeerimine: On oluline vältida üleoptimeerimist. Mõõtke jõudlust enne ja pärast useEvent'i rakendamist, et veenduda, et see tegelikult kasu toob. Mõnel juhul võib useEvent'i lisakulu kaaluda üles jõudluse kasvu.

Rahvusvahelistumise ja ligipääsetavuse kaalutlused

Reacti rakenduste arendamisel globaalsele publikule on oluline arvestada rahvusvahelistumise (i18n) ja ligipääsetavusega (a11y). useEvent ise ei mõjuta otseselt i18n-i ega a11y-d, kuid see võib kaudselt parandada nende komponentide jõudlust, mis käsitlevad lokaliseeritud sisu või ligipääsetavuse funktsioone.

Näiteks, kui komponent kuvab lokaliseeritud teksti või kasutab ARIA atribuute vastavalt praegusele keelele, võib selle komponendi sees olevate sündmuste käsitlejate stabiilsuse tagamine takistada tarbetuid ümberrenderdusi keele muutumisel.

Näide: useEvent lokaliseerimisega


import React, { useState, useContext, createContext, useCallback, useRef, useLayoutEffect } from 'react';

function useEvent any>(fn: T): T {
  const ref = useRef(fn);

  // useLayoutEffect on siin sünkroonsete uuenduste jaoks ülioluline
  useLayoutEffect(() => {
    ref.current = fn;
  });

  return useCallback(
    (...args: Parameters): ReturnType => {
      return ref.current(...args);
    },
    [] // Sõltuvuste massiiv on taotluslikult tühi, tagades stabiilsuse
  ) as T;
}

const LanguageContext = createContext('en');

function LocalizedButton() {
  const language = useContext(LanguageContext);
  const [text, setText] = useState(getLocalizedText(language));

  const handleClick = useEvent(() => {
    console.log('Nupule klõpsati keeles', language);
    // Soorita mingi tegevus vastavalt keelele
  });

  function getLocalizedText(lang) {
      switch (lang) {
        case 'en':
          return 'Click me';
        case 'fr':
          return 'Cliquez ici';
        case 'es':
          return 'Haz clic aquí';
        default:
          return 'Click me';
      }
    }

    //Simuleeri keelevahetust
    React.useEffect(()=>{
        setTimeout(()=>{
            setText(getLocalizedText(language === 'en' ? 'fr' : 'en'))
        }, 2000)
    }, [language])

  return ;
}

function App() {
  const [language, setLanguage] = useState('en');

  const toggleLanguage = useCallback(() => {
    setLanguage(language === 'en' ? 'fr' : 'en');
  }, [language]);

  return (
    
      
        
        
      
    
  );
}

export default App;

Selles näites kuvab LocalizedButton'i komponent teksti vastavalt praegusele keelele. Kasutades useEvent'i handleClick'i käsitleja jaoks, tagame, et nupp ei renderdu tarbetult uuesti keele muutumisel, parandades jõudlust ja kasutajakogemust.

Kokkuvõte

useEvent hook on väärtuslik tööriist Reacti arendajatele, kes soovivad optimeerida jõudlust ja lihtsustada komponentide loogikat. Pakkudes stabiilseid sündmuste käsitlejate viiteid, hoiab see ära tarbetud ümberrenderdused, parandab koodi loetavust ja suurendab Reacti rakenduste üldist tõhusust. Kuigi see pole sisseehitatud Reacti hook, muudavad selle lihtne implementatsioon ja olulised eelised selle väärtuslikuks lisandiks iga Reacti arendaja tööriistakasti.

Mõistes useEvent'i põhimõtteid ja selle kasutusjuhte, saavad arendajad ehitada jõudluslikumaid, hooldatavamaid ja skaleeritavamaid Reacti rakendusi globaalsele publikule. Ärge unustage alati mõõta jõudlust ja arvestada oma rakenduse spetsiifiliste vajadustega enne optimeerimistehnikate rakendamist.