React automatinis grupavimas: būsenos atnaujinimų optimizavimas našumui

React našumas yra labai svarbus kuriant sklandžias ir greitai reaguojančias vartotojo sąsajas. Viena iš pagrindinių funkcijų, pristatytų našumui pagerinti, yra automatinis grupavimas. Ši optimizavimo technika automatiškai sugrupuoja kelis būsenos atnaujinimus į vieną pervaizdavimą, o tai žymiai pagerina našumą. Tai ypač aktualu sudėtingose programose su dažnais būsenos pasikeitimais.

Kas yra React automatinis grupavimas?

Grupavimas (angl. batching), React kontekste, yra kelių būsenos atnaujinimų sujungimo į vieną procesas. Iki React 18 versijos grupavimas buvo taikomas tik atnaujinimams, kurie vyko React įvykių apdorojimo funkcijose. Atnaujinimai už įvykių apdorojimo funkcijų ribų, pavyzdžiui, setTimeout, pažaduose (promises) ar natūralių įvykių apdorojimo funkcijose, nebuvo grupuojami. Tai galėjo sukelti nereikalingus pervaizdavimus ir našumo problemas.

React 18 pristatė automatinį grupavimą, kuris šį optimizavimą išplečia visiems būsenos atnaujinimams, nepriklausomai nuo to, kur jie įvyksta. Tai reiškia, kad nesvarbu, ar jūsų būsenos atnaujinimai vyksta React įvykių apdorojimo funkcijoje, setTimeout atgalinio iškvietimo (callback) funkcijoje ar pažado (promise) išpildyme, React juos automatiškai sujungs į vieną pervaizdavimą.

Kodėl automatinis grupavimas yra svarbus?

Automatinis grupavimas suteikia keletą pagrindinių privalumų:

• Pagerintas našumas: Sumažindamas pervaizdavimų skaičių, React automatinis grupavimas sumažina naršyklės atliekamo darbo kiekį, reikalingą DOM atnaujinti, todėl vartotojo sąsajos tampa greitesnės ir geriau reaguojančios.
• Sumažintos pervaizdavimo sąnaudos: Kiekvieno pervaizdavimo metu React palygina virtualų DOM su realiu DOM ir pritaiko reikiamus pakeitimus. Grupavimas sumažina šias sąnaudas, atliekant mažiau palyginimų.
• Apsaugo nuo nenuoseklių būsenų: Grupavimas užtikrina, kad komponentas bus pervaizduotas tik su galutine, nuoseklia būsena, neleidžiant vartotojui matyti tarpinių ar laikinų būsenų.

Kaip veikia automatinis grupavimas

React pasiekia automatinį grupavimą atidėdamas būsenos atnaujinimų vykdymą iki dabartinio vykdymo konteksto pabaigos. Tai leidžia React surinkti visus būsenos atnaujinimus, įvykusius tame kontekste, ir sugrupuoti juos į vieną atnaujinimą.

Panagrinėkime šį supaprastintą pavyzdį:

function ExampleComponent() {
  const [count1, setCount1] = useState(0);
  const [count2, setCount2] = useState(0);

  function handleClick() {
    setTimeout(() => {
      setCount1(count1 + 1);
      setCount2(count2 + 1);
    }, 0);
  }

  return (
    <div>
      <p>Count 1: {count1}</p>
      <p>Count 2: {count2}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

Iki React 18, paspaudus mygtuką būtų sukelti du pervaizdavimai: vienas skirtas setCount1 ir kitas – setCount2. Su automatiniu grupavimu React 18 versijoje, abu būsenos atnaujinimai yra sugrupuojami, todėl įvyksta tik vienas pervaizdavimas.

Automatinio grupavimo pavyzdžiai

1. Asinchroniniai atnaujinimai

Asinchroninės operacijos, tokios kaip duomenų gavimas iš API, dažnai apima būsenos atnaujinimą po operacijos pabaigos. Automatinis grupavimas užtikrina, kad šie būsenos atnaujinimai būtų sugrupuoti, net jei jie vyksta asinchroninio atgalinio iškvietimo (callback) metu.

function DataFetchingComponent() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/data');
        const jsonData = await response.json();
        setData(jsonData);
        setLoading(false);
      } catch (error) {
        console.error('Error fetching data:', error);
        setLoading(false);
      }
    }

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  return <div>Data: {JSON.stringify(data)}</div>;
}

Šiame pavyzdyje setData ir setLoading abi iškviečiamos asinchroninėje fetchData funkcijoje. React sugrupavo šiuos atnaujinimus, todėl, kai duomenys bus gauti ir įkėlimo būsena atnaujinta, įvyks tik vienas pervaizdavimas.

2. Pažadai (Promises)

Panašiai kaip ir asinchroninių atnaujinimų atveju, pažadai (promises) dažnai apima būsenos atnaujinimą, kai pažadas yra išpildomas arba atmetamas. Automatinis grupavimas užtikrina, kad šie būsenos atnaujinimai taip pat būtų sugrupuoti.

function PromiseComponent() {
  const [result, setResult] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    const myPromise = new Promise((resolve, reject) => {
      setTimeout(() => {
        const success = Math.random() > 0.5;
        if (success) {
          resolve('Promise resolved!');
        } else {
          reject('Promise rejected!');
        }
      }, 1000);
    });

    myPromise
      .then((value) => {
        setResult(value);
        setError(null);
      })
      .catch((err) => {
        setError(err);
        setResult(null);
      });
  }, []);

  if (error) {
    return <p>Error: {error}</p>;
  }

  if (result) {
    return <p>Result: {result}</p>;
  }

  return <p>Loading...</p>;
}

Šiuo atveju sėkmės atveju iškviečiamos setResult ir setError(null), o nesėkmės atveju – setError ir setResult(null). Nepriklausomai nuo rezultato, automatinis grupavimas sujungs juos į vieną pervaizdavimą.

3. Natūralių įvykių apdorojimo funkcijos

Kartais gali prireikti naudoti natūralias įvykių apdorojimo funkcijas (pvz., addEventListener) vietoj React sintetinių įvykių apdorojimo funkcijų. Automatinis grupavimas veikia ir šiais atvejais.

function NativeEventHandlerComponent() {
  const [scrollPosition, setScrollPosition] = useState(0);

  useEffect(() => {
    function handleScroll() {
      setScrollPosition(window.scrollY);
    }

    window.addEventListener('scroll', handleScroll);

    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
  }, []);

  return <p>Scroll Position: {scrollPosition}</p>;
}

Nors setScrollPosition yra iškviečiama natūralioje įvykių apdorojimo funkcijoje, React vis tiek sujungs atnaujinimus, užkertant kelią pertekliams pervaizdavimams, kai vartotojas slenka puslapį.

Automatinio grupavimo atsisakymas

Retais atvejais galite norėti atsisakyti automatinio grupavimo. Pavyzdžiui, galbūt norėsite priverstinai atlikti sinchroninį atnaujinimą, kad užtikrintumėte, jog vartotojo sąsaja būtų atnaujinta nedelsiant. Tam React suteikia flushSync API.

Pastaba: flushSync reikėtų naudoti saikingai, nes tai gali neigiamai paveikti našumą. Paprastai geriausia, kai tik įmanoma, pasikliauti automatiniu grupavimu.

import { flushSync } from 'react-dom';

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

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

  return (<button onClick={handleClick}>Increment</button>);
}

Šiame pavyzdyje flushSync priverčia React nedelsiant atnaujinti būseną ir pervaizduoti komponentą, apeinant automatinį grupavimą.

Geriausios būsenos atnaujinimų optimizavimo praktikos

Nors automatinis grupavimas žymiai pagerina našumą, vis tiek svarbu laikytis geriausių būsenos atnaujinimų optimizavimo praktikų:

• Naudokite funkcinius atnaujinimus: Kai atnaujinate būseną remdamiesi ankstesne būsena, naudokite funkcinius atnaujinimus (t. y. perduokite funkciją būsenos nustatymo funkcijai), kad išvengtumėte problemų su pasenusia būsena.
• Venkite nereikalingų būsenos atnaujinimų: Atnaujinkite būseną tik tada, kai tai būtina. Venkite atnaujinti būseną ta pačia reikšme.
• Memoizuokite komponentus: Naudokite React.memo komponentų memoizavimui, kad išvengtumėte nereikalingų pervaizdavimų.
• Naudokite `useCallback` ir `useMemo`: Memoizuokite funkcijas ir reikšmes, perduodamas kaip savybes (props), kad išvengtumėte nereikalingo vaikinių komponentų pervaizdavimo.
• Optimizuokite pervaizdavimus su `shouldComponentUpdate` (klasės komponentuose): Nors dabar labiau paplitę funkciniai komponentai ir „kabliukai“ (hooks), jei dirbate su senesniais klasės komponentais, įdiekite shouldComponentUpdate, kad valdytumėte, kada komponentas pervaizduojamas atsižvelgiant į savybių ir būsenos pasikeitimus.
• Profiluokite savo programą: Naudokite React DevTools programos profiliavimui ir našumo problemų nustatymui.
• Apsvarstykite nekintamumą (immutability): Elkitės su būsena kaip su nekintama, ypač dirbant su objektais ir masyvais. Kurkite naujas duomenų kopijas, užuot keitę juos tiesiogiai. Tai daro pakeitimų aptikimą efektyvesniu.

Automatinis grupavimas ir globalūs aspektai

Automatinis grupavimas, būdamas pagrindiniu React našumo optimizavimu, yra naudingas programoms visame pasaulyje, nepriklausomai nuo vartotojo vietos, tinklo greičio ar įrenginio. Tačiau jo poveikis gali būti labiau pastebimas esant lėtesniam interneto ryšiui ar mažiau galingiems įrenginiams. Tarptautinei auditorijai apsvarstykite šiuos punktus:

• Tinklo delsa: Regionuose su didele tinklo delsa, sumažinus pervaizdavimų skaičių, galima žymiai pagerinti suvokiamą programos reakcijos greitį. Automatinis grupavimas padeda sumažinti tinklo vėlavimų poveikį.
• Įrenginio galimybės: Vartotojai skirtingose šalyse gali naudoti įrenginius su skirtinga apdorojimo galia. Automatinis grupavimas padeda užtikrinti sklandesnę patirtį, ypač mažesnio galingumo įrenginiuose su ribotais ištekliais.
• Sudėtingos programos: Programos su sudėtingomis vartotojo sąsajomis ir dažnais duomenų atnaujinimais labiausiai pasinaudos automatiniu grupavimu, nepriklausomai nuo vartotojo geografinės padėties.
• Prieinamumas: Pagerintas našumas reiškia geresnį prieinamumą. Sklandesnė ir greičiau reaguojanti sąsaja yra naudinga neįgaliesiems vartotojams, kurie naudojasi pagalbinėmis technologijomis.

Išvada

React automatinis grupavimas yra galinga optimizavimo technika, kuri gali žymiai pagerinti jūsų React programų našumą. Automatiškai sugrupuodama kelis būsenos atnaujinimus į vieną pervaizdavimą, ji sumažina pervaizdavimo sąnaudas, apsaugo nuo nenuoseklių būsenų ir užtikrina sklandesnę bei geriau reaguojančią vartotojo patirtį. Suprasdami, kaip veikia automatinis grupavimas, ir laikydamiesi geriausių būsenos atnaujinimų optimizavimo praktikų, galite kurti didelio našumo React programas, kurios teikia puikią vartotojo patirtį visame pasaulyje. Įrankių, tokių kaip React DevTools, naudojimas padeda toliau tobulinti ir optimizuoti jūsų programos našumo profilius įvairiose pasaulinėse aplinkose.