React Refit: useRef vs. createRef -menetelmien selventäminen

React-kehityksen dynaamisessa maailmassa on olennaista hallita tehokkaasti komponenttien tilaa ja olla vuorovaikutuksessa Document Object Modelin (DOM) kanssa. React Refit tarjoavat mekanismin DOM-elementtien tai React-komponenttien suoraan käyttämiseen ja manipulointiin. Kaksi ensisijaista menetelmää Refien luomiseen ovat useRef ja createRef. Vaikka molemmat palvelevat Refien luomisen tarkoitusta, ne eroavat toisistaan toteutuksessa ja käyttötapauksissa. Tämän oppaan tarkoituksena on selventää näitä kahta lähestymistapaa ja tarjota selkeyttä siihen, milloin ja miten kumpaakin kannattaa hyödyntää React-projekteissasi, erityisesti kehitettäessä globaalille yleisölle.

React Refien ymmärtäminen

Ref (lyhenne sanasta reference) on React-ominaisuus, jonka avulla voit käyttää DOM-solmua tai React-komponenttia suoraan. Tämä on erityisen hyödyllistä, kun sinun on tarpeen:

• Manipuloida suoraan DOM-elementtiä, kuten kohdistaa syöttökenttään.
• Käyttää lapsikomponentin metodeja tai ominaisuuksia.
• Hallita arvoja, jotka säilyvät renderöintien välillä aiheuttamatta uudelleenrenderöintejä (samanlainen kuin luokkakomponenttien instanssimuuttujat).

Vaikka React kannustaa deklaratiiviseen lähestymistapaan, jossa käyttöliittymää hallitaan tilan ja rekvisiitan kautta, on tilanteita, joissa suora manipulointi on välttämätöntä. Refit tarjoavat tavan kuroa umpeen Reactin deklaratiivisen luonteen ja imperatiivisten DOM-operaatioiden välistä kuilua.

createRef: Luokkakomponenttilähestymistapa

createRef on Reactin tarjoama metodi. Sitä käytetään ensisijaisesti luokkakomponenteissa Refien luomiseen. Joka kerta, kun luokkakomponentti ilmentyy, createRef luo uuden Ref-objektin. Tämä varmistaa, että jokaisella komponentin esiintymällä on oma yksilöllinen Ref.

Syntaksi ja käyttö

Käyttääksesi createRef-menetelmää, sinun on ensin määritettävä Ref luokkakomponentissasi, tyypillisesti konstruktorissa. Sitten liität Refin DOM-elementtiin tai komponenttiin käyttämällä ref-attribuuttia.

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

  componentDidMount() {
    // Käytä DOM-elementtiä komponentin asennuksen jälkeen
    this.myRef.current.focus();
  }

  render() {
    return ;
  }
}

Tässä esimerkissä this.myRef luodaan käyttämällä React.createRef()-menetelmää. Se määritetään sitten syöttöelementin ref-attribuutille. Komponentin asennuksen jälkeen (componentDidMount-funktiossa) voit käyttää varsinaista DOM-solmua käyttämällä this.myRef.current-ominaisuutta ja suorittaa sille operaatioita (tässä tapauksessa kohdistamalla syöttö).

Esimerkki: Syöttökentän kohdistaminen

Tarkastellaan tilannetta, jossa haluat kohdistaa syöttökenttään automaattisesti, kun komponentti asennetaan. Tämä on yleinen käyttötapaus Refeille, erityisesti lomakkeissa tai interaktiivisissa elementeissä.

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

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

  render() {
    return (
      

        
      
    );
  }
}

Tässä esimerkissä FocusInput kohdistaa syöttökenttään heti asennuksen jälkeen. Tämä voi parantaa käyttökokemusta ohjaamalla käyttäjän huomion syöttöelementtiin heti, kun komponentti on renderöity.

Tärkeitä huomioitavia asioita createRef-menetelmän kanssa

• Vain luokkakomponentit: createRef on suunniteltu käytettäväksi luokkakomponenteissa. Vaikka se teknisesti toimisi funktionaalisissa komponenteissa, se ei ole tarkoitettu käyttö ja voi johtaa odottamattomaan käyttäytymiseen.
• Uusi Ref jokaisessa esiintymässä: Jokainen luokkakomponentin esiintymä saa oman createRef-menetelmänsä. Tämä on tärkeää komponentin esiintymien välisen eristyksen ylläpitämiseksi.

useRef: Funktionaalinen komponenttikoukku

useRef on koukku, joka esiteltiin React 16.8:ssa. Se tarjoaa tavan luoda muuttuvia Ref-objekteja funktionaalisissa komponenteissa. Toisin kuin createRef, useRef palauttaa saman Ref-objektin joka kerta, kun komponentti renderöidään. Tämä tekee siitä ihanteellisen arvojen säilyttämiseen renderöintien välillä aiheuttamatta uudelleenrenderöintejä.

Syntaksi ja käyttö

useRef-menetelmän käyttäminen on yksinkertaista. Kutsu useRef-koukkua ja välitä sille alkuarvo. Koukku palauttaa objektin, jossa on .current-ominaisuus, jota voit sitten käyttää arvon käyttämiseen ja muokkaamiseen.

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

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

  useEffect(() => {
    // Käytä DOM-elementtiä komponentin asennuksen jälkeen
    if (myRef.current) {
      myRef.current.focus();
    }
  }, []);

  return ;
}

Tässä esimerkissä useRef(null) luo Refin, jonka alkuarvo on null. useEffect-koukkua käytetään DOM-elementin käyttämiseen komponentin asennuksen jälkeen. myRef.current-ominaisuus sisältää viittauksen syöttöelementtiin, jonka avulla voit kohdistaa sen.

Esimerkki: Edellisten rekvisiitta-arvojen seuraaminen

Yksi tehokas käyttötapaus useRef-menetelmälle on rekvisiitan edellisen arvon seuraaminen. Koska Refien muutokset eivät käynnistä uudelleenrenderöintejä, voit käyttää niitä arvojen tallentamiseen, jotka haluat säilyttää renderöintien välillä vaikuttamatta käyttöliittymään.

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

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

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

  return (
    

      
Nykyinen arvo: {value}
      
Edellinen arvo: {previousValue.current}
    
  );
}

Tässä esimerkissä previousValue.current tallentaa value-rekvisiitan edellisen arvon. useEffect-koukku päivittää Refin aina, kun value-rekvisiitta muuttuu. Tämän avulla voit verrata nykyisiä ja edellisiä arvoja, mikä voi olla hyödyllistä muutosten havaitsemisessa tai animaatioiden toteuttamisessa.

Tärkeitä huomioitavia asioita useRef-menetelmän kanssa

• Vain funktionaaliset komponentit: useRef on koukku, jota voidaan käyttää vain funktionaalisissa komponenteissa tai mukautetuissa koukuissa.
• Säilyy renderöintien välillä: useRef-koukku palauttaa saman Ref-objektin jokaisella renderöinnillä. Tämä on avain sen kyvylle säilyttää arvoja käynnistämättä uudelleenrenderöintejä.
• Muuttuva .current-ominaisuus: Voit muokata suoraan Ref-objektin .current-ominaisuutta.
• Alkuarvo: Voit antaa alkuarvon useRef-menetelmälle. Tämä arvo määritetään .current-ominaisuudelle, kun komponentti renderöidään ensimmäisen kerran.
• Ei uudelleenrenderöintejä: Refin .current-ominaisuuden muuttaminen ei aiheuta komponentin uudelleenrenderöintiä.

useRef vs. createRef: Yksityiskohtainen vertailu

Nyt kun olemme tutkineet sekä useRef- että createRef-menetelmiä erikseen, verrataan niitä rinnakkain korostaaksemme niiden tärkeimmät erot ja sen, milloin valita toinen toisen sijaan.

Ominaisuus	useRef	createRef
Komponenttityyppi	Funktionaaliset komponentit	Luokkakomponentit
Koukku vai metodi	Koukku	Metodi
Ref-esiintymä	Palauttaa saman Ref-objektin jokaisella renderöinnillä	Luo uuden Ref-objektin jokaisella komponentin esiintymällä
Käyttötapaukset	DOM-elementtien käyttäminen Arvojen säilyttäminen renderöintien välillä käynnistämättä uudelleenrenderöintejä Edellisten rekvisiitta-arvojen seuraaminen Muuttuvien arvojen tallentaminen, jotka eivät aiheuta uudelleenrenderöintejä	DOM-elementtien käyttäminen Lapsikomponenttimetodien käyttäminen

Oikean Refin valitseminen: Päätösopas

Tässä on yksinkertainen opas, joka auttaa sinua valitsemaan useRef- ja createRef-menetelmien välillä:

• Työskenteletkö funktionaalisen komponentin kanssa? Käytä useRef-menetelmää.
• Työskenteletkö luokkakomponentin kanssa? Käytä createRef-menetelmää.
• Tarvitseeko sinun säilyttää arvo renderöintien välillä käynnistämättä uudelleenrenderöintejä? Käytä useRef-menetelmää.
• Tarvitseeko sinun seurata rekvisiitan edellistä arvoa? Käytä useRef-menetelmää.

DOM-manipuloinnin tuolla puolen: Refien edistyneet käyttötapaukset

Vaikka DOM-elementtien käyttäminen ja manipulointi on Refien ensisijainen käyttötapaus, ne tarjoavat mahdollisuuksia tämän ydinominaisuuden ulkopuolella. Tutustutaan joihinkin edistyneisiin skenaarioihin, joissa Refit voivat olla erityisen hyödyllisiä.

1. Lapsikomponenttimetodien käyttäminen

Refien avulla voidaan käyttää lapsikomponenteissa määritettyjä metodeja. Tämän avulla yläkomponentti voi käynnistää toimintoja tai hakea tietoja suoraan lapsiltaan. Tämä lähestymistapa on erityisen hyödyllinen, kun tarvitset tarkkaa hallintaa lapsikomponenteissa.

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

  handleClick = () => {
    // Kutsu lapsikomponentin metodia
    this.childRef.current.doSomething();
  };

  render() {
    return (
      

        
        Käynnistä lapsitoiminto
      
    );
  }
}

class ChildComponent extends React.Component {
  doSomething = () => {
    console.log('Lapsikomponentin toiminto käynnistetty!');
  };

  render() {
    return 
Tämä on lapsikomponentti.
;
  }
}

Tässä esimerkissä ParentComponent käyttää Refiä ChildComponent-komponentin käyttämiseen ja sen doSomething-metodin kutsumiseen.

2. Kohdistuksen ja valinnan hallinta

Refit ovat korvaamattomia kohdistuksen ja valinnan hallinnassa syöttökentissä ja muissa interaktiivisissa elementeissä. Tämä on ratkaisevan tärkeää esteettömien ja käyttäjäystävällisten käyttöliittymien luomisessa.

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

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

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      inputRef.current.select(); // Valitse teksti syötteessä
    }
  }, []);

  return ;
}

Tämä esimerkki kohdistaa syötteen ja valitsee sen tekstin heti, kun komponentti asennetaan.

3. Elementtien animointi

Refejä voidaan käyttää yhdessä animaatiokirjastojen (kuten GreenSock tai Framer Motion) kanssa DOM:n suoraan manipulointiin ja monimutkaisten animaatioiden luomiseen. Tämä mahdollistaa animaatiosarjojen tarkan hallinnan.

Esimerkki käyttämällä puhdasta JavaScriptiä yksinkertaisuuden vuoksi:

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

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

  useEffect(() => {
    const box = boxRef.current;
    if (box) {
      // Yksinkertainen animaatio: siirrä ruutu oikealle
      box.animate(
        [
          { transform: 'translateX(0)' },
          { transform: 'translateX(100px)' },
        ],
        {
          duration: 1000, // 1 sekunti
          iterations: Infinity, // Toista ikuisesti
          direction: 'alternate',
        }
      );
    }
  }, []);

  return 
;
}

Tämä esimerkki käyttää Web Animations API -rajapintaa yksinkertaisen ruudun animointiin, siirtäen sitä edestakaisin vaakasuunnassa.

Parhaat käytännöt React Refien käyttämiseen globaaleissa sovelluksissa

Kehitettäessä React-sovelluksia globaalille yleisölle on tärkeää ottaa huomioon, miten Refit ovat vuorovaikutuksessa kansainvälistymisen (i18n) ja lokalisoinnin (l10n) kanssa. Tässä on joitain parhaita käytäntöjä:

1. Saavutettavuus (A11y)

Varmista, että Refien käyttö ei vaikuta kielteisesti saavutettavuuteen. Kun esimerkiksi kohdistat elementtejä ohjelmallisesti, ota huomioon käyttäjän kohdistusjärjestys ja onko kohdistuksen muutos sopiva ruudunlukijoille ja näppäimistön käyttäjille.

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

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

  useEffect(() => {
    const button = buttonRef.current;
    if (button) {
      // Kohdista vain, jos käyttäjä ei ole jo kohdistanut painiketta
      if (document.activeElement !== button) {
        button.focus();
      }
    }
  }, []);

  return Napsauta minua;
}

2. Kansainvälistetyt syöttökentät

Kun työskentelet syöttökenttien kanssa, ole tietoinen eri kielissä käytetyistä erilaisista syöttötavoista ja merkkijoukoista. Varmista, että Ref-pohjaiset manipulointisi (esim. valinta, kohdistimen sijainti) toimivat oikein eri syöttötyypeissä ja -alueissa. Testaa komponenttisi perusteellisesti eri kielillä ja syöttötavoilla.

3. Oikealta vasemmalle (RTL) asettelut

Jos sovelluksesi tukee RTL-kieliä (esim. arabia, heprea), varmista, että Refien avulla suorittamasi DOM-manipuloinnit ottavat huomioon käännetyn asettelun. Kun esimerkiksi animoit elementtejä, harkitse animaation suunnan kääntämistä RTL-kielille.

4. Suorituskykyyn liittyvät huomiot

Vaikka Refit tarjoavat tehokkaan tavan olla vuorovaikutuksessa DOM:n kanssa, niiden liiallinen käyttö voi johtaa suorituskykyongelmiin. Suora DOM-manipulointi ohittaa Reactin virtuaalisen DOM:n ja sovittamisprosessin, mikä voi mahdollisesti johtaa epäjohdonmukaisuuksiin ja hitaampiin päivityksiin. Käytä Refejä harkiten ja vain tarvittaessa.

Johtopäätös

React Refit, erityisesti useRef ja createRef, ovat välttämättömiä työkaluja React-kehittäjille. Kummankin lähestymistavan vivahteiden ymmärtäminen ja niiden tehokas soveltaminen on ratkaisevan tärkeää vankkojen ja suorituskykyisten sovellusten rakentamisessa. createRef on edelleen standardi Refien hallintaan luokkakomponenteissa varmistaen, että jokaisella esiintymällä on oma yksilöllinen Ref. useRef, jonka jatkuva luonne renderöintien välillä, on ihanteellinen funktionaalisille komponenteille, tarjoten tavan hallita DOM-elementtejä ja säilyttää arvoja käynnistämättä tarpeettomia uudelleenrenderöintejä. Hyödyntämällä näitä työkaluja viisaasti voit parantaa React-sovellustesi toiminnallisuutta ja käyttökokemusta palvellen globaalia yleisöä esteettömillä ja suorituskykyisillä käyttöliittymillä.

Reactin kehittyessä edelleen näiden peruskäsitteiden hallitseminen antaa sinulle mahdollisuuden luoda innovatiivisia ja käyttäjäystävällisiä verkkokokemuksia, jotka ylittävät maantieteelliset ja kulttuuriset rajat. Muista priorisoida saavutettavuus, kansainvälistyminen ja suorituskyky, jotta voit toimittaa todella globaaleja sovelluksia.