React paketinis atnaujinimas: būsenos pakeitimų optimizavimas siekiant geresnio našumo

„React“ našumas yra labai svarbus kuriant sklandžias ir greitai reaguojančias vartotojo sąsajas. Vienas iš pagrindinių mechanizmų, kuriuos „React“ naudoja našumui optimizuoti, yra paketiniai atnaujinimai. Ši technika sugrupuoja kelis būsenos atnaujinimus į vieną pervaizdavimo ciklą, ženkliai sumažindama nereikalingų pervaizdavimų skaičių ir pagerindama bendrą programos reakcijos laiką. Šiame straipsnyje gilinamasi į „React“ paketinių atnaujinimų subtilybes, paaiškinama, kaip jie veikia, kokie jų privalumai, apribojimai ir kaip juos efektyviai panaudoti kuriant aukšto našumo „React“ programas.

Supraskime „React“ atvaizdavimo procesą

Prieš pradedant gilintis į paketinius atnaujinimus, būtina suprasti „React“ atvaizdavimo procesą. Kai pasikeičia komponento būsena, „React“ turi pervaizduoti tą komponentą ir jo antrinius elementus, kad atspindėtų naują būseną vartotojo sąsajoje. Šis procesas apima šiuos veiksmus:

1. Būsenos atnaujinimas: Komponento būsena atnaujinama naudojant setState metodą (arba „hook“ kaip useState).
2. Suderinimas: „React“ palygina naują virtualųjį DOM su ankstesniuoju, kad nustatytų skirtumus („diff“).
3. Pateikimas: „React“ atnaujina tikrąjį DOM remdamasis nustatytais skirtumais. Būtent čia pakeitimai tampa matomi vartotojui.

Pervaizdavimas gali būti daug skaičiavimo resursų reikalaujanti operacija, ypač sudėtingiems komponentams su giliais komponentų medžiais. Dažni pervaizdavimai gali sukelti našumo problemas ir lėtą vartotojo patirtį.

Kas yra paketiniai atnaujinimai?

Paketiniai atnaujinimai yra našumo optimizavimo technika, kai „React“ sugrupuoja kelis būsenos atnaujinimus į vieną pervaizdavimo ciklą. Užuot pervaizdavus komponentą po kiekvieno atskiro būsenos pakeitimo, „React“ laukia, kol bus atlikti visi būsenos atnaujinimai tam tikroje srityje, ir tada atlieka vieną pervaizdavimą. Tai žymiai sumažina DOM atnaujinimo kartų skaičių, o tai lemia geresnį našumą.

Kaip veikia paketiniai atnaujinimai

„React“ automatiškai sugrupuoja būsenos atnaujinimus, kurie vyksta jo kontroliuojamoje aplinkoje, pavyzdžiui:

• Įvykių apdorojimo funkcijos: Būsenos atnaujinimai įvykių apdorojimo funkcijose, tokiose kaip onClick, onChange ir onSubmit, yra grupuojami.
• „React“ gyvavimo ciklo metodai (klasės komponentai): Būsenos atnaujinimai gyvavimo ciklo metoduose, tokiuose kaip componentDidMount ir componentDidUpdate, taip pat yra grupuojami.
• „React Hooks“: Būsenos atnaujinimai, atliekami per useState ar pasirinktinius „hooks“, kuriuos sukelia įvykių apdorojimo funkcijos, yra grupuojami.

Kai keli būsenos atnaujinimai vyksta šiuose kontekstuose, „React“ juos sudeda į eilę ir atlieka vieną suderinimo bei pateikimo fazę po to, kai įvykių apdorojimo funkcija arba gyvavimo ciklo metodas baigia savo darbą.

Pavyzdys:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    

      
Skaičius: {count}
      Pridėti
    
  );
}

export default Counter;

Šiame pavyzdyje paspaudus mygtuką „Pridėti“, paleidžiama handleClick funkcija, kuri tris kartus iškviečia setCount. „React“ sugrupuos šiuos tris būsenos atnaujinimus į vieną. Dėl to komponentas bus pervaizduotas tik vieną kartą, o count padidės 3, o ne po 1 su kiekvienu setCount iškvietimu. Jei „React“ negrupuotų atnaujinimų, komponentas būtų pervaizduotas tris kartus, o tai yra mažiau efektyvu.

Paketinių atnaujinimų privalumai

Pagrindinis paketinių atnaujinimų privalumas yra pagerėjęs našumas, sumažinant pervaizdavimų skaičių. Tai lemia:

• Greitesni UI atnaujinimai: Sumažėję pervaizdavimai lemia greitesnius vartotojo sąsajos atnaujinimus, todėl programa tampa labiau reaguojanti.
• Sumažėjusios DOM manipuliacijos: Retesni DOM atnaujinimai reiškia mažiau darbo naršyklei, o tai lemia geresnį našumą ir mažesnį resursų suvartojimą.
• Pagerėjęs bendras programos našumas: Paketiniai atnaujinimai prisideda prie sklandesnės ir efektyvesnės vartotojo patirties, ypač sudėtingose programose su dažnais būsenos pakeitimais.

Kada paketiniai atnaujinimai netaikomi

Nors „React“ automatiškai grupuoja atnaujinimus daugelyje scenarijų, yra situacijų, kai grupavimas nevyksta:

• Asinchroninės operacijos (už „React“ kontrolės ribų): Būsenos atnaujinimai, atliekami asinchroninėse operacijose, tokiose kaip setTimeout, setInterval ar „promises“, paprastai nėra automatiškai grupuojami. Taip yra todėl, kad „React“ nekontroliuoja šių operacijų vykdymo konteksto.
• Natūralios įvykių apdorojimo funkcijos: Jei naudojate natūralias įvykių klausykles (pvz., tiesiogiai prijungiate klausykles prie DOM elementų naudojant addEventListener), būsenos atnaujinimai tose apdorojimo funkcijose nėra grupuojami.

Pavyzdys (asinchroninė operacija):

import React, { useState } from 'react';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1);
      setCount(count + 1);
    }, 0);
  };

  return (
    

      
Skaičius: {count}
      Pridėti
    
  );
}

export default DelayedCounter;

Šiame pavyzdyje, nors setCount yra iškviečiama tris kartus iš eilės, jos yra setTimeout atgalinio iškvietimo funkcijoje. Dėl to „React“ *negrupuos* šių atnaujinimų, ir komponentas bus pervaizduotas tris kartus, kiekvieno pervaizdavimo metu padidinant skaičių 1. Šį elgesį labai svarbu suprasti norint tinkamai optimizuoti savo komponentus.

Priverstinis paketinis atnaujinimas su unstable_batchedUpdates

Scenarijuose, kai „React“ automatiškai negrupuoja atnaujinimų, galite naudoti unstable_batchedUpdates iš react-dom, kad priverstumėte grupavimą. Ši funkcija leidžia apgaubti kelis būsenos atnaujinimus į vieną paketą, užtikrinant, kad jie bus apdoroti kartu viename pervaizdavimo cikle.

Pastaba: unstable_batchedUpdates API laikoma nestabilia ir gali keistis būsimose „React“ versijose. Naudokite ją atsargiai ir būkite pasirengę prireikus koreguoti savo kodą. Tačiau tai išlieka naudingas įrankis, leidžiantis aiškiai kontroliuoti grupavimo elgseną.

Pavyzdys (naudojant unstable_batchedUpdates):

import React, { useState } from 'react';
import { unstable_batchedUpdates } from 'react-dom';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      unstable_batchedUpdates(() => {
        setCount(count + 1);
        setCount(count + 1);
        setCount(count + 1);
      });
    }, 0);
  };

  return (
    

      
Skaičius: {count}
      Pridėti
    
  );
}

export default DelayedCounter;

Šiame pakeistame pavyzdyje unstable_batchedUpdates yra naudojama apgaubti tris setCount iškvietimus setTimeout atgalinio iškvietimo funkcijoje. Tai priverčia „React“ sugrupuoti šiuos atnaujinimus, o tai lemia vieną pervaizdavimą ir skaičiaus padidinimą 3.

„React 18“ ir automatinis grupavimas

„React 18“ pristatė automatinį grupavimą daugiau scenarijų. Tai reiškia, kad „React“ automatiškai grupuos būsenos atnaujinimus, net kai jie vyksta laiko atidėjimuose, „promises“, natūraliuose įvykių apdorojimo funkcijose ar bet kokiame kitame įvykyje. Tai labai supaprastina našumo optimizavimą ir sumažina poreikį rankiniu būdu naudoti unstable_batchedUpdates.

Pavyzdys („React 18“ automatinis grupavimas):

import React, { useState } from 'react';

function DelayedCounter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setTimeout(() => {
      setCount(count + 1);
      setCount(count + 1);
      setCount(count + 1);
    }, 0);
  };

  return (
    

      
Skaičius: {count}
      Pridėti
    
  );
}

export default DelayedCounter;

„React 18“ versijoje, aukščiau pateiktas pavyzdys automatiškai sugrupuos setCount iškvietimus, net jei jie yra setTimeout viduje. Tai yra reikšmingas „React“ našumo optimizavimo galimybių patobulinimas.

Geriausios praktikos norint išnaudoti paketinius atnaujinimus

Norėdami efektyviai išnaudoti paketinius atnaujinimus ir optimizuoti savo „React“ programas, atsižvelkite į šias geriausias praktikas:

• Grupuokite susijusius būsenos atnaujinimus: Kai tik įmanoma, grupuokite susijusius būsenos atnaujinimus toje pačioje įvykių apdorojimo funkcijoje ar gyvavimo ciklo metode, kad maksimaliai išnaudotumėte grupavimo privalumus.
• Venkite nereikalingų būsenos atnaujinimų: Sumažinkite būsenos atnaujinimų skaičių kruopščiai projektuodami komponento būseną ir vengdami nereikalingų atnaujinimų, kurie neturi įtakos vartotojo sąsajai. Apsvarstykite galimybę naudoti technikas, tokias kaip memoizacija (pvz., React.memo), kad išvengtumėte komponentų, kurių savybės nepasikeitė, pervaizdavimo.
• Naudokite funkcinius atnaujinimus: Kai atnaujinate būseną remdamiesi ankstesne būsena, naudokite funkcinius atnaujinimus. Tai užtikrina, kad dirbate su teisinga būsenos reikšme, net kai atnaujinimai yra grupuojami. Funkciniai atnaujinimai perduoda funkciją į setState (arba useState nustatymo funkciją), kuri kaip argumentą gauna ankstesnę būseną.
• Būkite atidūs su asinchroninėmis operacijomis: Senesnėse „React“ versijose (iki 18), atminkite, kad būsenos atnaujinimai asinchroninėse operacijose nėra automatiškai grupuojami. Kai reikia, naudokite unstable_batchedUpdates, kad priverstumėte grupavimą. Tačiau naujiems projektams labai rekomenduojama atsinaujinti į „React 18“, kad pasinaudotumėte automatiniu grupavimu.
• Optimizuokite įvykių apdorojimo funkcijas: Optimizuokite kodą savo įvykių apdorojimo funkcijose, kad išvengtumėte nereikalingų skaičiavimų ar DOM manipuliacijų, kurios gali sulėtinti atvaizdavimo procesą.
• Profiluokite savo programą: Naudokite „React“ profiliavimo įrankius, kad nustatytumėte našumo problemas ir sritis, kuriose galima dar labiau optimizuoti paketinius atnaujinimus. „React DevTools“ našumo skirtukas gali padėti vizualizuoti pervaizdavimus ir nustatyti tobulinimo galimybes.

Pavyzdys (funkciniai atnaujinimai):

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
    setCount(prevCount => prevCount + 1);
  };

  return (
    

      
Skaičius: {count}
      Pridėti
    
  );
}

export default Counter;

Šiame pavyzdyje funkciniai atnaujinimai naudojami padidinti count remiantis ankstesne reikšme. Tai užtikrina, kad count yra teisingai padidinamas, net kai atnaujinimai yra grupuojami.

Išvada

„React“ paketiniai atnaujinimai yra galingas mechanizmas, skirtas optimizuoti našumą mažinant nereikalingus pervaizdavimus. Supratimas, kaip veikia paketiniai atnaujinimai, kokie jų apribojimai ir kaip juos efektyviai panaudoti, yra labai svarbus kuriant aukšto našumo „React“ programas. Laikydamiesi šiame straipsnyje aprašytų geriausių praktikų, galite žymiai pagerinti savo „React“ programų reakcijos laiką ir bendrą vartotojo patirtį. „React 18“ pristačius automatinį grupavimą, būsenos pakeitimų optimizavimas tampa dar paprastesnis ir efektyvesnis, leidžiantis kūrėjams sutelkti dėmesį į nuostabių vartotojo sąsajų kūrimą.