React Refs: Demistifikacija useRef proti createRef

V dinamičnem svetu razvoja v Reactu je učinkovito upravljanje stanj komponent in interakcija z Modelom Objektov Dokumenta (DOM) ključnega pomena. React Refs omogočajo dostop in neposredno manipulacijo z elementi DOM ali React komponentami. Dve glavni metodi za ustvarjanje Refsov sta useRef in createRef. Čeprav oba služita namenu ustvarjanja Refsov, se razlikujeta po implementaciji in uporabi. Ta vodnik želi demistificirati ta dva pristopa in vam dati jasnost, kdaj in kako ju učinkovito izkoristiti v svojih projektih React, zlasti pri razvoju za globalno občinstvo.

Razumevanje React Refsov

Ref (skrajšano za referenco) je React funkcija, ki vam omogoča neposreden dostop do vozlišča DOM ali komponente React. To je še posebej uporabno, ko morate:

• Neposredno manipulirati z elementom DOM, na primer fokusiranje polja za vnos.
• Dostopati do metod ali lastnosti podrejene komponente.
• Upravljati vrednosti, ki trajajo med ponovnimi upodobitvami, ne da bi povzročile ponovne upodobitve (podobno kot spremenljivke primerov v razrednih komponentah).

Čeprav React spodbuja deklarativni pristop, kjer se uporabniški vmesnik upravlja prek stanja in rekvizitov, obstajajo situacije, ko je neposredna manipulacija potrebna. Refsi zagotavljajo način za premostitev vrzeli med Reactovo deklarativno naravo in imperativnimi operacijami DOM.

createRef: Pristop razredne komponente

createRef je metoda, ki jo zagotavlja React. Uporablja se predvsem v razrednih komponentah za ustvarjanje Refsov. Vsakič, ko se instancira razredna komponenta, createRef ustvari nov objekt Ref. To zagotavlja, da ima vsaka instanca komponente svoj edinstven Ref.

Sintaksa in uporaba

Če želite uporabiti createRef, najprej deklarirate Ref v svoji razredni komponenti, običajno v konstruktorju. Nato Ref pripnete na element DOM ali komponento z uporabo atributa ref.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  componentDidMount() {
    // Dostop do elementa DOM po tem, ko se komponenta pripne
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

V tem primeru je this.myRef ustvarjen z uporabo React.createRef(). Nato se dodeli atributu ref elementa input. Po tem, ko se komponenta pripne (v componentDidMount), lahko dostopate do dejanskega vozlišča DOM z uporabo this.myRef.current in izvajate operacije na njem (v tem primeru fokusiranje vnosa).

Primer: Fokusiranje polja za vnos

Poglejmo si scenarij, v katerem želite samodejno fokusirati polje za vnos, ko se komponenta pripne. To je pogosta uporaba Refsov, zlasti v obrazcih ali interaktivnih elementih.

class FocusInput extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  componentDidMount() {
    this.inputRef.current.focus();
  }

  render() {
    return (
      

        
      
    );
  }
}

V tem primeru FocusInput fokusira polje za vnos takoj po pripenjanju. To lahko izboljša uporabniško izkušnjo tako, da usmeri uporabnikovo pozornost na element vnosa takoj, ko je komponenta upodobljena.

Pomembni vidiki pri createRef

• Samo razredne komponente: createRef je zasnovan za uporabo v razrednih komponentah. Čeprav lahko tehnično deluje v funkcijskih komponentah, ni namenjeno uporabi in lahko privede do nepričakovanega vedenja.
• Nov Ref pri vsaki instanci: Vsaka instanca razredne komponente dobi svoj createRef. To je pomembno za ohranjanje izolacije med instancami komponent.

useRef: Funkcijski komponentni kavelj

useRef je kavelj, ki je bil predstavljen v React 16.8. Omogoča ustvarjanje spremenljivih objektov Ref znotraj funkcijskih komponent. Za razliko od createRef, useRef vrne isti objekt Ref vsakič, ko se komponenta upodobi. Zaradi tega je idealen za ohranjanje vrednosti med upodobitvami, ne da bi sprožil ponovne upodobitve.

Sintaksa in uporaba

Uporaba useRef je preprosta. Pokličete kavelj useRef in podate začetno vrednost. Kavelj vrne objekt z lastnostjo .current, ki jo nato lahko uporabite za dostop in spreminjanje vrednosti.

import React, { useRef, useEffect } from 'react';

function MyFunctionalComponent() {
  const myRef = useRef(null);

  useEffect(() => {
    // Dostop do elementa DOM po tem, ko se komponenta pripne
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

V tem primeru useRef(null) ustvari Ref z začetno vrednostjo null. Kavelj useEffect se uporablja za dostop do elementa DOM po tem, ko se komponenta pripne. Lastnost myRef.current hrani referenco na element vnosa, kar vam omogoča, da ga fokusirate.

Primer: Sledenje prejšnjim vrednostim rekvizitov

Ena zmogljiva uporaba useRef je sledenje prejšnji vrednosti rekvizita. Ker spremembe Refsov ne sprožijo ponovnih upodobitev, jih lahko uporabite za shranjevanje vrednosti, ki jih želite ohraniti med ponovitvami, ne da bi vplivali na uporabniški vmesnik.

import React, { useRef, useEffect } from 'react';

function PreviousValueComponent({ value }) {
  const previousValue = useRef();

  useEffect(() => {
    previousValue.current = value;
  }, [value]);

  return (
    

      
Trenutna vrednost: {value}
      
Prejšnja vrednost: {previousValue.current}
    
  );
}

V tem primeru previousValue.current shrani prejšnjo vrednost rekvizita value. Kavelj useEffect posodobi Ref vsakič, ko se rekvizit value spremeni. To vam omogoča primerjavo trenutne in prejšnje vrednosti, kar je lahko uporabno za zaznavanje sprememb ali implementacijo animacij.

Pomembni vidiki pri useRef

• Samo funkcijske komponente: useRef je kavelj in se lahko uporablja samo v funkcijskih komponentah ali po meri.
• Obstaja med ponovitvami: Kavelj useRef vrne isti objekt Ref pri vsaki ponovitvi. To je ključno za njegovo sposobnost, da ohranja vrednosti brez sprožitve ponovnih upodobitev.
• Spremenljiva lastnost .current: Neposredno lahko spremenite lastnost .current objekta Ref.
• Začetna vrednost: useRef lahko zagotovite začetno vrednost. Ta vrednost se bo dodelila lastnosti .current, ko se bo komponenta prvič upodobila.
• Brez ponovnih upodobitev: Spreminjanje lastnosti .current Refa ne povzroči ponovne upodobitve komponente.

useRef proti createRef: Podrobna primerjava

Zdaj, ko smo raziskali useRef in createRef posamično, jih primerjajmo drug ob drugem, da poudarimo njihove ključne razlike in kdaj izbrati enega pred drugim.

Funkcija	useRef	createRef
Tip komponente	Funkcijske komponente	Razredne komponente
Kavelj ali metoda	Kavelj	Metoda
Instanca Ref	Vrne isti objekt Ref pri vsaki ponovitvi	Ustvari nov objekt Ref pri vsaki instanci komponente
Primeri uporabe	Dostop do elementov DOM Ohranjanje vrednosti med ponovitvami brez sprožitve ponovnih upodobitev Sledenje prejšnjim vrednostim rekvizitov Shranjevanje spremenljivih vrednosti, ki ne povzročajo ponovnih upodobitev	Dostop do elementov DOM Dostop do metod podrejene komponente

Izbira pravega Refa: Odločitveni vodnik

Tukaj je preprost vodnik, ki vam bo pomagal pri izbiri med useRef in createRef:

• Ali delate s funkcijsko komponento? Uporabite useRef.
• Ali delate z razredno komponento? Uporabite createRef.
• Ali morate ohraniti vrednost med ponovitvami, ne da bi sprožili ponovne upodobitve? Uporabite useRef.
• Ali morate slediti prejšnji vrednosti rekvizita? Uporabite useRef.

Onkraj manipulacije z DOM: Napredni primeri uporabe Refsov

Medtem ko je dostop in manipulacija z elementi DOM primarna uporaba Refsov, ponujajo možnosti, ki presegajo to osnovno funkcionalnost. Poglejmo si nekaj naprednih scenarijev, kjer so lahko Refsi še posebej uporabni.

1. Dostop do metod podrejene komponente

Refse lahko uporabite za dostop do metod, definiranih v podrejenih komponentah. To omogoča nadrejeni komponenti, da sproži dejanja ali pridobi podatke neposredno od svojih podrejenih. Ta pristop je še posebej uporaben, ko potrebujete natančno kontrolo nad podrejenimi komponentami.

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.childRef = React.createRef();
  }

  handleClick = () => {
    // Pokličite metodo na podrejeni komponenti
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Sproži dejanje podrejenega
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Aktivirano dejanje podrejene komponente!');
  };

  render() {
    return 
To je podrejena komponenta.
;
  }
}

V tem primeru ParentComponent uporablja Ref za dostop do ChildComponent in pokliče svojo metodo doSomething.

2. Upravljanje fokusa in izbire

Refsi so neprecenljivi za upravljanje fokusa in izbire znotraj polj za vnos in drugih interaktivnih elementov. To je ključno za ustvarjanje dostopnih in uporabniku prijaznih vmesnikov.

import React, { useRef, useEffect } from 'react';

function FocusOnMount() {
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Izberite besedilo v vnosu
    }
  }, []);

  return ;
}

Ta primer fokusira vnos in izbere njegovo besedilo takoj, ko se komponenta pripne.

3. Animiranje elementov

Refse lahko uporabite v povezavi z animacijskimi knjižnicami (kot sta GreenSock ali Framer Motion) za neposredno manipulacijo z DOM in ustvarjanje zapletenih animacij. To omogoča natančen nadzor nad zaporedji animacij.

Primer z uporabo osnovnega JavaScripta za preprostost:

import React, { useRef, useEffect } from 'react';

function AnimatedBox() {
  const boxRef = useRef(null);

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Enostavna animacija: premaknite polje v desno
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 sekunda
          iterations: Infinity, // Ponavljajte v nedogled
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Ta primer uporablja API za spletne animacije za animacijo preprostega polja, ki ga premika naprej in nazaj vodoravno.

Najboljše prakse za uporabo React Refsov v globalnih aplikacijah

Pri razvoju React aplikacij za globalno občinstvo je pomembno upoštevati, kako Refsi vplivajo na internacionalizacijo (i18n) in lokalizacijo (l10n). Tukaj je nekaj najboljših praks:

1. Dostopnost (A11y)

Zagotovite, da vaša uporaba Refsov ne vpliva negativno na dostopnost. Na primer, pri programskem fokusiranju elementov upoštevajte vrstni red fokusa uporabnika in ali je sprememba fokusa primerna za bralnike zaslona in uporabnike tipkovnice.

import React, { useRef, useEffect } from 'react';

function AccessibleFocus() {
  const buttonRef = useRef(null);

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Fokusirajte samo, če uporabnik gumba še ni fokusiral
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Klikni me;
}

2. Internacionalizirana polja za vnos

Pri delu s polji za vnos bodite pozorni na različne metode vnosa in nabor znakov, ki se uporabljajo v različnih jezikih. Zagotovite, da vaše manipulacije, ki temeljijo na Refu (npr. izbira, položaj kurzorja), delujejo pravilno v različnih vrstah vnosa in lokalih. Temeljito preizkusite svoje komponente z različnimi jeziki in metodami vnosa.

3. Postavitve od desne proti levi (RTL)

Če vaša aplikacija podpira jezike RTL (npr. arabščina, hebrejščina), zagotovite, da vaše manipulacije z DOM z uporabo Refsov upoštevajo obrnjeno postavitev. Na primer, pri animaciji elementov razmislite o obratni smeri animacije za jezike RTL.

4. Upoštevanje zmogljivosti

Čeprav Refsi zagotavljajo močan način interakcije z DOM, lahko prekomerna uporaba povzroči težave z zmogljivostjo. Neposredna manipulacija z DOM obide Reactov virtualni DOM in postopek usklajevanja, kar lahko povzroči nedoslednosti in počasnejše posodobitve. Refse uporabljajte preudarno in le, kadar je to potrebno.

Zaključek

React Refsi, natančneje useRef in createRef, so bistvena orodja za razvijalce React. Razumevanje nians vsakega pristopa in kdaj jih učinkovito uporabiti, je ključnega pomena za izgradnjo robustnih in zmogljivih aplikacij. createRef ostaja standard za upravljanje Refsov v razrednih komponentah, kar zagotavlja, da ima vsaka instanca svoj edinstven Ref. useRef s svojo trajno naravo med ponovitvami je idealen za funkcijske komponente, saj ponuja način upravljanja elementov DOM in ohranjanja vrednosti, ne da bi sprožil nepotrebne ponovne upodobitve. Z modro uporabo teh orodij lahko izboljšate funkcionalnost in uporabniško izkušnjo svojih aplikacij React, ki jih prilagajate globalnemu občinstvu z dostopnimi in zmogljivimi vmesniki.

Ker se React še naprej razvija, vas bo obvladovanje teh temeljnih konceptov opolnomočilo, da ustvarite inovativne in uporabniku prijazne spletne izkušnje, ki presegajo geografske in kulturne meje. Ne pozabite dati prednost dostopnosti, internacionalizaciji in zmogljivosti, da boste lahko dostavili resnično globalne aplikacije.