React Refs: useRef vs. createRef selgitus

Reacti arenduse dünaamilises maailmas on komponentide oleku tõhus haldamine ja suhtlemine dokumendi objektimudeliga (DOM) ülioluline. React Refs pakub mehhanismi DOM-elementide või React komponentide otseks juurdepääsuks ja manipuleerimiseks. Kaks peamist meetodit Refide loomiseks on useRef ja createRef. Kuigi mõlemad teenivad Refide loomise eesmärki, erinevad need rakendamise ja kasutusjuhtude poolest. Käesoleva juhendi eesmärk on need kaks lähenemist selgitada, pakkudes selgust, millal ja kuidas neid oma Reacti projektides tõhusalt kasutada, eriti globaalse publiku jaoks arendades.

React Refs'i mõistmine

Ref (lühend sõnast reference ehk viide) on Reacti funktsioon, mis võimaldab teil otse juurde pääseda DOM-i sõlmele või React komponendile. See on eriti kasulik, kui peate:

• DOM-elementi otse manipuleerima, näiteks sisestusväljale fookuse andma.
• Juurdepääsema alamkomponendi meetoditele või omadustele.
• Haldama väärtusi, mis säilivad renderduste vahel, põhjustamata uusi renderdusi (sarnaselt klassikomponentide eksemplari muutujatega).

Kuigi React julgustab deklaratiivset lähenemist, kus kasutajaliidest hallatakse oleku ja propide kaudu, on olukordi, kus otsene manipuleerimine on vajalik. Refs pakuvad võimalust ühendada Reacti deklaratiivse olemuse ja imperatiivsete DOM-operatsioonide vaheline lõhe.

createRef: Klassikomponendi lähenemisviis

createRef on Reacti poolt pakutav meetod. Seda kasutatakse peamiselt klassikomponentides Refide loomiseks. Iga kord, kui klassikomponent instansseeritakse, loob createRef uue Ref objekti. See tagab, et igal komponendi eksemplaril on oma unikaalne Ref.

Süntaks ja kasutus

createRef kasutamiseks deklareerite esmalt Refi oma klassikomponendis, tavaliselt konstruktoris. Seejärel kinnitate Refi DOM-elemendi või komponendi külge, kasutades ref atribuuti.

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

  componentDidMount() {
    // Pääsete DOM-elemendile ligi pärast komponendi paigaldamist
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

Selles näites luuakse this.myRef kasutades React.createRef(). Seejärel määratakse see sisendielemendi ref atribuudile. Pärast komponendi paigaldamist (componentDidMountis) pääsete tegelikule DOM-i sõlmele ligi this.myRef.current kaudu ja teostate sellega toiminguid (käesoleval juhul sisendile fookuse andmine).

Näide: Sisestusväljale fookuse andmine

Vaatame stsenaariumi, kus soovite komponendi paigaldamisel sisestusväljale automaatselt fookuse anda. See on Refide tavaline kasutusjuht, eriti vormide või interaktiivsete elementide puhul.

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

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

  render() {
    return (
      

        
      
    );
  }
}

Selles näites antakse FocusInputi sisestusväljale fookus kohe pärast paigaldamist. See võib parandada kasutajakogemust, suunates kasutaja tähelepanu sisendielemendile niipea, kui komponent renderdatakse.

Olulised kaalutlused createRef kohta

• Ainult klassikomponendid: createRef on mõeldud kasutamiseks klassikomponentides. Kuigi see võib funktsionaalsetes komponentides tehniliselt töötada, ei ole see selleks ette nähtud ja võib põhjustada ootamatuid käitumisi.
• Uus Ref iga eksemplari jaoks: Iga klassikomponendi eksemplar saab oma createRef. See on oluline komponentide eksemplaride vahelise isolatsiooni säilitamiseks.

useRef: Funktsionaalne komponendi Hook

useRef on Hook, mis tutvustati React 16.8-s. See pakub funktsionaalsetes komponentides muudetavate Ref objektide loomise võimalust. Erinevalt createRefist tagastab useRef sama Ref objekti iga kord, kui komponent renderdatakse. See muudab selle ideaalseks väärtuste säilitamiseks renderduste vahel ilma uusi renderdusi esile kutsumata.

Süntaks ja kasutus

useRef kasutamine on lihtne. Te kutsute useRef Hooki, andes sellele algväärtuse. Hook tagastab objekti, millel on .current omadus, mida saate seejärel kasutada väärtusele ligipääsuks ja selle muutmiseks.

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

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

  useEffect(() => {
    // Pääsete DOM-elemendile ligi pärast komponendi paigaldamist
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

Selles näites loob useRef(null) Refi algväärtusega null. useEffect Hooki kasutatakse DOM-elemendile ligipääsuks pärast komponendi paigaldamist. myRef.current omadus hoiab viidet sisendielemendile, võimaldades teil sellele fookust anda.

Näide: Eelnevate propide väärtuste jälgimine

Üks võimas kasutusjuht useRef jaoks on propide eelnevate väärtuste jälgimine. Kuna Refide muudatused ei põhjusta uusi renderdusi, saate neid kasutada väärtuste salvestamiseks, mida soovite renderduste vahel säilitada, ilma et see mõjutaks kasutajaliidest.

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

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

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

  return (
    

      
Praegune väärtus: {value}
      
Eelmine väärtus: {previousValue.current}
    
  );
}

Selles näites salvestab previousValue.current value prop'i eelneva väärtuse. useEffect Hook värskendab Refi iga kord, kui value prop muutub. See võimaldab teil praegust ja eelmist väärtust võrrelda, mis võib olla kasulik muutuste tuvastamiseks või animatsioonide rakendamiseks.

Olulised kaalutlused useRef kohta

• Ainult funktsionaalsed komponendid: useRef on Hook ja seda saab kasutada ainult funktsionaalsetes komponentides või kohandatud Hookides.
• Säilib renderduste vahel: useRef Hook tagastab sama Ref objekti igal renderdusel. See on selle võime säilitada väärtusi ilma uusi renderdusi esile kutsumata võti.
• Muudetav .current omadus: Saate otse muuta Ref objekti .current omadust.
• Algväärtus: Saate useRefile anda algväärtuse. See väärtus määratakse .current omadusele komponendi esmakordsel renderdusel.
• Ei uusi renderdusi: Refi .current omaduse muutmine ei põhjusta komponendi uut renderdust.

useRef vs. createRef: üksikasjalik võrdlus

Nüüd, kui oleme mõlemad useRef ja createRef eraldi uurinud, võrdleme neid kõrvuti, et tuua esile nende peamised erinevused ja millal valida üks teise asemel.

Funktsioon	useRef	createRef
Komponendi tüüp	Funktsionaalsed komponendid	Klassikomponendid
Hook või meetod	Hook	Meetod
Ref eksemplar	Tagastab sama Ref objekti igal renderdusel	Loob uue Ref objekti iga komponendi eksemplari jaoks
Kasutusjuhtumid	DOM-elementidele ligipääs Väärtuste säilitamine renderduste vahel ilma uusi renderdusi esile kutsumata Eelnevate propide väärtuste jälgimine Muudetavate väärtuste salvestamine, mis ei põhjusta uusi renderdusi	DOM-elementidele ligipääs Alamkomponentide meetoditele ligipääs

Õige Refi valimine: otsustusjuhend

Siin on lihtne juhend, mis aitab teil valida useRef ja createRef vahel:

• Kas töötate funktsionaalse komponendiga? Kasutage useRef.
• Kas töötate klassikomponendiga? Kasutage createRef.
• Kas peate säilitama väärtust renderduste vahel ilma uusi renderdusi esile kutsumata? Kasutage useRef.
• Kas peate jälgima prop'i eelmist väärtust? Kasutage useRef.

DOM-i manipuleerimisest kaugemale: Refide täiustatud kasutusjuhtumid

Kuigi DOM-elementidele ligipääs ja nende manipuleerimine on Refide peamine kasutusjuht, pakuvad need võimalusi ka väljaspool seda põhifunktsionaalsust. Vaatame mõningaid täiustatud stsenaariume, kus Refs võib olla eriti kasulik.

1. Alamkomponentide meetoditele ligipääs

Refide abil saab alamkomponentides määratletud meetoditele ligi pääseda. See võimaldab ülemkomponendil otse oma alamkomponentide toiminguid käivitada või andmeid hankida. See lähenemisviis on eriti kasulik, kui vajate alamkomponentide täpsustatud kontrolli.

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

  handleClick = () => {
    // Kutsuge välja meetod alamkomponendil
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Käivita alamkomponendi tegevus
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Alamkomponendi tegevus käivitati!');
  };

  render() {
    return 
See on alamkomponent.
;
  }
}

Selles näites kasutab ParentComponent Refi, et pääseda ligi ChildComponentile ja kutsuda selle doSomething meetodit.

2. Fookuse ja valiku haldamine

Refid on hindamatud fookuse ja valiku haldamisel sisestusväljade ja muude interaktiivsete elementide sees. See on juurdepääsetavate ja kasutajasõbralike liideste loomise jaoks ülioluline.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Valige sisestusvälja tekst
    }
  }, []);

  return ;
}

See näide annab fookuse sisestusväljale ja valib selle teksti kohe pärast komponendi paigaldamist.

3. Elementide animeerimine

Refide abil saab koos animatsiooniteekidega (nagu GreenSock või Framer Motion) kasutada DOM-i otseks manipuleerimiseks ja keeruliste animatsioonide loomiseks. See võimaldab täpsustatud kontrolli animatsioonijadade üle.

Näide lihtsuse huvides kasutades puhast JavaScripti:

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

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

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Lihtne animatsioon: liigutage kasti paremale
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 sekund
          iterations: Infinity, // Korda igavesti
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

See näide kasutab Web Animations API-t lihtsa kasti animeerimiseks, liigutades seda horisontaalselt edasi-tagasi.

React Refide kasutamise parimad praktikad globaalsetes rakendustes

Kui arendate Reacti rakendusi globaalsele publikule, on oluline kaaluda, kuidas Refs interakteerub rahvusvahelise kasutuselevõtu (i18n) ja lokaliseerimisega (l10n). Siin on mõned parimad praktikad:

1. Juurdepääsetavus (A11y)

Veenduge, et teie Refide kasutamine ei mõjuta juurdepääsetavust negatiivselt. Näiteks elementidele programmiliselt fookuse andmisel kaaluge kasutaja fookuse järjekorda ja kas fookuse muudatus on sobiv ekraanilugejate ja klaviatuuri kasutajate jaoks.

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

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

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Anna fookus ainult siis, kui nupp ei ole juba kasutaja poolt fookustatud
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Kliki mulle;
}

2. Rahvusvaheliselt lokaliseeritud sisestusväljad

Sisestusväljadega töötamisel pidage meeles erinevaid sisestusmeetodeid ja tähemärke, mida kasutatakse erinevates keeltes. Veenduge, et teie Ref-põhised manipulatsioonid (nt valik, kursori asukoht) töötavad õigesti erinevate sisestustüüpide ja lokalite vahel. Testige oma komponente põhjalikult erinevate keelte ja sisestusmeetoditega.

3. Paremalt vasakule (RTL) paigutused

Kui teie rakendus toetab RTL keeli (nt araabia, heebrea), veenduge, et teie DOM-i manipuleerimised Refide abil arvestavad pööratud paigutusega. Näiteks elementide animeerimisel kaaluge animatsiooni suuna pööramist RTL keelte jaoks.

4. Toimivuse kaalutlused

Kuigi Refs pakub võimsat viisi DOM-iga interakteerumiseks, võib ülekasutamine põhjustada toimivusprobleeme. Otsene DOM-i manipuleerimine jätab Reacti virtuaalse DOM-i ja leppimisprotsessi vahele, mis võib põhjustada vastuolusid ja aeglasemaid värskendusi. Kasutage Refide targalt ja ainult siis, kui see on vajalik.

Kokkuvõte

React Refs, eriti useRef ja createRef, on Reacti arendajate jaoks olulised tööriistad. Mõistmine nende kahe lähenemisviisi nüanssidest ja sellest, millal neid tõhusalt rakendada, on oluline vastupidavate ja toimivate rakenduste loomisel. createRef jääb klassikomponentides Refide haldamise standardiks, tagades iga eksemplari unikaalse Refi. useRef, oma püsiva olemusega renderduste vahel, on ideaalne funktsionaalsetele komponentidele, pakkudes võimalust hallata DOM-elemente ja säilitada väärtusi ilma tarbetuid renderdusi esile kutsumata. Neid tööriistu targalt kasutades saate parandada oma Reacti rakenduste funktsionaalsust ja kasutajakogemust, pakkudes juurdepääsetavate ja toimivate liideste kaudu globaalset publikut.

Kuna React jätkuvalt areneb, tugevdavad need põhimõisted teid, et saaksite luua uuenduslikke ja kasutajasõbralikke veebikogemusi, mis ületavad geograafilisi ja kultuurilisi piire. Pidage meeles, et prioriteediks seada juurdepääsetavus, rahvusvahelistamine ja toimivus, et pakkuda tõeliselt globaalseid rakendusi.