// Iedomājieties fetchData funkciju, kas atgriež Promise
function fetchUserData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve({ name: 'Alice' });
    }, 2000);
  });
}

// Hipotētisks Suspense spējīgs datu ielādes hook
function useUserData() {
  const data = fetch(url);
  if (data.status === 'pending') {
    throw new Promise(resolve => {
      // Šo pārtver Suspense
      setTimeout(() => resolve(null), 2000); 
    });
  }
  return data.value;
}

function UserProfile() {
  const userData = useUserData(); // Šis izsaukums var apturēt (suspend)
  return 
Welcome, {userData.name}!
;
}

function App() {
  return (
    Loading user...

2. Automātiskā grupēšana

Grupēšana ir process, kurā vairāki stāvokļa atjauninājumi tiek apvienoti vienā pārrenderēšanā. Tradicionāli React grupēja tikai tos atjauninājumus, kas notika notikumu apstrādātājos. Atjauninājumi, kas tika iniciēti ārpus notikumu apstrādātājiem (piemēram, promisēs vai `setTimeout`), netika grupēti, izraisot nevajadzīgas pārrenderēšanas.

Kā tas darbojas ar vienlaicīgumu: Ar vienlaicīguma režīmu React automātiski grupē visus stāvokļa atjauninājumus neatkarīgi no to izcelsmes. Tas nozīmē, ja jums ir vairāki stāvokļa atjauninājumi, kas notiek ātri viens pēc otra (piemēram, no vairāku asinhronu operāciju pabeigšanas), React tos apvienos un veiks vienu pārrenderēšanu, uzlabojot veiktspēju un samazinot vairāku renderēšanas ciklu pieskaitāmās izmaksas.

Piemērs: Pieņemsim, ka jūs ielādējat datus no diviem dažādiem API. Kad abi ir pabeigti, jūs atjaunināt divus atsevišķus stāvokļa gabalus. Vecākās React versijās tas varētu izraisīt divas pārrenderēšanas. Vienlaicīguma režīmā šie atjauninājumi tiek grupēti, rezultātā notiek viena, efektīvāka pārrenderēšana.

3. Pārejas (Transitions)

Pārejas ir jauns jēdziens, kas ieviests, lai atšķirtu steidzamus un nesteidzamus atjauninājumus. Tas ir galvenais mehānisms pārtraucamās renderēšanas nodrošināšanai.

Steidzami atjauninājumi: Tie ir atjauninājumi, kuriem nepieciešama tūlītēja atgriezeniskā saite, piemēram, rakstīšana ievades laukā, pogas noklikšķināšana vai tieša UI elementu manipulācija. Tiem jābūt tūlītējiem.

Pārejas atjauninājumi: Tie ir atjauninājumi, kas var aizņemt ilgāku laiku un kuriem nav nepieciešama tūlītēja atgriezeniskā saite. Piemēri ietver jaunas lapas renderēšanu pēc saites noklikšķināšanas, liela saraksta filtrēšanu vai saistītu UI elementu atjaunināšanu, kas tieši nereaģē uz klikšķi. Šos atjauninājumus var pārtraukt.

Kā tas darbojas ar vienlaicīgumu: Izmantojot `startTransition` API, jūs varat atzīmēt noteiktus stāvokļa atjauninājumus kā pārejas. React plānotājs tad apstrādās šos atjauninājumus ar zemāku prioritāti un var tos pārtraukt, ja notiek steidzamāks atjauninājums. Tas nodrošina, ka, kamēr tiek veikts nesteidzams atjauninājums (piemēram, liela saraksta renderēšana), steidzami atjauninājumi (piemēram, rakstīšana meklēšanas joslā) tiek prioritizēti, saglabājot UI atsaucību.

Globāls piemērs: Apsveriet ceļojumu rezervēšanas vietni. Kad lietotājs izvēlas jaunu galamērķi, tas var izraisīt atjauninājumu kaskādi: lidojumu datu ielādi, viesnīcu pieejamības atjaunināšanu un kartes renderēšanu. Ja lietotājs nekavējoties nolemj mainīt ceļojuma datumus, kamēr sākotnējie atjauninājumi vēl tiek apstrādāti, `startTransition` API ļauj React apturēt lidojumu/viesnīcu atjauninājumus, apstrādāt steidzamo datuma maiņu un pēc tam, iespējams, atsākt vai atkārtoti iniciēt lidojumu/viesnīcu ielādi, pamatojoties uz jaunajiem datumiem. Tas novērš UI sasalšanu sarežģītās atjaunināšanas secības laikā.

Koda fragments (ilustratīvs):

import { useState, useTransition } from 'react';

function SearchResults() {
  const [isPending, startTransition] = useTransition();
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const handleQueryChange = (e) => {
    const newQuery = e.target.value;
    setQuery(newQuery);

    // Atzīmēt šo atjauninājumu kā pāreju
    startTransition(() => {
      // Simulēt rezultātu ielādi, to var pārtraukt
      fetchResults(newQuery).then(res => setResults(res));
    });
  };

  return (
    

      
      {isPending && 
Loading results...
}
      

        {results.map(item => (
          
{item.name}
        ))}
      
    
  );
}

4. Bibliotēkas un ekosistēmas integrācija

Vienlaicīguma režīma priekšrocības neaprobežojas tikai ar React pamatfunkcijām. Visa ekosistēma pielāgojas. Bibliotēkas, kas mijiedarbojas ar React, piemēram, maršrutēšanas risinājumi vai stāvokļa pārvaldības rīki, arī var izmantot vienlaicīgumu, lai nodrošinātu plūstošāku pieredzi.

Piemērs: Maršrutēšanas bibliotēka var izmantot pārejas, lai pārvietotos starp lapām. Ja lietotājs dodas prom, pirms pašreizējā lapa ir pilnībā renderēta, maršrutēšanas atjauninājumu var nemanāmi pārtraukt vai atcelt, un jaunajai navigācijai var piešķirt prioritāti. Tas nodrošina, ka lietotājs vienmēr redz visjaunāko paredzēto skatu.

Kā iespējot un izmantot vienlaicīguma funkcijas

Lai gan vienlaicīguma režīms ir fundamentāla maiņa, tā funkciju iespējošana parasti ir vienkārša un bieži vien prasa minimālas koda izmaiņas, īpaši jaunām lietojumprogrammām vai pieņemot tādas funkcijas kā Suspense un Transitions.

1. React versija

Vienlaicīguma funkcijas ir pieejamas React 18 un jaunākās versijās. Pārliecinieties, ka izmantojat saderīgu versiju:

npm install react@latest react-dom@latest

2. Saknes API (`createRoot`)

Galvenais veids, kā piekļūt vienlaicīguma funkcijām, ir izmantot jauno `createRoot` API, montējot savu lietojumprogrammu:

// index.js vai main.jsx
import ReactDOM from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render();

Izmantojot `createRoot`, automātiski tiek iespējotas visas vienlaicīguma funkcijas, ieskaitot automātisko grupēšanu, pārejas un Suspense.

Piezīme: Vecākā `ReactDOM.render` API neatbalsta vienlaicīguma funkcijas. Migrācija uz `createRoot` ir galvenais solis, lai atbloķētu vienlaicīgumu.

3. Suspense ieviešana

Kā parādīts iepriekš, Suspense tiek ieviests, ietinot komponentus, kas veic asinhronas operācijas, ar <Suspense> robežu un nodrošinot fallback rekvizītu.

Labākās prakses:

• Ligzdojiet <Suspense> robežas, lai granulāri pārvaldītu ielādes stāvokļus.
• Izmantojiet pielāgotus hookus, kas integrējas ar Suspense, lai iegūtu tīrāku datu ielādes loģiku.
• Apsveriet iespēju izmantot tādas bibliotēkas kā Relay vai Apollo Client, kurām ir pirmās klases atbalsts Suspense.

4. Pāreju izmantošana (`startTransition`)

Identificējiet nesteidzamus UI atjauninājumus un ietiniet tos ar startTransition.

Kad izmantot:

• Meklēšanas rezultātu atjaunināšana pēc lietotāja rakstīšanas.
• Navigācija starp maršrutiem.
• Lielu sarakstu vai tabulu filtrēšana.
• Papildu datu ielāde, kas tieši neietekmē lietotāja mijiedarbību.

Piemērs: Sarežģītai liela datu kopas filtrēšanai, kas tiek attēlota tabulā, jūs iestatītu filtra vaicājuma stāvokli un pēc tam izsauktu `startTransition` faktiskajai tabulas rindu filtrēšanai un pārrenderēšanai. Tas nodrošina, ka, ja lietotājs atkal ātri maina filtra kritērijus, iepriekšējo filtrēšanas operāciju var droši pārtraukt.

Pārtraucamās renderēšanas priekšrocības globālai auditorijai

Pārtraucamās renderēšanas un vienlaicīguma režīma priekšrocības tiek pastiprinātas, ņemot vērā globālu lietotāju bāzi ar dažādiem tīkla apstākļiem un ierīču iespējām.

• Uzlabota uztvertā veiktspēja: Pat ar lēnākiem savienojumiem vai mazāk jaudīgām ierīcēm UI paliek atsaucīgs. Lietotāji piedzīvo ātrāku lietojumprogrammu, jo kritiskas mijiedarbības nekad netiek bloķētas uz ilgu laiku.
• Uzlabota pieejamība: Prioritizējot lietotāju mijiedarbības, lietojumprogrammas kļūst pieejamākas lietotājiem, kuri paļaujas uz palīgtehnoloģijām vai kuriem var būt kognitīvi traucējumi, kam noder konsekventi atsaucīga saskarne.
• Samazināta vilšanās: Globālie lietotāji, kas bieži darbojas dažādās laika joslās un ar dažādiem tehniskiem iestatījumiem, novērtē lietojumprogrammas, kas nesasalst vai nelago. Plūstošs UX nodrošina lielāku iesaisti un apmierinātību.
• Labāka resursu pārvaldība: Mobilajās ierīcēs vai vecākā aparatūrā, kur CPU un atmiņa bieži ir ierobežota, pārtraucamā renderēšana ļauj React efektīvi pārvaldīt resursus, apturot nesvarīgus uzdevumus, lai atbrīvotu vietu kritiskiem uzdevumiem.
• Konsekventa pieredze dažādās ierīcēs: Neatkarīgi no tā, vai lietotājs izmanto augstas klases galddatoru Silīcija ielejā vai budžeta viedtālruni Dienvidaustrumāzijā, lietojumprogrammas pamata atsaucību var saglabāt, mazinot atšķirības aparatūras un tīkla spējās.

Apsveriet valodu apguves lietotni, ko izmanto studenti visā pasaulē. Ja viens students lejupielādē jaunu nodarbību (potenciāli ilgs uzdevums), kamēr cits mēģina atbildēt uz ātru vārdu krājuma jautājumu, pārtraucamā renderēšana nodrošina, ka vārdu krājuma jautājums tiek atbildēts nekavējoties, pat ja lejupielāde turpinās. Tas ir ļoti svarīgi izglītības rīkiem, kur tūlītēja atgriezeniskā saite ir būtiska mācībām.

Potenciālie izaicinājumi un apsvērumi

Lai gan vienlaicīguma režīms piedāvā ievērojamas priekšrocības, tā pieņemšana ietver arī mācīšanās līkni un dažus apsvērumus:

• Atkļūdošana: Asinhronu un pārtraucamu operāciju atkļūdošana var būt sarežģītāka nekā sinhronā koda atkļūdošana. Izprast izpildes plūsmu un to, kad uzdevumi var tikt apturēti vai atsākti, prasa rūpīgu uzmanību.
• Domāšanas modeļa maiņa: Izstrādātājiem ir jāpielāgo sava domāšana no tīri secīga izpildes modeļa uz vairāk vienlaicīgu, uz notikumiem balstītu pieeju. Izpratne par `startTransition` un Suspense ietekmi ir galvenais.
• Ārējās bibliotēkas: Ne visas trešo pušu bibliotēkas ir atjauninātas, lai būtu saderīgas ar vienlaicīgumu. Vecāku bibliotēku izmantošana, kas veic bloķējošas operācijas, joprojām var izraisīt UI sasalšanu. Ir svarīgi pārliecināties, ka jūsu atkarības ir saderīgas.
• Stāvokļa pārvaldība: Lai gan React iebūvētās vienlaicīguma funkcijas ir jaudīgas, sarežģīti stāvokļa pārvaldības scenāriji var prasīt rūpīgu apsvēršanu, lai nodrošinātu, ka visi atjauninājumi tiek pareizi un efektīvi apstrādāti vienlaicīguma paradigmā.

React vienlaicīguma nākotne

React ceļojums uz vienlaicīgumu turpinās. Komanda turpina pilnveidot plānotāju, ieviest jaunas API un uzlabot izstrādātāju pieredzi. Tādas funkcijas kā Offscreen API (kas ļauj komponentus renderēt, neietekmējot lietotāja uztverto UI, noderīgi priekšrenderēšanai vai fona uzdevumiem) vēl vairāk paplašina iespējas, ko var sasniegt ar vienlaicīgu renderēšanu.

Tā kā tīmeklis kļūst arvien sarežģītāks un lietotāju cerības attiecībā uz veiktspēju un atsaucību turpina pieaugt, vienlaicīga renderēšana kļūst ne tikai par optimizāciju, bet par nepieciešamību, lai veidotu modernas, saistošas lietojumprogrammas, kas apkalpo globālu auditoriju.

Secinājums

React vienlaicīguma režīms un tā pamatkoncepcija par pārtraucamo renderēšanu ir nozīmīga evolūcija tajā, kā mēs veidojam lietotāja saskarnes. Ļaujot React apturēt, atsākt un prioritizēt renderēšanas uzdevumus, mēs varam izveidot lietojumprogrammas, kas ir ne tikai veiktspējīgas, bet arī neticami atsaucīgas un noturīgas, pat pie lielas slodzes vai ierobežotā vidē.

Globālai auditorijai tas nozīmē taisnīgāku un patīkamāku lietotāja pieredzi. Neatkarīgi no tā, vai jūsu lietotāji piekļūst jūsu lietojumprogrammai no ātrgaitas optiskā interneta savienojuma Eiropā vai mobilā tīkla jaunattīstības valstī, vienlaicīguma režīms palīdz nodrošināt, ka jūsu lietojumprogramma šķiet ātra un plūstoša.

Tādu funkciju kā Suspense un Transitions pieņemšana un migrācija uz jauno saknes API ir būtiski soļi, lai pilnībā atraisītu React potenciālu. Izprotot un pielietojot šos jēdzienus, jūs varat veidot nākamās paaudzes tīmekļa lietojumprogrammas, kas patiesi iepriecina lietotājus visā pasaulē.

Galvenās atziņas:

• React vienlaicīguma režīms ļauj veikt pārtraucamu renderēšanu, atbrīvojoties no sinhronas bloķēšanas.
• Tādas funkcijas kā Suspense, automātiskā grupēšana un pārejas ir balstītas uz šo vienlaicīguma pamatu.
• Izmantojiet createRoot, lai iespējotu vienlaicīguma funkcijas.
• Identificējiet un atzīmējiet nesteidzamus atjauninājumus ar startTransition.
• Vienlaicīga renderēšana ievērojami uzlabo UX globāliem lietotājiem, īpaši ar dažādiem tīkla apstākļiem un ierīcēm.
• Sekojiet līdzi React attīstītajām vienlaicīguma funkcijām, lai nodrošinātu optimālu veiktspēju.

Sāciet izpētīt vienlaicīguma režīmu savos projektos jau šodien un veidojiet ātrākas, atsaucīgākas un patīkamākas lietojumprogrammas ikvienam.