Kas tai yra lygiagrečios savybės, tokios kaip useTransition ir useDeferredValue?

Question

Accepted Answer

Lygiagretus React gali **nutraukti, pauzę ir nustatyti prioritetą** atvaizdinimo darbams. Jūs žymite kai kuriuos atnaujinimus kaip **neblogi per permainas**, todėl skubūs atnaujinimai (pvz., rašymas) lieka reaguojantys net jei greitai iš naujo atvaizdinimas yra laukiamas.

## useTransition

```jsx
const [isPending, startTransition] = useTransition();

function onChange(e) {
  setQuery(e.target.value);          // URGENT: keep the input snappy
  startTransition(() => {
    setResults(filterBigList(e.target.value)); // NON-URGENT: can be interrupted
  });
}
// isPending lets you show a subtle "updating…" indicator
```

**Kodėl tai padeda:** didelio sąrašo filtravimas yra brangus. Be permainos, React užblokuotų įvestį pervaizduodamas tūkstančius eilučių, todėl rašymas jaučiasi lėtas. Įdėjus brangų atnaujinimą į `startTransition`, React išlaiko aukšto prioriteto įvesties atnaujinimus ir gali **išmesti** pradedamą filtro atvaizdinimą, jei jūs nuspaudžiate kitą klavišą — nėra pasenusių, grumtavusių kadrų.

## useDeferredValue

Paprastesnis variantas, kai jūs nekontroliuojate setter-io — jis suteikia jums "atsiliekantį" vertės kopiją:

```jsx
const deferredQuery = useDeferredValue(query); // updates after urgent work settles
const results = useMemo(() => filterBigList(deferredQuery), [deferredQuery]);
```

## Kada naudoti

Naudokite tai **brangiam, neblogi per vartotojo įvestį varomam UI atnaujinimui**: paieška-kol-renkaisi virš didelių duomenų rinkinių, skirtuko jungtukai kurie atvaizduoja sunkią turinį, dideli filtruoti/surūšyti lentelės. Paprastiems programoms jie nereikalingi — jie sušviečia kai atvaizdinimas yra pakankamai sunkus dalyti pastebimą įvesties vėlavimą.