React Render: Komponentide renderdamine ja elutsükli haldamine

React, populaarne JavaScripti teek kasutajaliideste loomiseks, tugineb tõhusale renderdamisprotsessile komponentide kuvamiseks ja uuendamiseks. Mõistmine, kuidas React komponente renderdab, nende elutsükleid haldab ja jõudlust optimeerib, on ülioluline robustsete ja skaleeritavate rakenduste ehitamiseks. See põhjalik juhend uurib neid kontseptsioone üksikasjalikult, pakkudes praktilisi näiteid ja parimaid praktikaid arendajatele üle maailma.

Reacti renderdamisprotsessi mõistmine

Reacti toimimise tuumaks on selle komponendipõhine arhitektuur ja virtuaalne DOM. Kui komponendi olek või propsid muutuvad, ei manipuleeri React otse tegelikku DOM-i. Selle asemel loob see DOM-i virtuaalse esituse, mida nimetatakse virtuaalseks DOM-iks. Seejärel võrdleb React virtuaalset DOM-i eelmise versiooniga ja tuvastab minimaalse muudatuste hulga, mis on vajalik tegeliku DOM-i uuendamiseks. Seda protsessi, mida tuntakse kui lepitamist (reconciliation), parandab oluliselt jõudlust.

Virtuaalne DOM ja lepitamine

Virtuaalne DOM on kerge, mälus hoitav esitus tegelikust DOM-ist. Seda on palju kiirem ja tõhusam manipuleerida kui päris DOM-i. Kui komponent uueneb, loob React uue virtuaalse DOM-i puu ja võrdleb seda eelmise puuga. See võrdlus võimaldab Reactil kindlaks teha, millised konkreetsed sõlmed tegelikus DOM-is vajavad uuendamist. React rakendab seejärel need minimaalsed uuendused päris DOM-ile, tulemuseks on kiirem ja parema jõudlusega renderdamisprotsess.

Vaatleme seda lihtsustatud näidet:

Stsenaarium: Nupuvajutus uuendab ekraanil kuvatavat loendurit.

Ilma Reactita: Iga klõps võib käivitada täieliku DOM-i uuenduse, renderdades uuesti kogu lehe või suured osad sellest, mis viib aeglase jõudluseni.

Reactiga: Uuendatakse ainult loenduri väärtust virtuaalses DOM-is. Lepitamisprotsess tuvastab selle muudatuse ja rakendab selle vastavale sõlmele tegelikus DOM-is. Ülejäänud leht jääb muutumatuks, tulemuseks on sujuv ja reageeriv kasutajakogemus.

Kuidas React muudatusi tuvastab: Diffing-algoritm

Reacti diffing-algoritm on lepitamisprotsessi süda. See võrdleb uut ja vana virtuaalse DOM-i puud, et tuvastada erinevused. Algoritm teeb võrdluse optimeerimiseks mitmeid eeldusi:

• Kaks erinevat tüüpi elementi loovad erinevad puud. Kui juurelementidel on erinevad tüübid (nt <div> muutmine <span>-iks), eemaldab React vana puu ja ehitab uue puu nullist üles.
• Kahe sama tüüpi elemendi võrdlemisel vaatab React nende atribuute, et teha kindlaks, kas on muudatusi. Kui on muutunud ainult atribuudid, uuendab React olemasoleva DOM-sõlme atribuute.
• React kasutab key-proppi loendiüksuste unikaalseks tuvastamiseks. key-propi pakkumine võimaldab Reactil loendeid tõhusalt uuendada ilma kogu loendit uuesti renderdamata.

Nende eelduste mõistmine aitab arendajatel kirjutada tõhusamaid Reacti komponente. Näiteks on loendite renderdamisel võtmete (keys) kasutamine jõudluse seisukohast ülioluline.

Reacti komponendi elutsükkel

Reacti komponentidel on täpselt määratletud elutsükkel, mis koosneb reast meetoditest, mida kutsutakse välja komponendi eluea kindlatel hetkedel. Nende elutsükli meetodite mõistmine võimaldab arendajatel kontrollida, kuidas komponente renderdatakse, uuendatakse ja eemaldatakse. Hookide tulekuga on elutsükli meetodid endiselt asjakohased ja nende aluspõhimõtete mõistmine on kasulik.

Elutsükli meetodid klassikomponentides

Klassipõhistes komponentides kasutatakse elutsükli meetodeid koodi käivitamiseks komponendi eluea erinevates etappides. Siin on ülevaade peamistest elutsükli meetoditest:

• constructor(props): Kutsutakse välja enne komponendi paigaldamist (mounting). Seda kasutatakse oleku lähtestamiseks ja sündmuste käsitlejate sidumiseks.
• static getDerivedStateFromProps(props, state): Kutsutakse välja enne renderdamist, nii esmasel paigaldamisel kui ka järgnevatel uuendustel. See peaks tagastama objekti oleku uuendamiseks või null, et näidata, et uued propsid ei vaja oleku uuendusi. See meetod soodustab prognoositavaid oleku uuendusi, mis põhinevad propide muudatustel.
• render(): Kohustuslik meetod, mis tagastab renderdatava JSX-i. See peaks olema propside ja oleku puhas funktsioon.
• componentDidMount(): Kutsutakse välja kohe pärast komponendi paigaldamist (puusse lisamist). See on hea koht kõrvalmõjude teostamiseks, näiteks andmete hankimiseks või tellimuste (subscriptions) seadistamiseks.
• shouldComponentUpdate(nextProps, nextState): Kutsutakse välja enne renderdamist, kui vastu võetakse uusi propse või olekut. See võimaldab optimeerida jõudlust, vältides mittevajalikke uuesti renderdamisi. Peaks tagastama true, kui komponent peaks uuendama, või false, kui ei peaks.
• getSnapshotBeforeUpdate(prevProps, prevState): Kutsutakse välja vahetult enne DOM-i uuendamist. Kasulik info (nt kerimisasendi) püüdmiseks DOM-ist enne selle muutumist. Tagastatud väärtus edastatakse parameetrina meetodile componentDidUpdate().
• componentDidUpdate(prevProps, prevState, snapshot): Kutsutakse välja kohe pärast uuenduse toimumist. See on hea koht DOM-operatsioonide teostamiseks pärast komponendi uuendamist.
• componentWillUnmount(): Kutsutakse välja vahetult enne komponendi eemaldamist ja hävitamist. See on hea koht ressursside puhastamiseks, näiteks sündmuste kuulajate eemaldamiseks või võrgupäringute tühistamiseks.
• static getDerivedStateFromError(error): Kutsutakse välja pärast renderdamisel tekkinud viga. See saab vea argumendina ja peaks tagastama väärtuse oleku uuendamiseks. See võimaldab komponendil kuvada varu-kasutajaliidest (fallback UI).
• componentDidCatch(error, info): Kutsutakse välja pärast renderdamisel tekkinud viga alamkomponendis. See saab argumendina vea ja komponendi pinu info. See on hea koht vigade logimiseks vearaportiteenusesse.

Elutsükli meetodite näide praktikas

Vaatleme komponenti, mis hangib andmeid API-st, kui see paigaldatakse, ja uuendab andmeid, kui selle propsid muutuvad:

class DataFetcher extends React.Component {
  constructor(props) {
    super(props);
    this.state = { data: null };
  }

  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (this.props.url !== prevProps.url) {
      this.fetchData();
    }
  }

  fetchData = async () => {
    try {
      const response = await fetch(this.props.url);
      const data = await response.json();
      this.setState({ data });
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  render() {
    if (!this.state.data) {
      return <p>Loading...</p>;
    }

    return <div>{this.state.data.message}</div>;
  }
}

Selles näites:

• componentDidMount() hangib andmeid, kui komponent esmakordselt paigaldatakse.
• componentDidUpdate() hangib andmeid uuesti, kui url-propp muutub.
• render() meetod kuvab laadimisteate, kuni andmeid hangitakse, ja seejärel renderdab andmed, kui need on saadaval.

Elutsükli meetodid ja veakäsitlus

React pakub ka elutsükli meetodeid renderdamise ajal tekkivate vigade käsitlemiseks:

• static getDerivedStateFromError(error): Kutsutakse välja pärast renderdamisel tekkinud viga. See saab vea argumendina ja peaks tagastama väärtuse oleku uuendamiseks. See võimaldab komponendil kuvada varu-kasutajaliidest.
• componentDidCatch(error, info): Kutsutakse välja pärast renderdamisel tekkinud viga alamkomponendis. See saab argumendina vea ja komponendi pinu info. See on hea koht vigade logimiseks vearaportiteenusesse.

Need meetodid võimaldavad teil vigu sujuvalt käsitleda ja vältida rakenduse kokkujooksmist. Näiteks saate kasutada getDerivedStateFromError(), et kuvada kasutajale veateade, ja componentDidCatch(), et logida viga serverisse.

Hookid ja funktsionaalsed komponendid

Reacti hookid, mis toodi sisse React 16.8-s, pakuvad võimalust kasutada olekut ja muid Reacti funktsioone funktsionaalsetes komponentides. Kuigi funktsionaalsetel komponentidel pole elutsükli meetodeid samamoodi nagu klassikomponentidel, pakuvad hookid samaväärset funktsionaalsust.

• useState(): Võimaldab lisada oleku funktsionaalsetele komponentidele.
• useEffect(): Võimaldab teostada kõrvalmõjusid funktsionaalsetes komponentides, sarnaselt componentDidMount(), componentDidUpdate() ja componentWillUnmount() meetoditele.
• useContext(): Võimaldab juurdepääsu Reacti kontekstile.
• useReducer(): Võimaldab hallata keerulist olekut reduktorfunktsiooni abil.
• useCallback(): Tagastab funktsiooni memoiseeritud versiooni, mis muutub ainult siis, kui mõni sõltuvus on muutunud.
• useMemo(): Tagastab memoiseeritud väärtuse, mida arvutatakse uuesti ainult siis, kui mõni sõltuvus on muutunud.
• useRef(): Võimaldab säilitada väärtusi renderduste vahel.
• useImperativeHandle(): Kohandab eksemplari väärtust, mis on vanemkomponentidele ref-i kasutamisel nähtav.
• useLayoutEffect(): useEffect-i versioon, mis käivitub sünkroonselt pärast kõiki DOM-i mutatsioone.
• useDebugValue(): Kasutatakse kohandatud hookide väärtuse kuvamiseks React DevTools'is.

useEffect hooki näide

Siin on, kuidas saate kasutada useEffect() hooki andmete hankimiseks funktsionaalses komponendis:

import React, { useState, useEffect } from 'react';

function DataFetcher({ url }) {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch(url);
        const json = await response.json();
        setData(json);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    }

    fetchData();
  }, [url]); // Käivita efekt uuesti ainult siis, kui URL muutub

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

  return <div>{data.message}</div>;
}

Selles näites:

• useEffect() hangib andmeid, kui komponent esmakordselt renderdatakse ja iga kord, kui url-propp muutub.
• useEffect() teine argument on sõltuvuste massiiv. Kui mõni sõltuvus muutub, käivitatakse efekt uuesti.
• useState() hooki kasutatakse komponendi oleku haldamiseks.

Reacti renderdamise jõudluse optimeerimine

Tõhus renderdamine on jõudluspõhiste Reacti rakenduste ehitamisel ülioluline. Siin on mõned tehnikad renderdamise jõudluse optimeerimiseks:

1. Mittevajalike uuesti renderdamiste vältimine

Üks tõhusamaid viise renderdamise jõudluse optimeerimiseks on vältida mittevajalikke uuesti renderdamisi. Siin on mõned tehnikad selleks:

• Kasutades React.memo(): React.memo() on kõrgema järgu komponent, mis memoiseerib funktsionaalse komponendi. See renderdab komponendi uuesti ainult siis, kui selle propsid on muutunud.
• Implementeerides shouldComponentUpdate(): Klassikomponentides saate implementeerida shouldComponentUpdate() elutsükli meetodi, et vältida uuesti renderdamisi, mis põhinevad propide või oleku muudatustel.
• Kasutades useMemo() ja useCallback(): Neid hooke saab kasutada väärtuste ja funktsioonide memoiseerimiseks, vältides mittevajalikke uuesti renderdamisi.
• Kasutades muutumatuid andmestruktuure: Muutumatud andmestruktuurid tagavad, et andmete muutmisel luuakse uusi objekte, mitte ei muudeta olemasolevaid. See teeb muudatuste tuvastamise ja mittevajalike uuesti renderdamiste vältimise lihtsamaks.

2. Koodi tükeldamine (Code-Splitting)

Koodi tükeldamine on protsess, mille käigus jagatakse rakendus väiksemateks tükkideks, mida saab laadida vastavalt vajadusele. See võib oluliselt vähendada teie rakenduse esialgset laadimisaega.

React pakub mitmeid viise koodi tükeldamise implementeerimiseks:

• Kasutades React.lazy() ja Suspense: Need funktsioonid võimaldavad teil komponente dünaamiliselt importida, laadides neid ainult siis, kui neid vaja on.
• Kasutades dünaamilisi importe: Saate kasutada dünaamilisi importe moodulite laadimiseks vastavalt vajadusele.

3. Loendi virtualiseerimine

Suurte loendite renderdamisel võib kõigi elementide korraga renderdamine olla aeglane. Loendi virtualiseerimise tehnikad võimaldavad teil renderdada ainult neid elemente, mis on hetkel ekraanil nähtavad. Kui kasutaja kerib, renderdatakse uued elemendid ja vanad elemendid eemaldatakse.

On mitmeid teeke, mis pakuvad loendi virtualiseerimise komponente, näiteks:

• react-window
• react-virtualized

4. Piltide optimeerimine

Pildid võivad sageli olla oluline jõudlusprobleemide allikas. Siin on mõned näpunäited piltide optimeerimiseks:

• Kasutage optimeeritud pildivorminguid: Kasutage vorminguid nagu WebP parema tihenduse ja kvaliteedi saavutamiseks.
• Muutke piltide suurust: Muutke piltide suurust vastavalt nende kuvamissuurusele.
• Laadige pilte laisalt (Lazy loading): Laadige pilte ainult siis, kui need on ekraanil nähtavad.
• Kasutage CDN-i: Kasutage sisuedastusvõrku (CDN), et serveerida pilte serveritest, mis on teie kasutajatele geograafiliselt lähemal.

5. Profileerimine ja silumine

React pakub tööriistu renderdamise jõudluse profileerimiseks ja silumiseks. React Profiler võimaldab teil salvestada ja analüüsida renderdamise jõudlust, tuvastades komponente, mis põhjustavad jõudluse kitsaskohti.

React DevTools brauserilaiendus pakub tööriistu Reacti komponentide, oleku ja propside kontrollimiseks.

Praktilised näited ja parimad praktikad

Näide: funktsionaalse komponendi memoiseerimine

Vaatleme lihtsat funktsionaalset komponenti, mis kuvab kasutaja nime:

function UserProfile({ user }) {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
}

Et vältida selle komponendi mittevajalikku uuesti renderdamist, saate kasutada React.memo():

import React from 'react';

const UserProfile = React.memo(({ user }) => {
  console.log('Rendering UserProfile');
  return <div>{user.name}</div>;
});

Nüüd renderdatakse UserProfile uuesti ainult siis, kui user-propp muutub.

Näide: useCallback() kasutamine

Vaatleme komponenti, mis edastab tagasikutsefunktsiooni alamkomponendile:

import React, { useState } from 'react';

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

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

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

Selles näites luuakse handleClick-funktsioon uuesti iga ParentComponent-i renderdamisega. See põhjustab ChildComponent-i mittevajaliku uuesti renderdamise, isegi kui selle propsid pole muutunud.

Selle vältimiseks saate kasutada useCallback(), et memoiseerida handleClick-funktsioon:

import React, { useState, useCallback } from 'react';

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

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]); // Loo funktsioon uuesti ainult siis, kui count muutub

  return (
    <div>
      <ChildComponent onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

function ChildComponent({ onClick }) {
  console.log('Rendering ChildComponent');
  return <button onClick={onClick}>Click me</button>;
}

Nüüd luuakse handleClick-funktsioon uuesti ainult siis, kui count-olek muutub.

Näide: useMemo() kasutamine

Vaatleme komponenti, mis arvutab tuletatud väärtuse oma propside põhjal:

import React, { useState } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = items.filter(item => item.name.includes(filter));

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Selles näites arvutatakse filteredItems-massiiv uuesti iga MyComponent-i renderdamisega, isegi kui items-propp pole muutunud. See võib olla ebaefektiivne, kui items-massiiv on suur.

Selle vältimiseks saate kasutada useMemo(), et memoiseerida filteredItems-massiiv:

import React, { useState, useMemo } from 'react';

function MyComponent({ items }) {
  const [filter, setFilter] = useState('');

  const filteredItems = useMemo(() => {
    return items.filter(item => item.name.includes(filter));
  }, [items, filter]); // Arvuta uuesti ainult siis, kui items või filter muutub

  return (
    <div>
      <input type="text" value={filter} onChange={e => setFilter(e.target.value)} />
      <ul>
        {filteredItems.map(item => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

Nüüd arvutatakse filteredItems-massiiv uuesti ainult siis, kui items-propp või filter-olek muutub.

Kokkuvõte

Reacti renderdamisprotsessi ja komponendi elutsükli mõistmine on oluline jõudluspõhiste ja hooldatavate rakenduste ehitamiseks. Kasutades tehnikaid nagu memoiseerimine, koodi tükeldamine ja loendi virtualiseerimine, saavad arendajad optimeerida renderdamise jõudlust ja luua sujuva ning reageeriva kasutajakogemuse. Hookide tulekuga on oleku ja kõrvalmõjude haldamine funktsionaalsetes komponentides muutunud lihtsamaks, suurendades veelgi Reacti arenduse paindlikkust ja võimsust. Olenemata sellest, kas ehitate väikest veebirakendust või suurt ettevõtte süsteemi, parandab Reacti renderdamiskontseptsioonide valdamine oluliselt teie võimet luua kvaliteetseid kasutajaliideseid.

Lisamaterjalid

• Reacti dokumentatsioon: elementide renderdamine
• Reacti dokumentatsioon: olek ja elutsükkel
• Reacti dokumentatsioon: sissejuhatus hookidesse
• Reacti dokumentatsioon: jõudluse optimeerimine