React Refs: Atmaskojot useRef pret createRef

React izstrādes dinamiskajā pasaulē ir ļoti svarīgi efektīvi pārvaldīt komponentu stāvokli un mijiedarboties ar dokumentu objekta modeli (DOM). React Refs nodrošina mehānismu tiešai piekļuvei un manipulācijai ar DOM elementiem vai React komponentēm. Divas galvenās metodes Refs izveidei ir useRef un createRef. Lai gan abas kalpo Refs izveides mērķim, tās atšķiras savā ieviešanā un lietošanas gadījumos. Šis ceļvedis ir paredzēts, lai atmaskotu šīs divas pieejas, sniedzot skaidrību par to, kad un kā efektīvi izmantot katru no tām savos React projektos, īpaši izstrādājot globālai auditorijai.

Izpratne par React Refs

Ref (saīsinājums no "reference") ir React funkcija, kas ļauj tieši piekļūt DOM mezglam vai React komponentei. Tas ir īpaši noderīgi, ja nepieciešams:

• Tieši manipulēt ar DOM elementu, piemēram, fokusējot ievades lauku.
• Piekļūt bērna komponentes metodēm vai īpašībām.
• Pārvaldīt vērtības, kas saglabājas pāri renderēšanām, neizraisot atkārtotu renderēšanu (līdzīgi kā instances mainīgie klases komponentēs).

Lai gan React veicina deklaratīvu pieeju, kurā lietotāja saskarne tiek pārvaldīta, izmantojot stāvokli un rekvizītus, ir situācijas, kad ir nepieciešama tieša manipulācija. Refs nodrošina veidu, kā pārvarēt plaisu starp React deklaratīvo dabu un imperatīvām DOM operācijām.

createRef: Klases komponentes pieeja

createRef ir React nodrošināta metode. To galvenokārt izmanto klases komponentēs, lai izveidotu Refs. Katru reizi, kad klases komponente tiek inicializēta, createRef izveido jaunu Ref objektu. Tas nodrošina, ka katrai komponentes instancei ir savs unikāls Ref.

Sintakse un lietojums

Lai izmantotu createRef, vispirms jādeklarē Ref savā klases komponentē, parasti konstruktorā. Pēc tam pievienojiet Ref DOM elementam vai komponentei, izmantojot atribūtu ref.

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

  componentDidMount() {
    // Piekļuve DOM elementam pēc komponentes piestiprināšanas
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

Šajā piemērā this.myRef tiek izveidots, izmantojot React.createRef(). Pēc tam tas tiek piešķirts ievades elementa ref atribūtam. Pēc komponentes piestiprināšanas (componentDidMount), varat piekļūt faktiskajam DOM mezglam, izmantojot this.myRef.current, un veikt ar to darbības (šajā gadījumā, fokusējot ievadi).

Piemērs: Ievades lauka fokusēšana

Apskatīsim scenāriju, kurā vēlaties automātiski fokusēt ievades lauku, kad komponente tiek piestiprināta. Tas ir bieži sastopams Refs lietošanas gadījums, īpaši formās vai interaktīvos elementos.

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

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

  render() {
    return (
      

        
      
    );
  }
}

Šajā piemērā FocusInput fokusē ievades lauku tūlīt pēc piestiprināšanas. Tas var uzlabot lietotāja pieredzi, virzot lietotāja uzmanību uz ievades elementu, tiklīdz komponente ir atveidota.

Svarīgi apsvērumi, lietojot createRef

• Tikai klases komponentēm: createRef ir paredzēts lietošanai klases komponentēs. Lai gan tas tehniski varētu darboties funkcionālajās komponentēs, tas nav paredzētais lietojums un var izraisīt neparedzētu uzvedību.
• Jauns Ref katrā instancē: Katra klases komponentes instance iegūst savu createRef. Tas ir svarīgi, lai saglabātu izolāciju starp komponentu instancēm.

useRef: Funkcionālās komponentes āķis

useRef ir āķis, kas tika ieviests React 16.8. Tas nodrošina veidu, kā izveidot mainīgus Ref objektus funkcionālajās komponentēs. Atšķirībā no createRef, useRef atgriež to pašu Ref objektu katru reizi, kad komponente tiek renderēta. Tas padara to ideāli piemērotu vērtību saglabāšanai pāri renderēšanām, neizraisot atkārtotu renderēšanu.

Sintakse un lietojums

useRef lietošana ir vienkārša. Jūs izsaucat useRef āķi, nododot sākotnējo vērtību. Āķis atgriež objektu ar .current īpašību, ko pēc tam varat izmantot, lai piekļūtu un modificētu vērtību.

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

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

  useEffect(() => {
    // Piekļuve DOM elementam pēc komponentes piestiprināšanas
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

Šajā piemērā useRef(null) izveido Ref ar sākotnējo vērtību null. useEffect āķis tiek izmantots, lai piekļūtu DOM elementam pēc komponentes piestiprināšanas. myRef.current īpašība satur atsauci uz ievades elementu, ļaujot to fokusēt.

Piemērs: Iepriekšējo rekvizītu vērtību izsekošana

Viens spēcīgs useRef lietošanas gadījums ir rekvizīta iepriekšējās vērtības izsekošana. Tā kā Refs izmaiņas neizraisa atkārtotu renderēšanu, varat tos izmantot, lai saglabātu vērtības, kuras vēlaties saglabāt pāri renderēšanām, neietekmējot lietotāja saskarni.

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

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

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

  return (
    

      
Pašreizējā vērtība: {value}
      
Iepriekšējā vērtība: {previousValue.current}
    
  );
}

Šajā piemērā previousValue.current saglabā rekvizīta value iepriekšējo vērtību. useEffect āķis atjaunina Ref ikreiz, kad mainās value rekvizīts. Tas ļauj salīdzināt pašreizējās un iepriekšējās vērtības, kas var būt noderīgi izmaiņu noteikšanai vai animāciju ieviešanai.

Svarīgi apsvērumi, lietojot useRef

• Tikai funkcionālās komponentes: useRef ir āķis, un to var izmantot tikai funkcionālajās komponentēs vai pielāgotos āķos.
• Saglabājas pāri renderēšanām: useRef āķis atgriež to pašu Ref objektu katrā renderēšanas reizē. Tas ir galvenais tā spējā saglabāt vērtības, neizraisot atkārtotu renderēšanu.
• Mainīga .current īpašība: Jūs varat tieši modificēt Ref objekta .current īpašību.
• Sākotnējā vērtība: Jūs varat nodrošināt useRef sākotnējo vērtību. Šī vērtība tiks piešķirta .current īpašībai, kad komponente tiks renderēta pirmo reizi.
• Nav atkārtotas renderēšanas: Ref objekta .current īpašības modificēšana neizraisa komponentes atkārtotu renderēšanu.

useRef pret createRef: Detalizēts salīdzinājums

Tagad, kad esam individuāli izpētījuši gan useRef, gan createRef, salīdzināsim tos blakus, lai izceltu to galvenās atšķirības un to, kad izvēlēties vienu no otru.

Iezīme	useRef	createRef
Komponentes tips	Funkcionālās komponentes	Klases komponentes
Āķis vai metode	Āķis	Metode
Ref instance	Atgriež to pašu Ref objektu katrā renderēšanas reizē	Izveido jaunu Ref objektu katrai komponentes instancei
Lietošanas gadījumi	Piekļuve DOM elementiem Vērtību saglabāšana pāri renderēšanām, neizraisot atkārtotu renderēšanu Iepriekšējo rekvizītu vērtību izsekošana Mainīgu vērtību glabāšana, kas neizraisa atkārtotu renderēšanu	Piekļuve DOM elementiem Piekļuve bērnu komponentes metodēm

Pareizā Ref izvēle: Lēmumu pieņemšanas ceļvedis

Šeit ir vienkāršs ceļvedis, kas palīdzēs jums izvēlēties starp useRef un createRef:

• Vai strādājat ar funkcionālu komponenti? Izmantojiet useRef.
• Vai strādājat ar klases komponenti? Izmantojiet createRef.
• Vai nepieciešams saglabāt vērtību pāri renderēšanām, neizraisot atkārtotu renderēšanu? Izmantojiet useRef.
• Vai nepieciešams izsekot iepriekšējai rekvizīta vērtībai? Izmantojiet useRef.

Pāri DOM manipulācijai: Refs paplašinātie lietošanas gadījumi

Lai gan piekļuve un manipulācija ar DOM elementiem ir primārais Refs lietošanas gadījums, tie piedāvā iespējas, kas pārsniedz šo pamatfunkcionalitāti. Izpētīsim dažus paplašinātus scenārijus, kuros Refs var būt īpaši noderīgi.

1. Piekļuve bērnu komponentes metodēm

Refs var izmantot, lai piekļūtu metodēm, kas definētas bērnu komponentēs. Tas ļauj vecāku komponente tieši aktivizēt darbības vai izgūt datus no saviem bērniem tieši. Šī pieeja ir īpaši noderīga, ja nepieciešama precīza kontrole pār bērnu komponentēm.

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

  handleClick = () => {
    // Izsaukt metodi bērnu komponentē
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Aktivizēt bērnu darbību
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Bērnu komponentes darbība aktivizēta!');
  };

  render() {
    return 
Šī ir bērnu komponente.
;
  }
}

Šajā piemērā ParentComponent izmanto Ref, lai piekļūtu ChildComponent un izsauktu tās doSomething metodi.

2. Fokusa un atlases pārvaldība

Refs ir nenovērtējami, lai pārvaldītu fokusu un atlasi ievades laukos un citos interaktīvos elementos. Tas ir ļoti svarīgi, lai izveidotu pieejamas un lietotājam draudzīgas saskarnes.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Atlasīt tekstu ievades laukā
    }
  }, []);

  return ;
}

Šis piemērs fokusē ievadi un atlasa tās tekstu tūlīt pēc komponentes piestiprināšanas.

3. Elementu animēšana

Refs var izmantot kopā ar animāciju bibliotēkām (piemēram, GreenSock vai Framer Motion), lai tieši manipulētu ar DOM un izveidotu sarežģītas animācijas. Tas nodrošina smalku kontroli pār animācijas sekvencēm.

Piemērs, izmantojot vaniļas JavaScript vienkāršības labad:

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

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

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Vienkārša animācija: pārvietot kasti pa labi
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 sekunde
          iterations: Infinity, // Atkārtot bezgalīgi
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Šis piemērs izmanto Web Animations API, lai animētu vienkāršu kasti, pārvietojot to horizontāli turp un atpakaļ.

Labākās prakses React Refs izmantošanai globālās lietojumprogrammās

Izstrādājot React lietojumprogrammas globālai auditorijai, ir svarīgi ņemt vērā, kā Refs mijiedarbojas ar internacionalizāciju (i18n) un lokalizāciju (l10n). Šeit ir dažas labākās prakses:

1. Pieejamība (A11y)

Nodrošiniet, lai Refs izmantošana negatīvi neietekmē pieejamību. Piemēram, programmatiski fokusējot elementus, ņemiet vērā lietotāja fokusa secību un to, vai fokusa maiņa ir piemērota ekrāna lasītājiem un tastatūras lietotājiem.

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

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

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Fokusēt tikai tad, ja pogu jau nav fokusējis lietotājs
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Klikšķini mani;
}

2. Internacionalizēti ievades lauki

Strādājot ar ievades laukiem, ņemiet vērā dažādās ievades metodes un rakstzīmju kopas, ko izmanto dažādās valodās. Nodrošiniet, lai jūsu Ref balstītās manipulācijas (piemēram, atlase, kursora pozīcija) darbotos pareizi dažādos ievades veidos un lokālēs. Rūpīgi pārbaudiet savas komponentes ar dažādām valodām un ievades metodēm.

3. Izkārtojumi no labās uz kreiso (RTL)

Ja jūsu lietojumprogramma atbalsta RTL valodas (piemēram, arābu, ebreju), pārliecinieties, ka jūsu DOM manipulācijas, izmantojot Refs, ņem vērā apgriezto izkārtojumu. Piemēram, animējot elementus, apsveriet animācijas virziena apgriešanu RTL valodām.

4. Veiktspējas apsvērumi

Lai gan Refs nodrošina spēcīgu veidu, kā mijiedarboties ar DOM, pārmērīga lietošana var radīt veiktspējas problēmas. Tieša DOM manipulācija apiet React virtuālo DOM un saskaņošanas procesu, potenciāli novedot pie nekonsekvences un lēnākas atjaunināšanas. Izmantojiet Refs apdomīgi un tikai tad, kad tas ir nepieciešams.

Secinājumi

React Refs, īpaši useRef un createRef, ir būtiski rīki React izstrādātājiem. Izpratne par katras pieejas niansēm un to efektīvu pielietošanu ir ļoti svarīga, lai veidotu robustas un veiktspējīgas lietojumprogrammas. createRef joprojām ir standarts Refs pārvaldībai klases komponentēs, nodrošinot, ka katrai instancei ir savs unikāls Ref. useRef ar savu noturīgo raksturu pāri renderēšanām ir ideāli piemērots funkcionālām komponentēm, piedāvājot veidu, kā pārvaldīt DOM elementus un saglabāt vērtības, neizraisot nevajadzīgu atkārtotu renderēšanu. Gudri izmantojot šos rīkus, jūs varat uzlabot savu React lietojumprogrammu funkcionalitāti un lietotāja pieredzi, apkalpojot globālu auditoriju ar pieejamām un veiktspējīgām saskarnēm.

Tā kā React turpina attīstīties, šo fundamentālo koncepciju apguve dos jums iespēju radīt inovatīvas un lietotājam draudzīgas tīmekļa pieredzes, kas pārsniedz ģeogrāfiskās un kultūras robežas. Atcerieties par prioritāti noteikt pieejamību, internacionalizāciju un veiktspēju, lai nodrošinātu patiesi globālas lietojumprogrammas.