Maksimalaus našumo pasiekimas: išsami „React Profiler“ API apžvalga

Šiuolaikinio interneto programavimo pasaulyje vartotojo patirtis yra svarbiausia. Sklandi, greitai reaguojanti sąsaja gali būti lemiamas veiksnys tarp patenkinto ir nusivylusio vartotojo. Programuotojams, naudojantiems „React“, kurti sudėtingas ir dinamiškas vartotojo sąsajas yra lengviau nei bet kada anksčiau. Tačiau, kai programos tampa sudėtingesnės, didėja ir našumo problemų rizika – subtilūs neefektyvumai, kurie gali lemti lėtą sąveiką, trūkinėjančias animacijas ir apskritai prastą vartotojo patirtį. Būtent čia „React Profiler“ API tampa nepakeičiamu įrankiu programuotojo arsenale.

Šis išsamus vadovas leis jums nuodugniai susipažinti su „React Profiler“. Išsiaiškinsime, kas tai yra, kaip efektyviai jį naudoti tiek per „React DevTools“, tiek per jo programinę API, ir, svarbiausia, kaip interpretuoti jo rezultatus, siekiant diagnozuoti ir išspręsti įprastas našumo problemas. Pabaigoje būsite pasirengę paversti našumo analizę iš bauginančios užduoties į sistemingą ir naudingą savo programavimo proceso dalį.

Kas yra „React Profiler“ API?

„React Profiler“ yra specializuotas įrankis, skirtas padėti programuotojams matuoti „React“ programos našumą. Jo pagrindinė funkcija – rinkti laiko informaciją apie kiekvieną komponentą, kuris yra vaizduojamas jūsų programoje, leidžiant jums nustatyti, kurios jūsų programos dalys yra brangios vaizduoti ir gali sukelti našumo problemų.

Jis atsako į svarbiausius klausimus, pavyzdžiui:

• Kiek laiko užtrunka suvaizduoti konkretų komponentą?
• Kiek kartų komponentas pervaizduojamas vartotojo sąveikos metu?
• Kodėl konkretus komponentas buvo pervaizduotas?

Svarbu atskirti „React Profiler“ nuo bendrosios paskirties naršyklės našumo įrankių, tokių kaip „Performance“ skirtukas „Chrome DevTools“ ar „Lighthouse“. Nors šie įrankiai puikiai tinka bendram puslapio įkėlimo laikui, tinklo užklausoms ir scenarijų vykdymo laikui matuoti, „React Profiler“ suteikia jums sutelktą, komponentų lygio našumo vaizdą React ekosistemos viduje. Jis supranta „React“ gyvavimo ciklą ir gali nustatyti neefektyvumus, susijusius su būsenos (state), savybių (props) ir konteksto (context) pasikeitimais, kurių kiti įrankiai nemato.

„Profiler“ yra prieinamas dviem pagrindinėmis formomis:

1. „React DevTools“ plėtinys: patogi, grafinė sąsaja, integruota tiesiai į jūsų naršyklės programuotojo įrankius. Tai yra labiausiai paplitęs būdas pradėti profiliavimą.
2. Programinis `` komponentas: komponentas, kurį galite pridėti tiesiai į savo JSX kodą, kad programiškai rinktumėte našumo matavimus, o tai naudinga automatizuotam testavimui ar metrikų siuntimui į analizės paslaugą.

Svarbu paminėti, kad „Profiler“ yra skirtas kūrimo aplinkoms. Nors egzistuoja speciali gamybinė versija (production build) su įjungtu profiliavimu, standartinėje „React“ gamybinėje versijoje ši funkcija yra pašalinta, kad biblioteka būtų kuo lengvesnė ir greitesnė jūsų galutiniams vartotojams.

Darbo pradžia: kaip naudoti „React Profiler“

Pereikime prie praktikos. Programos profiliavimas yra paprastas procesas, o abiejų metodų supratimas suteiks jums maksimalų lankstumą.

1 metodas: „React DevTools“ profiliavimo skirtukas

Daugumai kasdienių našumo derinimo užduočių „Profiler“ skirtukas „React DevTools“ yra jūsų pagrindinis įrankis. Jei jo neturite įdiegę, tai yra pirmas žingsnis – įsidiekite plėtinį savo pasirinktai naršyklei („Chrome“, „Firefox“, „Edge“).

Štai žingsnis po žingsnio vadovas, kaip atlikti pirmąją profiliavimo sesiją:

1. Atidarykite savo programą: eikite į savo „React“ programą, veikiančią kūrimo režimu. Žinosite, kad „DevTools“ yra aktyvūs, jei naršyklės plėtinių juostoje matysite „React“ piktogramą.
2. Atidarykite programuotojo įrankius: atidarykite savo naršyklės programuotojo įrankius (dažniausiai su F12 arba Ctrl+Shift+I / Cmd+Option+I) ir raskite skirtuką „Profiler“. Jei turite daug skirtukų, jis gali būti paslėptas po „»“ rodykle.
3. Pradėkite profiliavimą: „Profiler“ sąsajoje pamatysite mėlyną apskritimą (įrašymo mygtuką). Spustelėkite jį, kad pradėtumėte rinkti našumo duomenis.
4. Sąveikaukite su savo programa: atlikite veiksmą, kurį norite išmatuoti. Tai gali būti bet kas – nuo puslapio įkėlimo, mygtuko paspaudimo, kuris atidaro modalinį langą, teksto įvedimo į formą ar didelio sąrašo filtravimo. Tikslas yra atkurti vartotojo sąveiką, kuri atrodo lėta.
5. Sustabdykite profiliavimą: kai baigsite sąveiką, dar kartą spustelėkite įrašymo mygtuką (dabar jis bus raudonas), kad sustabdytumėte sesiją.

Štai ir viskas! „Profiler“ apdoros surinktus duomenis ir pateiks jums išsamią vizualizaciją apie jūsų programos vaizdavimo našumą per tą sąveiką.

2 metodas: programinis `Profiler` komponentas

Nors „DevTools“ puikiai tinka interaktyviam derinimui, kartais reikia rinkti našumo duomenis automatiškai. `` komponentas, eksportuojamas iš `react` paketo, leidžia tai padaryti.

Galite apgaubti bet kurią savo komponentų medžio dalį `` komponentu. Jam reikia dviejų savybių (props):

• `id` (string): unikalus identifikatorius medžio daliai, kurią profiliuojate. Tai padeda atskirti matavimus iš skirtingų profiliuotojų.
• `onRender` (function): atgalinio iškvietimo funkcija (callback), kurią „React“ iškviečia kiekvieną kartą, kai profiliuojamame medyje esantis komponentas „pateikia“ (commits) atnaujinimą.

Štai kodo pavyzdys:

import React, { Profiler } from 'react';

// onRender atgalinio iškvietimo funkcija
function onRenderCallback(
  id, // Profiler medžio, kuris ką tik buvo pateiktas, "id" savybė
  phase, // "mount" (jei medis ką tik buvo prijungtas) arba "update" (jei jis buvo pervaizduotas)
  actualDuration, // laikas, praleistas vaizduojant pateiktą atnaujinimą
  baseDuration, // numatomas laikas visam submedžiui suvaizduoti be memoizacijos
  startTime, // kada React pradėjo vaizduoti šį atnaujinimą
  commitTime, // kada React pateikė šį atnaujinimą
  interactions // sąveikų rinkinys, kuris sukėlė atnaujinimą
) {
  // Galite registruoti šiuos duomenis, siųsti juos į analizės tašką arba juos kaupti.
  console.log({
    id,
    phase,
    actualDuration,
    baseDuration,
    startTime,
    commitTime,
  });
}

function App() {
  return (
    

      
        
      
      

        
          
        
      
    
  );
}

`onRender` atgalinio iškvietimo parametrų supratimas:

• `id`: eilutės tipo `id`, kurį perdavėte `` komponentui.
• `phase`: arba `"mount"` (komponentas buvo prijungtas pirmą kartą), arba `"update"` (jis buvo pervaizduotas dėl savybių (props), būsenos (state) ar "kabliukų" (hooks) pakeitimų).
• `actualDuration`: laikas milisekundėmis, kurio prireikė suvaizduoti `` ir jo palikuonis šiam konkrečiam atnaujinimui. Tai yra jūsų pagrindinė metrika lėtiems vaizdavimams nustatyti.
• `baseDuration`: įvertinimas, kiek laiko užtruktų suvaizduoti visą submedį nuo nulio. Tai yra „blogiausio atvejo“ scenarijus ir naudingas suprantant bendrą komponentų medžio sudėtingumą. Jei `actualDuration` yra daug mažesnis nei `baseDuration`, tai rodo, kad optimizacijos, tokios kaip memoizacija, veikia efektyviai.
• `startTime` ir `commitTime`: laiko žymos, kada „React“ pradėjo vaizduoti ir kada pateikė atnaujinimą į DOM. Jos gali būti naudojamos našumui stebėti laikui bėgant.
• `interactions`: „sąveikų“ rinkinys, kuris buvo sekamas, kai buvo suplanuotas atnaujinimas (tai yra eksperimentinės API dalis, skirta atnaujinimų priežasčiai sekti).

„Profiler“ rezultatų interpretavimas: ekskursija su gidu

Kai sustabdote įrašymo sesiją „React DevTools“, jums pateikiama daugybė informacijos. Išskaidykime pagrindines sąsajos dalis.

Pateikimų (Commits) parinkiklis

Profiliavimo įrankio viršuje pamatysite stulpelinę diagramą. Kiekvienas stulpelis šioje diagramoje reiškia vieną „pateikimą“ (commit), kurį „React“ atliko į DOM jūsų įrašymo metu. Stulpelio aukštis ir spalva rodo, kiek laiko užtruko tas pateikimas – aukštesni, geltoni/oranžiniai stulpeliai yra brangesni nei trumpesni, mėlyni/žali stulpeliai. Galite spustelėti šiuos stulpelius, kad išnagrinėtumėte kiekvieno konkretaus vaizdavimo ciklo detales.

„Flamegraph“ diagrama

Tai yra galingiausia vizualizacija. Pasirinktam pateikimui „flamegraph“ diagrama parodo, kurie jūsų programos komponentai buvo suvaizduoti. Štai kaip ją skaityti:

• Komponentų hierarchija: diagrama yra struktūrizuota kaip jūsų komponentų medis. Viršuje esantys komponentai iškvietė žemiau esančius komponentus.
• Vaizdavimo laikas: komponento juostos plotis atitinka tai, kiek laiko jis ir jo vaikiniai elementai užtruko vaizduoti. Platesnės juostos yra tos, kurias turėtumėte tirti pirmiausia.
• Spalvų kodavimas: juostos spalva taip pat rodo vaizdavimo laiką, nuo šaltų spalvų (mėlyna, žalia) greitiems vaizdavimams iki šiltų spalvų (geltona, oranžinė, raudona) lėtiems.
• Pilki komponentai: pilka juosta reiškia, kad komponentas nebuvo pervaizduotas šio konkretaus pateikimo metu. Tai puikus ženklas! Tai reiškia, kad jūsų memoizacijos strategijos tikriausiai veikia tam komponentui.

Rikiuota diagrama (Ranked Chart)

Jei „flamegraph“ diagrama atrodo per sudėtinga, galite pereiti į rikiuotos diagramos rodinį. Šis rodinys tiesiog išvardija visus komponentus, kurie buvo suvaizduoti per pasirinktą pateikimą, surikiuotus pagal tai, kuris užtruko ilgiausiai. Tai fantastiškas būdas nedelsiant nustatyti jūsų brangiausius komponentus.

Komponento informacijos sritis

Kai spustelite konkretų komponentą „Flamegraph“ arba rikiuotoje diagramoje, dešinėje pasirodo informacijos sritis. Čia rasite naudingiausią informaciją:

• Vaizdavimo trukmės: rodomos `actualDuration` ir `baseDuration` tam komponentui pasirinktame pateikime.
• „Rendered at“ (Suvaizduota): čia išvardijami visi pateikimai, kuriuose šis komponentas buvo suvaizduotas, leidžiant greitai pamatyti, kaip dažnai jis atsinaujina.
• „Why did this render?“ (Kodėl tai buvo suvaizduota?): tai dažnai yra vertingiausia informacija. „React DevTools“ stengsis kuo geriau pasakyti, kodėl komponentas buvo pervaizduotas. Dažniausios priežastys:
  • Pasikeitė savybės (props)
  • Pasikeitė "kabliukai" (hooks) (pvz., buvo atnaujinta `useState` arba `useReducer` reikšmė)
  • Buvo suvaizduotas tėvinis komponentas (tai dažna nereikalingų pervaizdavimų vaikiniuose komponentuose priežastis)
  • Pasikeitė kontekstas (context)

Dažniausios našumo problemos ir kaip jas išspręsti

Dabar, kai žinote, kaip rinkti ir skaityti našumo duomenis, išnagrinėkime įprastas problemas, kurias „Profiler“ padeda atskleisti, ir standartinius „React“ modelius joms išspręsti.

1 problema: nereikalingi pervaizdavimai

Tai yra bene dažniausia našumo problema „React“ programose. Ji atsiranda, kai komponentas pervaizduojamas, nors jo išvestis būtų lygiai tokia pati. Tai eikvoja procesoriaus ciklus ir gali padaryti jūsų sąsają lėtą.

Diagnozė:

• „Profiler“ įrankyje matote, kad komponentas vaizduojamas labai dažnai per daugelį pateikimų.
• Skyrius „Why did this render?“ nurodo, kad taip yra todėl, kad buvo pervaizduotas jo tėvinis komponentas, nors jo paties savybės (props) nepasikeitė.
• Daugelis komponentų „flamegraph“ diagramoje yra spalvoti, nors pasikeitė tik maža dalis būsenos, nuo kurios jie priklauso.

1 sprendimas: `React.memo()`

`React.memo` yra aukštesnės eilės komponentas (HOC), kuris memoizuoja jūsų komponentą. Jis atlieka seklų komponento ankstesnių ir naujų savybių (props) palyginimą. Jei savybės yra tokios pačios, „React“ praleis komponento pervaizdavimą ir naudos paskutinį suvaizduotą rezultatą.

Prieš `React.memo`:**

function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
}

// Tėviniame komponente:
// Jei tėvinis komponentas pervaizduojamas dėl bet kokios priežasties (pvz., keičiasi jo būsena),
// UserAvatar bus pervaizduotas, net jei userName ir avatarUrl yra identiški.

import React from 'react';

const UserAvatar = React.memo(function UserAvatar({ userName, avatarUrl }) {
  console.log(`Rendering UserAvatar for ${userName}`)
  return ;
});

// Dabar UserAvatar bus pervaizduotas TIK tada, kai iš tikrųjų pasikeis userName arba avatarUrl savybės.

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

  // Ši funkcija sukuriama iš naujo kiekvieną kartą, kai vaizduojamas ParentComponent
  const handleItemClick = (id) => {
    console.log('Clicked item', id);
  };

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* MemoizedListItem bus pervaizduotas kiekvieną kartą, kai pasikeis count, nes handleItemClick yra nauja funkcija */}
      
    
  );
}

import { useState, useCallback } from 'react';

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

  // Ši funkcija dabar yra memoizuota ir nebus sukuriama iš naujo, nebent pasikeis jos priklausomybės (tuščias masyvas).
  const handleItemClick = useCallback((id) => {
    console.log('Clicked item', id);
  }, []); // Tuščias priklausomybių masyvas reiškia, kad ji sukuriama tik vieną kartą

  return (
    

       setCount(c => c + 1)}>Increment {count}
      {/* Dabar MemoizedListItem NEBUS pervaizduotas, kai pasikeis count */}
      
    
  );
}

function ProductList({ products, filterTerm }) {
  // Ši brangi filtravimo operacija vykdoma KIEKVIENĄ ProductList vaizdavimą,
  // net jei pasikeitė tik nesusijusi savybė.
  const visibleProducts = products.filter(p => p.name.includes(filterTerm));

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

import { useMemo } from 'react';

function ProductList({ products, filterTerm }) {
  // Šis skaičiavimas dabar vykdomas tik tada, kai pasikeičia `products` arba `filterTerm`.
  const visibleProducts = useMemo(() => {
    return products.filter(p => p.name.includes(filterTerm));
  }, [products, filterTerm]);

  return (
    

      {visibleProducts.map(p => 
{p.name}
)}
    
  );
}

// AppContext.js
const AppContext = createContext({ 
  currentUser: null, 
  theme: 'light', 
  language: 'en',
  setTheme: () => {}, 
  // ... ir dar 20 kitų reikšmių
});

// MyComponent.js
// Šiam komponentui reikia tik currentUser, bet jis bus pervaizduotas, kai pasikeis tema!
const { currentUser } = useContext(AppContext);

// UserContext.js
const UserContext = createContext(null);

// ThemeContext.js
const ThemeContext = createContext({ theme: 'light', setTheme: () => {} });

// MyComponent.js
// Šis komponentas dabar pervaizduojamas TIK tada, kai pasikeičia currentUser.
const currentUser = useContext(UserContext);

// webpack.config.js
module.exports = {
  // ... kita konfigūracija
  resolve: {
    alias: {
      'react-dom$': 'react-dom/profiling',
    },
  },
};