Reactin ref-mallit: DOM-manipulointitekniikat dynaamisille käyttöliittymille

React, tehokas JavaScript-kirjasto käyttöliittymien rakentamiseen, kannustaa usein deklaratiiviseen lähestymistapaan käyttöliittymäkehityksessä. Joskus Document Object Modelin (DOM) suora manipulointi on kuitenkin välttämätöntä. Tässä kohtaa Reactin refit astuvat kuvaan. Refit tarjoavat tavan päästä käsiksi renderöintimetodissa luotuihin DOM-solmuihin tai React-elementteihin. Tämä kattava opas tutkii erilaisia Reactin ref-malleja ja -tekniikoita DOMin tehokkaaseen manipulointiin, fokuksen hallintaan, integrointiin kolmansien osapuolten kirjastojen kanssa ja käyttöliittymän suorituskyvyn optimointiin. Syvennymme käytännön esimerkkeihin ja parhaisiin käytäntöihin, jotka soveltuvat maailmanlaajuiselle React-kehittäjien yleisölle.

Reactin refien ymmärtäminen

Ytimeltään ref on tavallinen JavaScript-objekti, jolla on current-ominaisuus. Tämä ominaisuus on muuttuva, mikä mahdollistaa minkä tahansa arvon tallentamisen, mukaan lukien DOM-solmun tai React-komponentin instanssin. React tarjoaa kaksi ensisijaista tapaa luoda refejä: React.createRef() (luokkakomponentit) ja useRef()-hook (funktiokomponentit).

React.createRef() (luokkakomponentit)

React.createRef() luo ref-objektin, joka liitetään luokkakomponentin instanssin ominaisuuteen. Tämä ref säilyy koko komponentin elinkaaren ajan.

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

  componentDidMount() {
    // Käytä DOM-solmua komponentin liittämisen jälkeen
    console.log(this.myRef.current); // DOM-solmu tai null
  }

  render() {
    return 
Hello, world!
;
  }
}

            

              
                Copy
              
            
          

useRef() (funktiokomponentit)

useRef()-hook luo muuttuvan ref-objektin, jonka .current-ominaisuus alustetaan sille annetulla argumentilla (initialValue). Palautettu ref-objekti säilyy koko komponentin elinkaaren ajan.

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

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

  useEffect(() => {
    // Käytä DOM-solmua komponentin liittämisen jälkeen
    console.log(myRef.current); // DOM-solmu tai null
  }, []); // Tyhjä riippuvuustaulukko varmistaa, että tämä suoritetaan vain kerran liittämisen yhteydessä

  return 
Hello, world!
;
}

            

              
                Copy
              
            
          

Yleisimmät käyttötapaukset Reactin refeille

Refit ovat uskomattoman monipuolisia ja niitä voidaan soveltaa monenlaisissa skenaarioissa React-kehityksessä.

1. DOM-solmujen käyttö ja manipulointi

Yleisin käyttötapaus refeille on DOM-solmujen suora käyttö ja manipulointi. Tämä on hyödyllistä tehtävissä, kuten syöttökentän fokusoinnissa, elementtiin vierittämisessä tai sen mittojen mittaamisessa.

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

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

  useEffect(() => {
    // Fokusoi syöttökenttä komponentin liittämisen jälkeen
    if (inputRef.current) {
      inputRef.current.focus();
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Esimerkki: Kuvittele rakentavasi monivaiheista lomaketta. Kun käyttäjä täyttää kentän, saatat haluta automaattisesti fokusoida seuraavaan syöttökenttään. Refit tekevät tästä saumatonta.

2. Fokuksen, tekstin valinnan ja median toiston hallinta

Refit ovat välttämättömiä tarkkaan fokuksen hallintaan, tekstin valintaan elementtien sisällä ja median toiston (esim. video tai ääni) hallintaan.

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

function VideoPlayer() {
  const videoRef = useRef(null);

  const playVideo = () => {
    if (videoRef.current) {
      videoRef.current.play();
    }
  };

  const pauseVideo = () => {
    if (videoRef.current) {
      videoRef.current.pause();
    }
  };

  return (
    

      
      Play
      Pause
    
  );
}

            

              
                Copy
              
            
          

Saavutettavuushuomio: Kun käytät refejä fokuksen hallintaan, varmista asianmukainen fokuksen hallinta ylläpitääksesi saavutettavuutta käyttäjille, jotka luottavat näppäimistönavigointiin tai aputeknologioihin. Esimerkiksi modaali-ikkunan avautumisen jälkeen aseta fokus välittömästi ensimmäiseen fokusoitavaan elementtiin modaalin sisällä.

3. Integrointi kolmansien osapuolten kirjastojen kanssa

Monet kolmansien osapuolten JavaScript-kirjastot manipuloivat DOMia suoraan. Refit tarjoavat sillan Reactin deklaratiivisen mallin ja näiden imperatiivisten kirjastojen välillä.

            
import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto'; // Esimerkki: Chart.js:n käyttö

function ChartComponent() {
  const chartRef = useRef(null);

  useEffect(() => {
    if (chartRef.current) {
      const ctx = chartRef.current.getContext('2d');
      new Chart(ctx, {
        type: 'bar',
        data: {
          labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
          datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1
          }]
        },
        options: {
          scales: {
            y: {
              beginAtZero: true
            }
          }
        }
      });
    }
  }, []);

  return ;
}

            

              
                Copy
              
            
          

Kansainvälistämishuomio: Kun integroit kolmansien osapuolten kirjastoja, jotka käsittelevät päivämääriä, numeroita tai valuuttoja, varmista, että ne on määritetty oikein tukemaan käyttäjän lokaalia. Monet kirjastot tarjoavat vaihtoehtoja halutun lokaalin määrittämiseen. Esimerkiksi päivämäärän muotoilukirjastot tulisi alustaa käyttäjän kielellä ja alueella, jotta päivämäärät näytetään oikeassa muodossa (esim. KK/PP/VVVV vs. PP.KK.VVVV).

4. Imperatiivisten animaatioiden käynnistäminen

Vaikka React-kirjastot, kuten Framer Motion ja React Transition Group, ovat suositeltavia useimpiin animaatiotarpeisiin, refejä voidaan käyttää imperatiivisiin animaatioihin, kun tarvitaan hienojakoisempaa hallintaa.

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

function FadeIn() {
  const elementRef = useRef(null);

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      element.style.opacity = 0; // Aluksi piilotettu
      let opacity = 0;
      const intervalId = setInterval(() => {
        opacity += 0.05;
        element.style.opacity = opacity;
        if (opacity >= 1) {
          clearInterval(intervalId);
        }
      }, 20); // Säädä aikaväliä nopeuden muuttamiseksi

      return () => clearInterval(intervalId); // Puhdistus komponentin poistamisen yhteydessä
    }
  }, []);

  return 
Fade In!
;
}

            

              
                Copy
              
            
          

5. Elementin mittojen mittaaminen

Refien avulla voit mitata tarkasti elementtien mitat (leveys, korkeus) DOMissa. Tämä on hyödyllistä responsiivisissa asetteluissa, dynaamisessa sijoittelussa ja mukautettujen visuaalisten tehosteiden luomisessa.

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

function MeasureElement() {
  const elementRef = useRef(null);
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    const element = elementRef.current;
    if (element) {
      const width = element.offsetWidth;
      const height = element.offsetHeight;
      setDimensions({ width, height });
    }
  }, []);

  return (
    

      
Measure This Element
      
Width: {dimensions.width}px
      
Height: {dimensions.height}px
    
  );
}

            

              
                Copy
              
            
          

Edistyneet ref-mallit

createRef:n ja useRef:n peruskäytön lisäksi on olemassa useita edistyneitä malleja, jotka hyödyntävät refejä monimutkaisemmissa skenaarioissa.

1. Takaisinkutsurefit (Callback Refs)

Takaisinkutsurefit tarjoavat joustavamman tavan päästä käsiksi DOM-solmuihin. Sen sijaan, että liittäisit ref-objektin, liität funktion ref-attribuuttiin. React kutsuu tätä funktiota DOM-solmun kanssa, kun komponentti liitetään, ja null-arvolla, kun se poistetaan.

            
import React, { useState } from 'react';

function CallbackRefExample() {
  const [element, setElement] = useState(null);

  const setRef = (node) => {
    setElement(node);
  };

  return (
    

      
This element's ref is being managed by a callback.
      {element && 
Element: {element.tagName}
}
    
  );
}

            

              
                Copy
              
            
          

Takaisinkutsurefit ovat erityisen hyödyllisiä, kun sinun on suoritettava lisätoimintoja, kun ref asetetaan tai tyhjennetään.

2. Refien välittäminen (forwardRef)

React.forwardRef on tekniikka, joka mahdollistaa komponentin vastaanottaa ref-arvon vanhemmaltaan. Tämä on hyödyllistä, kun haluat paljastaa DOM-solmun lapsikomponentista sen vanhemmalle.

            
import React, { forwardRef } from 'react';

const MyInput = forwardRef((props, ref) => {
  return ;
});

function ParentComponent() {
  const inputRef = React.useRef(null);

  const focusInput = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };

  return (
    

      
      Focus Input
    
  );
}

            

              
                Copy
              
            
          

Tässä esimerkissä MyInput välittää refin alla olevalle input-elementille, mikä antaa ParentComponentille mahdollisuuden käyttää ja manipuloida input-kenttää suoraan.

3. Komponenttimetodien paljastaminen refeillä

Refejä voidaan käyttää myös paljastamaan metodeja lapsikomponentilta sen vanhemmalle. Tämä on hyödyllistä luotaessa uudelleenkäytettäviä komponentteja, joilla on imperatiiviset API-rajapinnat.

            
import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
    getValue: () => {
      return inputRef.current.value;
    }
  }));

  return ;
});

function ParentComponent() {
  const fancyInputRef = useRef(null);

  const handleFocus = () => {
    fancyInputRef.current.focus();
  };

  const handleGetValue = () => {
    alert(fancyInputRef.current.getValue());
  };

  return (
    

      
      Focus Input
      Get Value
    
  );
}

            

              
                Copy
              
            
          

useImperativeHandle-hookin avulla voit mukauttaa instanssin arvoa, joka paljastetaan vanhemmille komponenteille, kun käytetään forwardRef-funktiota. Tämä mahdollistaa hallitun pääsyn lapsen metodeihin.

Parhaat käytännöt Reactin refien käyttöön

Vaikka refit tarjoavat tehokkaita ominaisuuksia, on tärkeää käyttää niitä harkitusti ja noudattaa parhaita käytäntöjä.

• Vältä liiallista DOM-manipulointia: Reactin deklaratiivinen lähestymistapa on yleensä tehokkaampi. Käytä refejä vain tarvittaessa tehtäviin, joita ei voida helposti saavuttaa Reactin tilanhallinnan kautta.
• Käytä refejä säästeliäästi: Refien liiallinen käyttö voi johtaa koodiin, jota on vaikeampi ylläpitää ja ymmärtää.
• Ota huomioon komponentin elinkaari: Varmista, että käytät refin .current-ominaisuutta vasta komponentin liittämisen jälkeen (esim. componentDidMount- tai useEffect-metodissa). Sen käyttäminen aiemmin voi johtaa null-arvoihin.
• Puhdista refit: Kun käytät takaisinkutsurefejä, varmista, että asetat refin arvon null-arvoon, kun komponentti poistetaan, muistivuotojen estämiseksi.
• Harkitse vaihtoehtoja: Ennen kuin turvaudut refeihin, selvitä, voiko Reactin tilanhallinta tai kontrolloidut komponentit saavuttaa halutun toiminnallisuuden.
• Saavutettavuus: Kun manipuloit fokusta, varmista, että sovellus pysyy saavutettavana vammaisille käyttäjille.

Maailmanlaajuiset näkökohdat refien käytössä

Kun rakennat sovelluksia maailmanlaajuiselle yleisölle, ota huomioon seuraavat näkökohdat refejä käytettäessä:

• Oikealta vasemmalle (RTL) -asettelut: Kun manipuloit asetteluun liittyviä DOM-elementtejä (esim. vieritys), varmista, että koodisi käsittelee oikein RTL-asetteluja kielille, kuten arabia ja heprea. Käytä ominaisuuksia, kuten scrollLeft ja scrollWidth, huolellisesti ja mahdollisesti normalisoi ne asettelun suunnan perusteella.
• Syöttötapaeditorit (IME): Ole tietoinen siitä, että joillakin alueilla käyttäjät voivat käyttää IME-editoreita tekstin syöttämiseen. Kun hallitset fokusta tai tekstin valintaa, varmista, että koodisi toimii oikein IME-editoreiden kanssa eikä häiritse käyttäjän syötettä.
• Fonttien latautuminen: Jos mittaat elementin mittoja ennen kuin fontit ovat täysin latautuneet, alkuperäiset mitat voivat olla virheellisiä. Käytä tekniikoita varmistaaksesi, että fontit ovat latautuneet, ennen kuin luotat näihin mittoihin (esim. käyttämällä document.fonts.ready). Eri kirjoitusjärjestelmillä (esim. latinalainen, kyrillinen, CJK) on hyvin erilaiset fonttikoot ja metriikat.
• Käyttäjäasetukset: Ota huomioon käyttäjien mieltymykset animaatioiden ja siirtymien suhteen. Jotkut käyttäjät saattavat suosia vähennettyä liikettä. Kunnioita näitä mieltymyksiä, kun käytät refejä animaatioiden käynnistämiseen. Käytä `prefers-reduced-motion` CSS-mediakyselyä käyttäjäasetusten tunnistamiseen.

Yhteenveto

Reactin refit ovat tehokas työkalu DOMin suoraan manipulointiin, fokuksen hallintaan, integrointiin kolmansien osapuolten kirjastojen kanssa ja käyttöliittymän suorituskyvyn optimointiin. Ymmärtämällä eri ref-mallit ja noudattamalla parhaita käytäntöjä voit hyödyntää refejä tehokkaasti säilyttäen samalla Reactin deklaratiivisen lähestymistavan edut. Muista ottaa huomioon maailmanlaajuiset saavutettavuus- ja kansainvälistämisnäkökohdat luodaksesi osallistavia ja käyttäjäystävällisiä sovelluksia monimuotoiselle yleisölle. Huolellisella suunnittelulla ja toteutuksella Reactin refit voivat merkittävästi parantaa React-sovellustesi ominaisuuksia ja responsiivisuutta.