React Academy · Lektion

useTransition för icke-blockerande UI-uppdateringar

Omslut kostsamma state-uppdateringar i startTransition så att UI:t förblir responsivt.

Lektion 2 av 413 steg

useTransition för icke-blockerande UI-uppdateringar är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen använder Ni useTransition-hooken för att markera kostsamma state-uppdateringar som icke-brådskande och hålla gränssnittet responsivt medan tung rendering sker i bakgrunden.

Problemet med blockerande uppdateringar

När Ni skriver i ett sökfält som filtrerar en stor lista måste React rendera om hela den filtrerade listan vid varje knapptryckning. Det hindrar inmatningen från att uppdateras direkt och gör att gränssnittet känns trögt.

React Concurrent Mode

React 18 introducerade concurrent rendering: React kan börja rendera en state-uppdatering, pausa den och prioritera mer brådskande uppdateringar, till exempel när Ni skriver. useTransition är hooken som låter Er klassificera uppdateringar som lågprioriterade övergångar.

Grunderna i useTransition

useTransition returnerar `[isPending, startTransition]`. Omslut den icke-brådskande state-uppdateringen i `startTransition()`. React prioriterar andra uppdateringar, till exempel kontrollerad inmatning, framför övergången.

const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
  setInputValue(e.target.value); // urgent: update input immediately
  startTransition(() => {
    setFilteredList(filter(e.target.value)); // non-urgent
  });
};

isPending för laddningsgränssnitt

Medan övergången bearbetas är `isPending` `true`. Använd det för att visa en laddningsindikator eller tona ned den inaktuella resultatlistan, så att användarna får återkoppling om att en uppdatering pågår.

return (
  <>
    <input value={inputValue} onChange={handleChange} />
    {isPending && <Spinner />}
    <ResultList items={filteredList} />
  </>
);

Vad ska placeras i startTransition

Placera endast state-uppdateringar i startTransition – inte asynkrona operationer. Det är state-uppdateringen som utlöser den kostsamma renderingen som ska omslutas.

// Correct
startTransition(() => setTab('heavy'));

// Wrong — async work outside React state
startTransition(async () => { await fetch(...); }); // not supported

startTransition utan hooken

Om Ni inte behöver `isPending` kan Ni importera och anropa `startTransition` direkt från React utan hooken.

import { startTransition } from 'react';

startTransition(() => setQuery(newValue));

Exempel med flikbyte

Ett vanligt användningsfall är att ett klick på en flik byter till en tung komponent. Omslut flikbytet i startTransition så att indikatorn för den aktiva fliken uppdateras direkt medan den tunga komponenten renderas i bakgrunden.

const [tab, setTab] = useState('posts');
const [isPending, startTransition] = useTransition();

const selectTab = (t) =>
  startTransition(() => setTab(t));

useTransition jämfört med useDeferredValue

useTransition används när Ni ÄGER state-uppdateringen, det vill säga när Ni anropar setState. useDeferredValue används när Ni tar emot en prop eller ett värde som Ni inte kan fördröja direkt — det är själva värdet som fördröjs.

Ingen ersättning för optimering

startTransition gör inte renderingen snabbare – den skjuter bara upp den. Om det tar 500 ms att rendera en komponent tar det fortfarande 500 ms. Kombinera med React.memo eller virtualisering för listor som verkligen är långsamma.

Snabbtest

Vad representerar isPending från useTransition?

Besvara frågan i den interaktiva lektionen

Sammanfattning

useTransition låter Er klassificera state-uppdateringar som icke-brådskande övergångar. Brådskande uppdateringar, som inmatning, renderas direkt; övergångar renderas när React har kapacitet. Använd isPending för att visa återkoppling vid laddning.

Nästa steg

Nästa lektion: **useDeferredValue för debounce av inmatning** — Ni kommer att fördröja omrenderingen av långsamma delar av gränssnittet samtidigt som inmatningen förblir snabb.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”useTransition för icke-blockerande UI-uppdateringar” gratis?

Ja – hela texten till ”useTransition för icke-blockerande UI-uppdateringar” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”useTransition för icke-blockerande UI-uppdateringar”?

Omslut kostsamma state-uppdateringar i startTransition så att UI:t förblir responsivt. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”useTransition för icke-blockerande UI-uppdateringar”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

Race conditions och rensning av effekter
useTransition för icke-blockerande UI-uppdateringar
useDeferredValue för debouncing av inmatning
Suspense för data- och kodgränser

← Tillbaka till React Academy