React Native Academy · leksjon

useRef for DOM-noder og mutable verdier

Bruk useRef til å holde en referanse til en TextInput og gi den fokus programmatisk, og lagre en muterbar verdi som varer mellom gjengivelser uten å utløse nye gjengivelser.

Leksjon 1 av 413 trinn

useRef for DOM-noder og mutable verdier er en gratis leksjon i React Native Academy på CoddyKit. Dette er leksjon 1 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Native Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva er useRef

useRef er en React-hook som returnerer et muterbart ref-objekt der egenskapen .current bevares mellom gjengivelser. I motsetning til tilstandsvariabler utløser en oppdatering av ref.current ikke en ny gjengivelse. Derfor egner useRef seg godt til å lagre verdier som endres ofte, men som ikke skal føre til at komponenten oppdateres.

import { useRef } from 'react';

function MyComponent() {
  const myRef = useRef(null);
  // myRef.current starts as null
  // myRef.current persists across re-renders without triggering them
}

Koble en ref til en innebygd komponent

Send en ref til en innebygd komponent via ref-propen. React Native fyller deretter ref.current med instansen av den underliggende innebygde komponenten. Dette gir Dem tilgang til metoder som focus(), blur() og measure(), som er definert på den innebygde komponenten.

import { TextInput, Button, View } from 'react-native';
import { useRef } from 'react';

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

  return (
    <View>
      <TextInput ref={inputRef} placeholder='Search...' />
      <Button
        title='Focus Input'
        onPress={() => inputRef.current?.focus()}
      />
    </View>
  );
}

Fokusere en TextInput programmatisk

Et vanlig bruksområde er å fokusere det neste inndatafeltet automatisk når brukeren trykker på Enter på tastaturet. Koble ref-er til hver TextInput, og kall secondInputRef.current.focus() i onSubmitEditing-behandleren til det første feltet. Dette gir en smidig tastaturflyt i mobilskjemaer.

function LoginForm() {
  const emailRef = useRef(null);
  const passwordRef = useRef(null);

  return (
    <View>
      <TextInput
        ref={emailRef}
        placeholder='Email'
        returnKeyType='next'
        onSubmitEditing={() => passwordRef.current?.focus()}
      />
      <TextInput
        ref={passwordRef}
        placeholder='Password'
        returnKeyType='done'
        secureTextEntry
      />
    </View>
  );
}

Bruke useRef for mutable verdier

Det andre hovedbruksområdet for useRef er å lagre mutable verdier som ikke skal utløse nye gjengivelser. Lagre en timer-ID, et håndtak for en animasjonsramme, en tidligere prop-verdi eller en annen verdi som endres ofte. Det å lese eller skrive ref.current skjer synkront og har ingen gjengivelseskostnad.

function Timer() {
  const intervalRef = useRef(null);

  const start = () => {
    intervalRef.current = setInterval(() => {
      console.log('tick');
    }, 1000);
  };

  const stop = () => {
    clearInterval(intervalRef.current);
  };

  return <Button title='Start' onPress={start} />;
}

Lagre tidligere tilstandsverdier

Et nyttig mønster er å lagre den forrige verdien til en prop eller tilstandsvariabel ved hjelp av en ref. I en useEffect som kjøres etter hver gjengivelse kopierer De den aktuelle verdien til ref-en. Under neste gjengivelse inneholder prevRef.current verdien fra den forrige gjengivelsessyklusen, slik at De kan sammenligne gamle og nye verdier.

function Counter({ count }) {
  const prevCountRef = useRef(null);

  useEffect(() => {
    prevCountRef.current = count;
  });

  const prevCount = prevCountRef.current;

  return (
    <Text>
      Now: {count} — Before: {prevCount}
    </Text>
  );
}

Unngå foreldede closures med ref-er

Hendelsesbehandlere og callback-funksjoner som settes opp én gang, for eksempel i en timer eller hendelseslytter, kan fange en foreldet versjon av tilstanden. Lagre den nyeste verdien i en ref, og les fra ref-en inne i callback-funksjonen for alltid å få tilgang til den nyeste verdien, selv om callback-funksjonen ble opprettet for mange gjengivelser siden.

function MessageHandler({ onMessage }) {
  const onMessageRef = useRef(onMessage);

  useEffect(() => {
    onMessageRef.current = onMessage; // always up to date
  }, [onMessage]);

  useEffect(() => {
    const subscription = subscribe((msg) => {
      onMessageRef.current(msg); // uses latest callback
    });
    return () => subscription.unsubscribe();
  }, []); // only runs once
}

Forskjellen mellom useRef og useState

Den viktigste forskjellen er at useState utløser en ny gjengivelse når verdien oppdateres, mens useRef ikke gjør det. Bruk useState når verdien må være synlig i brukergrensesnittet. Bruk useRef når verdien brukes til logikk eller sideeffekter, men endringen ikke skal føre til at komponenten tegnes på nytt. Hvis De velger feil, kan resultatet bli enten manglende oppdateringer i brukergrensesnittet eller unødvendige nye gjengivelser.

// Triggers re-render — shows updated value on screen
const [count, setCount] = useState(0);

// No re-render — silent counter for internal use only
const renderCount = useRef(0);
renderCount.current += 1;

useRef med FlatList

Hvis De knytter en ref til en FlatList, får De tilgang til imperative metoder som scrollToIndex, scrollToOffset og scrollToEnd. Dette brukes til knapper som går tilbake til toppen, navigering med alfabetisk indeks eller automatisk rulling til et nylig lagt til element nederst i listen.

function MessageList({ messages }) {
  const listRef = useRef(null);

  useEffect(() => {
    // Scroll to bottom when new message arrives
    listRef.current?.scrollToEnd({ animated: true });
  }, [messages.length]);

  return (
    <FlatList
      ref={listRef}
      data={messages}
      renderItem={({ item }) => <Text>{item.text}</Text>}
      keyExtractor={(item) => item.id}
    />
  );
}

Måle oppsettet til en komponent

Kall ref.current.measure(callback) for å lese posisjonen og størrelsen til en komponent i forhold til vinduet. Tilbakekallingen mottar x, y, width, height, pageX og pageY. Dette er nyttig når De skal plassere verktøytips, popovere eller egendefinerte rullegardinmenyer i forhold til komponenten som utløste dem.

const buttonRef = useRef(null);

const showTooltip = () => {
  buttonRef.current?.measure((x, y, width, height, pageX, pageY) => {
    setTooltipPosition({ top: pageY + height, left: pageX });
    setTooltipVisible(true);
  });
};

<TouchableOpacity ref={buttonRef} onPress={showTooltip}>

Videreformidle ref-er til egendefinerte komponenter

Hvis De vil knytte en ref til en egendefinert komponent (ikke en innebygd komponent som TextInput), pakker De den inn med React.forwardRef. Wrapperen videresender ref-en til det underliggende native elementet. Uten forwardRef ville ref-en pekt på vertobjektet til den egendefinerte komponenten, ikke på den indre TextInput.

const CustomInput = React.forwardRef((props, ref) => (
  <TextInput
    ref={ref}
    style={styles.customInput}
    {...props}
  />
));

// Now you can use the ref on CustomInput
const inputRef = useRef(null);
<CustomInput ref={inputRef} />

Initialisering av useRef og lat initialisering

Argumentet som sendes til useRef(initialValue), setter ref.current bare ved den første gjengivelsen – på samme måte som startverdien til useState. I motsetning til useState finnes det ingen form med en funksjon for lat initialisering. Hvis startverdien er kostbar å beregne, kan De beregne den betinget: if (ref.current === null) ref.current = computeValue().

const cacheRef = useRef(null);

if (cacheRef.current === null) {
  // Expensive computation runs only once
  cacheRef.current = buildLargeDataStructure();
}

// Use cacheRef.current anywhere in the component

Hurtigsjekk

Test forståelsen Deres av useRef-hooken fra denne leksjonen.

Besvar den i den interaktive leksjonen

Oppsummering av leksjonen

I denne leksjonen lærte De at: useRef tilbyr en muterbar .current-egenskap som bevares mellom gjengivelser uten å utløse nye gjengivelser, ref-er kan knyttes til native komponenter for å kalle imperative metoder som focus(), og timer-ID-er, tidligere verdier og stabile tilbakekallinger kan lagres i ref-er for å unngå foreldede closures. Deretter skal vi se på useReducer for håndtering av kompleks tilstandslogikk.

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 30
Leksjoner: 120

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «useRef for DOM-noder og mutable verdier» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien React Native Academy, inkludert «useRef for DOM-noder og mutable verdier», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i React Native Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «useRef for DOM-noder og mutable verdier»?

Bruk useRef til å holde en referanse til en TextInput og gi den fokus programmatisk, og lagre en muterbar verdi som varer mellom gjengivelser uten å utløse nye gjengivelser. Du øver på React Native Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Native Academy?

Ingen tidligere erfaring er nødvendig. React Native Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 1 av 4.

Hvor lang tid tar leksjonen «useRef for DOM-noder og mutable verdier»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Native Academy-leksjonen?

Ja. Alle React Native Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Native Academy