React Refs: „useRef“ ir „createRef“ demistifikavimas

Dinamiškame React programavimo pasaulyje efektyvus komponentų būsenos valdymas ir sąveika su dokumento objektų modeliu (DOM) yra itin svarbūs. React Refs suteikia mechanizmą, leidžiantį tiesiogiai pasiekti ir manipuliuoti DOM elementais arba React komponentais. Du pagrindiniai metodai, skirti kurti Refs, yra useRef ir createRef. Nors abu atlieka tą pačią funkciją – kuria Refs – jie skiriasi savo įgyvendinimu ir panaudojimo atvejais. Šio vadovo tikslas – demistifikuoti šiuos du metodus, suteikiant aiškumo, kada ir kaip efektyviai juos panaudoti savo React projektuose, ypač kuriant programėles pasaulinei auditorijai.

Suprantant React Refs

Ref (sutrumpintai iš „reference“ – nuoroda) yra React funkcija, kuri leidžia jums tiesiogiai pasiekti DOM mazgą arba React komponentą. Tai ypač naudinga, kai reikia:

• Tiesiogiai manipuliuoti DOM elementu, pavyzdžiui, sufokusuoti įvesties lauką.
• Pasiekti vaikinio komponento metodus ar savybes.
• Valdyti reikšmes, kurios išlieka tarp atvaizdavimų, nesukeliant perrenderinimo (panašiai kaip egzemplioriaus kintamieji klasių komponentuose).

Nors React skatina deklaratyvų požiūrį, kai vartotojo sąsaja valdoma per būseną ir props'us, yra situacijų, kai būtina tiesioginė manipuliacija. Refs suteikia būdą užpildyti spragą tarp React deklaratyvios prigimties ir imperatyvių DOM operacijų.

createRef: Klasių komponentų metodas

createRef yra metodas, kurį suteikia React. Jis pirmiausia naudojamas klasių komponentuose kuriant Refs. Kiekvieną kartą, kai sukuriamas klasių komponento egzempliorius, createRef sukuria naują Ref objektą. Tai užtikrina, kad kiekvienas komponento egzempliorius turės savo unikalų Ref.

Sintaksė ir naudojimas

Norėdami naudoti createRef, pirmiausia deklaruojate Ref savo klasės komponente, dažniausiai konstruktoriuje. Tada priskiriate Ref DOM elementui arba komponentui naudodami ref atributą.

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

  componentDidMount() {
    // Access the DOM element after the component mounts
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

Šiame pavyzdyje this.myRef yra sukuriamas naudojant React.createRef(). Tada jis priskiriamas įvesties elemento ref atributui. Komponentui prisijungus (componentDidMount metode), galite pasiekti faktinį DOM mazgą per this.myRef.current ir atlikti su juo operacijas (šiuo atveju, sufokusuoti įvestį).

Pavyzdys: Įvesties lauko fokusavimas

Apsvarstykime scenarijų, kai norite automatiškai sufokusuoti įvesties lauką, kai komponentas prisijungia. Tai yra dažnas Refs panaudojimo atvejis, ypač formose ar interaktyviuose elementuose.

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

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

  render() {
    return (
      

        
      
    );
  }
}

Šiame pavyzdyje FocusInput sufokusuoja įvesties lauką iškart po prisijungimo. Tai gali pagerinti vartotojo patirtį, nukreipiant vartotojo dėmesį į įvesties elementą, kai tik komponentas yra atvaizduojamas.

Svarbūs aspektai naudojant createRef

• Tik klasių komponentams: createRef yra skirtas naudoti klasių komponentuose. Nors techniškai jis gali veikti ir funkciniuose komponentuose, tai nėra numatytas naudojimas ir gali sukelti netikėtą elgesį.
• Naujas Ref kiekvienam egzemplioriui: Kiekvienas klasių komponento egzempliorius gauna savo createRef. Tai svarbu siekiant išlaikyti izoliaciją tarp komponentų egzempliorių.

useRef: Funkcinių komponentų Hook'as

useRef yra Hook'as, kuris buvo pristatytas React 16.8 versijoje. Jis suteikia būdą kurti kintamus Ref objektus funkciniuose komponentuose. Skirtingai nuo createRef, useRef grąžina tą patį Ref objektą kiekvieną kartą, kai komponentas atvaizduojamas. Dėl to jis idealiai tinka išsaugoti reikšmes tarp atvaizdavimų, nesukeliant perrenderinimų.

Sintaksė ir naudojimas

Naudoti useRef yra paprasta. Iškviečiate useRef Hook'ą, perduodami pradinę reikšmę. Hook'as grąžina objektą su .current savybe, kurią galite naudoti reikšmei pasiekti ir keisti.

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

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

  useEffect(() => {
    // Access the DOM element after the component mounts
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

Šiame pavyzdyje useRef(null) sukuria Ref su pradine reikšme null. useEffect Hook'as naudojamas pasiekti DOM elementą po to, kai komponentas prisijungia. Savybė myRef.current saugo nuorodą į įvesties elementą, leisdama jį sufokusuoti.

Pavyzdys: Ankstesnių prop reikšmių sekimas

Vienas galingas useRef panaudojimo atvejis yra ankstesnės prop reikšmės sekimas. Kadangi Refs pakeitimai nesukelia perrenderinimų, galite juos naudoti reikšmėms, kurias norite išsaugoti tarp atvaizdavimų, nepaveikiant vartotojo sąsajos, saugoti.

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

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

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

  return (
    

      
Current Value: {value}
      
Previous Value: {previousValue.current}
    
  );
}

Šiame pavyzdyje previousValue.current saugo ankstesnę value prop reikšmę. useEffect Hook'as atnaujina Ref, kai tik pasikeičia value prop. Tai leidžia palyginti dabartinę ir ankstesnę reikšmes, kas gali būti naudinga aptinkant pakeitimus ar įgyvendinant animacijas.

Svarbūs aspektai naudojant useRef

• Tik funkciniams komponentams: useRef yra Hook'as ir gali būti naudojamas tik funkciniuose komponentuose arba pasirinktiniuose Hook'uose.
• Išlieka tarp atvaizdavimų: useRef Hook'as grąžina tą patį Ref objektą kiekvieno atvaizdavimo metu. Tai yra raktas į jo gebėjimą išsaugoti reikšmes, nesukeliant perrenderinimų.
• Kintama .current savybė: Galite tiesiogiai keisti Ref objekto .current savybę.
• Pradinė reikšmė: Galite pateikti pradinę reikšmę useRef. Ši reikšmė bus priskirta .current savybei, kai komponentas pirmą kartą atvaizduojamas.
• Jokių perrenderinimų: Ref .current savybės keitimas nesukelia komponento perrenderinimo.

useRef ir createRef: Detalus palyginimas

Dabar, kai išnagrinėjome useRef ir createRef atskirai, palyginkime juos vieną šalia kito, kad išryškintume pagrindinius jų skirtumus ir kada rinktis vieną ar kitą.

Savybė	useRef	createRef
Komponento tipas	Funkciniai komponentai	Klasių komponentai
Hook'as ar metodas	Hook'as	Metodas
Ref egzempliorius	Grąžina tą patį Ref objektą kiekvieno atvaizdavimo metu	Sukuriamas naujas Ref objektas kiekvienam komponento egzemplioriui
Panaudojimo atvejai	DOM elementų pasiekimas Reikšmių išsaugojimas tarp atvaizdavimų, nesukeliant perrenderinimų Ankstesnių prop reikšmių sekimas Kintamų reikšmių, kurios nesukelia perrenderinimų, saugojimas	DOM elementų pasiekimas Vaikinių komponentų metodų pasiekimas

Tinkamo Ref pasirinkimas: Sprendimų vadovas

Štai paprastas vadovas, padėsiantis jums pasirinkti tarp useRef ir createRef:

• Ar dirbate su funkciniu komponentu? Naudokite useRef.
• Ar dirbate su klasių komponentu? Naudokite createRef.
• Ar jums reikia išsaugoti reikšmę tarp atvaizdavimų, nesukeliant perrenderinimų? Naudokite useRef.
• Ar jums reikia sekti ankstesnę prop reikšmę? Naudokite useRef.

Daugiau nei DOM manipuliacija: Pažangūs Refs panaudojimo atvejai

Nors DOM elementų pasiekimas ir manipuliavimas yra pagrindinis Refs panaudojimo atvejis, jie siūlo galimybes, pranokstančias šią pagrindinę funkciją. Panagrinėkime keletą pažangių scenarijų, kuriuose Refs gali būti ypač naudingi.

1. Vaikinių komponentų metodų pasiekimas

Refs gali būti naudojami pasiekti vaikinio komponento metodus. Tai leidžia tėviniam komponentui tiesiogiai iškviesti veiksmus arba gauti duomenis iš savo vaikų. Šis metodas ypač naudingas, kai reikalinga smulkiagrūdė vaikinio komponento kontrolė.

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

  handleClick = () => {
    // Call a method on the child component
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Trigger Child Action
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Child component action triggered!');
  };

  render() {
    return 
This is a child component.
;
  }
}

Šiame pavyzdyje ParentComponent naudoja Ref, kad pasiektų ChildComponent ir iškviestų jo doSomething metodą.

2. Fokuso ir žymėjimo valdymas

Refs yra neįkainojami valdant fokusą ir žymėjimą įvesties laukuose ir kituose interaktyviuose elementuose. Tai yra labai svarbu kuriant prieinamas ir vartotojui draugiškas sąsajas.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Select the text in the input
    }
  }, []);

  return ;
}

Šis pavyzdys sufokusuoja įvestį ir pažymi jo tekstą, kai tik komponentas prisijungia.

3. Elementų animavimas

Refs gali būti naudojami kartu su animacijos bibliotekomis (pvz., GreenSock ar Framer Motion), siekiant tiesiogiai manipuliuoti DOM ir kurti sudėtingas animacijas. Tai leidžia smulkiagrūdžiai kontroliuoti animacijos sekas.

Pavyzdys naudojant gryną JavaScript paprastumui:

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

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

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Simple animation: move the box to the right
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 second
          iterations: Infinity, // Repeat forever
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Šis pavyzdys naudoja Web Animations API, kad animuotų paprastą dėžutę, judindamas ją pirmyn ir atgal horizontaliai.

Geriausios React Refs naudojimo praktikos globaliose programose

Kuriant React programas pasaulinei auditorijai, svarbu atsižvelgti į tai, kaip Refs sąveikauja su internacionalizacija (i18n) ir lokalizacija (l10n). Štai keletas geriausių praktikų:

1. Prieinamumas (A11y)

Užtikrinkite, kad jūsų Refs naudojimas neturėtų neigiamos įtakos prieinamumui. Pavyzdžiui, programuotai fokusuojant elementus, atsižvelkite į vartotojo fokuso eilę ir ar fokuso pakeitimas yra tinkamas ekrano skaitytuvų ir klaviatūros vartotojams.

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

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

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Only focus if the button is not already focused by the user
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Click Me;
}

2. Internacionalizuoti įvesties laukai

Dirbdami su įvesties laukais, atsižvelkite į skirtingus įvesties metodus ir simbolių rinkinius, naudojamus skirtingose kalbose. Užtikrinkite, kad jūsų Ref pagrįstos manipuliacijos (pvz., žymėjimas, žymeklio pozicija) veiktų teisingai su įvairiais įvesties tipais ir lokalėmis. Kruopščiai išbandykite savo komponentus su skirtingomis kalbomis ir įvesties metodais.

3. Iš dešinės į kairę (RTL) išdėstymai

Jei jūsų programa palaiko RTL kalbas (pvz., arabų, hebrajų), užtikrinkite, kad jūsų DOM manipuliacijos naudojant Refs atsižvelgtų į apverstą išdėstymą. Pavyzdžiui, animuojant elementus, apsvarstykite galimybę apversti animacijos kryptį RTL kalboms.

4. Našumo aspektai

Nors Refs suteikia galingą būdą sąveikauti su DOM, perteklinis jų naudojimas gali sukelti našumo problemų. Tiesioginis DOM manipuliavimas apeina React virtualų DOM ir sutaikymo procesą, potencialiai sukeldamas neatitikimus ir lėtesnius atnaujinimus. Naudokite Refs protingai ir tik tada, kai tai būtina.

Išvada

React Refs, ypač useRef ir createRef, yra esminiai įrankiai React programuotojams. Suprasti kiekvieno metodo niuansus ir kada juos efektyviai taikyti yra labai svarbu kuriant patikimas ir našias programas. createRef išlieka standartu valdant Refs klasių komponentuose, užtikrinant, kad kiekvienas egzempliorius turėtų savo unikalų Ref. useRef, su savo išliekančia prigimtimi tarp atvaizdavimų, idealiai tinka funkciniams komponentams, siūlydamas būdą valdyti DOM elementus ir išsaugoti reikšmes nesukeliant nereikalingų perrenderinimų. Protingai naudodami šiuos įrankius, galite pagerinti savo React programų funkcionalumą ir vartotojo patirtį, tenkindami pasaulinės auditorijos poreikius su prieinamomis ir našias sąsajomis.

React toliau tobulėjant, šių pagrindinių koncepcijų įvaldymas leis jums kurti novatoriškas ir vartotojui draugiškas žiniatinklio patirtis, kurios peržengia geografines ir kultūrines ribas. Nepamirškite teikti pirmenybės prieinamumui, internacionalizacijai ir našumui, kad pateiktumėte tikrai globalias programas.