React Effect tīrīšana: Atmiņas noplūdes novēršanas apgūšana

React useEffect āķis (hook) ir spēcīgs rīks blakusefektu pārvaldīšanai jūsu funkcionālajos komponentos. Tomēr, ja to neizmanto pareizi, tas var izraisīt atmiņas noplūdes, ietekmējot jūsu lietojumprogrammas veiktspēju un stabilitāti. Šis visaptverošais ceļvedis iedziļināsies React effect tīrīšanas sarežģītībā, sniedzot jums zināšanas un praktiskus piemērus, kā novērst atmiņas noplūdes un rakstīt robustākas React lietojumprogrammas.

Kas ir atmiņas noplūdes un kāpēc tās ir sliktas?

Atmiņas noplūde notiek, kad jūsu lietojumprogramma piešķir atmiņu, bet nespēj to atbrīvot atpakaļ sistēmā, kad tā vairs nav nepieciešama. Laika gaitā šie neatbrīvotie atmiņas bloki uzkrājas, patērējot arvien vairāk sistēmas resursu. Tīmekļa lietojumprogrammās atmiņas noplūdes var izpausties kā:

Lēna veiktspēja: Lietojumprogrammai patērējot vairāk atmiņas, tā kļūst gausa un nereaģējoša.
Avārijas: Galu galā lietojumprogrammai var pietrūkt atmiņas un tā var avarēt, radot sliktu lietotāja pieredzi.
Negaidīta uzvedība: Atmiņas noplūdes var izraisīt neparedzamu uzvedību un kļūdas jūsu lietojumprogrammā.

React vidē atmiņas noplūdes bieži rodas useEffect āķos, strādājot ar asinhronām operācijām, abonementiem vai notikumu klausītājiem. Ja šīs operācijas netiek pareizi "iztīrītas", kad komponents tiek demontēts vai pārrenderēts, tās var turpināt darboties fonā, patērējot resursus un potenciāli radot problēmas.

`useEffect` un blakusefektu izpratne

Pirms iedziļināmies efekta tīrīšanā, īsi apskatīsim useEffect mērķi. useEffect āķis ļauj veikt blakusefektus jūsu funkcionālajos komponentos. Blakusefekti ir operācijas, kas mijiedarbojas ar ārpasauli, piemēram:

Datu iegūšana no API
Abonementu iestatīšana (piemēram, websockets vai RxJS Observables)
Tieša DOM manipulācija
Taimeru iestatīšana (piemēram, izmantojot setTimeout vai setInterval)
Notikumu klausītāju pievienošana

useEffect āķis pieņem divus argumentus:

Funkciju, kas satur blakusefektu.
Neobligātu atkarību masīvu.

Blakusefekta funkcija tiek izpildīta pēc komponenta renderēšanas. Atkarību masīvs norāda React, kad atkārtoti palaist efektu. Ja atkarību masīvs ir tukšs ([]), efekts tiek palaists tikai vienu reizi pēc sākotnējās renderēšanas. Ja atkarību masīvs tiek izlaists, efekts tiek palaists pēc katras renderēšanas.

Efekta tīrīšanas nozīme

Galvenais veids, kā novērst atmiņas noplūdes React vidē, ir notīrīt visus blakusefektus, kad tie vairs nav nepieciešami. Šeit noder tīrīšanas funkcija. useEffect āķis ļauj atgriezt funkciju no blakusefekta funkcijas. Šī atgrieztā funkcija ir tīrīšanas funkcija, un tā tiek izpildīta, kad komponents tiek demontēts vai pirms efekta atkārtotas palaišanas (atkarību izmaiņu dēļ).

Šeit ir pamata piemērs:


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

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

  useEffect(() => {
    console.log('Efekts palaists');

    // Šī ir tīrīšanas funkcija
    return () => {
      console.log('Tīrīšana palaista');
    };
  }, []); // Tukšs atkarību masīvs: izpildās tikai vienreiz, kad komponents tiek montēts

  return (
    
      Skaits: {count}
      
    
  );
}

export default MyComponent;

Šajā piemērā console.log('Efekts palaists') izpildīsies vienu reizi, kad komponents tiks montēts. console.log('Tīrīšana palaista') izpildīsies, kad komponents tiks demontēts.

Biežākie scenāriji, kam nepieciešama efekta tīrīšana

Apskatīsim dažus biežākos scenārijus, kuros efekta tīrīšana ir izšķiroša:

1. Taimeri (`setTimeout` un `setInterval`)

Ja savā useEffect āķī izmantojat taimerus, ir būtiski tos notīrīt, kad komponents tiek demontēts. Pretējā gadījumā taimeri turpinās darboties pat pēc komponenta pazušanas, izraisot atmiņas noplūdes un potenciāli radot kļūdas. Piemēram, iedomājieties automātiski atjauninošu valūtas konvertētāju, kas regulāri iegūst valūtas kursus:


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

function CurrencyConverter() {
  const [exchangeRate, setExchangeRate] = useState(0);

  useEffect(() => {
    const intervalId = setInterval(() => {
      // Simulē valūtas kursa iegūšanu no API
      const newRate = Math.random() * 1.2;  // Piemērs: nejaušs kurss no 0 līdz 1.2
      setExchangeRate(newRate);
    }, 2000); // Atjaunināt ik pēc 2 sekundēm

    return () => {
      clearInterval(intervalId);
      console.log('Intervāls notīrīts!');
    };
  }, []);

  return (
    
      Pašreizējais valūtas kurss: {exchangeRate.toFixed(2)}
    
  );
}

export default CurrencyConverter;

Šajā piemērā setInterval tiek izmantots, lai atjauninātu exchangeRate ik pēc 2 sekundēm. Tīrīšanas funkcija izmanto clearInterval, lai apturētu intervālu, kad komponents tiek demontēts, novēršot taimera turpmāku darbību un atmiņas noplūdi.

2. Notikumu klausītāji

Pievienojot notikumu klausītājus savā useEffect āķī, jums tie ir jānoņem, kad komponents tiek demontēts. Ja to nedarīsiet, pie viena elementa var tikt piesaistīti vairāki notikumu klausītāji, kas novedīs pie negaidītas uzvedības un atmiņas noplūdēm. Piemēram, iedomājieties komponentu, kas klausās loga izmēra maiņas notikumus, lai pielāgotu savu izkārtojumu dažādiem ekrāna izmēriem:


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

function ResponsiveComponent() {
  const [windowWidth, setWindowWidth] = useState(window.innerWidth);

  useEffect(() => {
    const handleResize = () => {
      setWindowWidth(window.innerWidth);
    };

    window.addEventListener('resize', handleResize);

    return () => {
      window.removeEventListener('resize', handleResize);
      console.log('Notikumu klausītājs noņemts!');
    };
  }, []);

  return (
    
      Loga platums: {windowWidth}
    
  );
}

export default ResponsiveComponent;

Šis kods pievieno resize notikumu klausītāju logam. Tīrīšanas funkcija izmanto removeEventListener, lai noņemtu klausītāju, kad komponents tiek demontēts, novēršot atmiņas noplūdes.

3. Abonementi (Websockets, RxJS Observables, u.c.)

Ja jūsu komponents abonē datu straumi, izmantojot websockets, RxJS Observables vai citus abonēšanas mehānismus, ir ļoti svarīgi atteikties no abonementa, kad komponents tiek demontēts. Atstājot abonementus aktīvus, var rasties atmiņas noplūdes un nevajadzīga tīkla trafika. Apsveriet piemēru, kur komponents abonē websocket plūsmu reāllaika akciju cenām:


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

function StockTicker() {
  const [stockPrice, setStockPrice] = useState(0);
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    // Simulē WebSocket savienojuma izveidi
    const newSocket = new WebSocket('wss://example.com/stock-feed');
    setSocket(newSocket);

    newSocket.onopen = () => {
      console.log('WebSocket savienots');
    };

    newSocket.onmessage = (event) => {
      // Simulē akciju cenas datu saņemšanu
      const price = parseFloat(event.data);
      setStockPrice(price);
    };

    newSocket.onclose = () => {
      console.log('WebSocket atvienots');
    };

    newSocket.onerror = (error) => {
      console.error('WebSocket kļūda:', error);
    };

    return () => {
      newSocket.close();
      console.log('WebSocket aizvērts!');
    };
  }, []);

  return (
    
      Akcijas cena: {stockPrice}
    
  );
}

export default StockTicker;

Šajā scenārijā komponents izveido WebSocket savienojumu ar akciju plūsmu. Tīrīšanas funkcija izmanto socket.close(), lai aizvērtu savienojumu, kad komponents tiek demontēts, neļaujot savienojumam palikt aktīvam un izraisīt atmiņas noplūdi.

4. Datu ielāde ar AbortController

Ielādējot datus useEffect, īpaši no API, kas varētu atbildēt ar aizkavi, jums vajadzētu izmantot AbortController, lai atceltu fetch pieprasījumu, ja komponents tiek demontēts pirms pieprasījuma pabeigšanas. Tas novērš nevajadzīgu tīkla trafiku un potenciālas kļūdas, ko izraisa komponenta stāvokļa atjaunināšana pēc tā demontāžas. Šeit ir piemērs, kas ielādē lietotāja datus:


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

function UserProfile() {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/user', { signal });
        if (!response.ok) {
          throw new Error(`HTTP kļūda! statuss: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('Datu ielāde pārtraukta');
        } else {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      controller.abort();
      console.log('Datu ielāde pārtraukta!');
    };
  }, []);

  if (loading) {
    return Notiek ielāde...;
  }

  if (error) {
    return Kļūda: {error.message};
  }

  return (
    
      Lietotāja profils
      Vārds: {user.name}
      E-pasts: {user.email}
    
  );
}

export default UserProfile;

Šis kods izmanto AbortController, lai pārtrauktu fetch pieprasījumu, ja komponents tiek demontēts pirms datu saņemšanas. Tīrīšanas funkcija izsauc controller.abort(), lai atceltu pieprasījumu.

Atkarību izpratne `useEffect`

Atkarību masīvam useEffect ir izšķiroša loma, nosakot, kad efekts tiek atkārtoti palaists. Tas ietekmē arī tīrīšanas funkciju. Ir svarīgi saprast, kā darbojas atkarības, lai izvairītos no negaidītas uzvedības un nodrošinātu pareizu tīrīšanu.

Tukšs atkarību masīvs (`[]`)

Ja norādāt tukšu atkarību masīvu ([]), efekts tiek palaists tikai vienu reizi pēc sākotnējās renderēšanas. Tīrīšanas funkcija tiks palaista tikai tad, kad komponents tiek demontēts. Tas ir noderīgi blakusefektiem, kas jāiestata tikai vienu reizi, piemēram, inicializējot websocket savienojumu vai pievienojot globālu notikumu klausītāju.

Atkarības ar vērtībām

Ja norādāt atkarību masīvu ar vērtībām, efekts tiek atkārtoti palaists, kad mainās jebkura no masīva vērtībām. Tīrīšanas funkcija tiek izpildīta *pirms* efekta atkārtotas palaišanas, ļaujot jums notīrīt iepriekšējo efektu pirms jaunā iestatīšanas. Tas ir svarīgi blakusefektiem, kas ir atkarīgi no konkrētām vērtībām, piemēram, datu iegūšana, pamatojoties uz lietotāja ID, vai DOM atjaunināšana, pamatojoties uz komponenta stāvokli.

Apsveriet šo piemēru:


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

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

  useEffect(() => {
    let didCancel = false;

    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        const result = await response.json();
        if (!didCancel) {
          setData(result);
        }
      } catch (error) {
        console.error('Kļūda, ielādējot datus:', error);
      }
    };

    fetchData();

    return () => {
      didCancel = true;
      console.log('Datu ielāde atcelta!');
    };
  }, [userId]);

  return (
    
      {data ? Lietotāja dati: {data.name}
 : Notiek ielāde...}
    
  );
}

export default DataFetcher;

Šajā piemērā efekts ir atkarīgs no userId prop. Efekts tiek atkārtoti palaists, kad mainās userId. Tīrīšanas funkcija iestata didCancel karodziņu uz true, kas novērš stāvokļa atjaunināšanu, ja fetch pieprasījums tiek pabeigts pēc tam, kad komponents ir demontēts vai userId ir mainījies. Tas novērš brīdinājumu "Can't perform a React state update on an unmounted component".

Atkarību masīva izlaišana (lietot uzmanīgi)

Ja izlaižat atkarību masīvu, efekts tiek palaists pēc katras renderēšanas. Tas parasti nav ieteicams, jo var radīt veiktspējas problēmas un bezgalīgus ciklus. Tomēr ir reti gadījumi, kad tas varētu būt nepieciešams, piemēram, ja jums ir nepieciešams piekļūt jaunākajām props vai stāvokļa vērtībām efektā, tos skaidri neuzskaitot kā atkarības.

Svarīgi: Ja izlaižat atkarību masīvu, jums *jābūt* ļoti uzmanīgam, tīrot jebkādus blakusefektus. Tīrīšanas funkcija tiks izpildīta pirms *katras* renderēšanas, kas var būt neefektīvi un potenciāli radīt problēmas, ja netiek pareizi apstrādāts.

Labākās prakses efekta tīrīšanai

Šeit ir dažas labākās prakses, kas jāievēro, izmantojot efekta tīrīšanu:

Vienmēr tīriet blakusefektus: Pieradiniet sevi vienmēr iekļaut tīrīšanas funkciju savos useEffect āķos, pat ja domājat, ka tas nav nepieciešams. Labāk būt drošam nekā nožēlot.
Uzturiet tīrīšanas funkcijas kodolīgas: Tīrīšanas funkcijai jābūt atbildīgai tikai par konkrētā blakusefekta tīrīšanu, kas tika iestatīts efekta funkcijā.
Izvairieties no jaunu funkciju izveides atkarību masīvā: Jaunu funkciju izveide komponenta iekšienē un to iekļaušana atkarību masīvā liks efektam atkārtoti palaisties katrā renderēšanā. Izmantojiet useCallback, lai memoizētu funkcijas, kas tiek izmantotas kā atkarības.
Esiet uzmanīgi ar atkarībām: Rūpīgi apsveriet sava useEffect āķa atkarības. Iekļaujiet visas vērtības, no kurām efekts ir atkarīgs, bet izvairieties no nevajadzīgu vērtību iekļaušanas.
Testējiet savas tīrīšanas funkcijas: Rakstiet testus, lai nodrošinātu, ka jūsu tīrīšanas funkcijas darbojas pareizi un novērš atmiņas noplūdes.

Rīki atmiņas noplūžu atklāšanai

Vairāki rīki var palīdzēt jums atklāt atmiņas noplūdes jūsu React lietojumprogrammās:

React Developer Tools: Pārlūkprogrammas paplašinājums React Developer Tools ietver profileru, kas var palīdzēt identificēt veiktspējas vājās vietas un atmiņas noplūdes.
Chrome DevTools Memory Panel: Chrome DevTools nodrošina atmiņas paneli (Memory panel), kas ļauj uzņemt kaudzes momentuzņēmumus (heap snapshots) un analizēt atmiņas lietojumu jūsu lietojumprogrammā.
Lighthouse: Lighthouse ir automatizēts rīks tīmekļa lapu kvalitātes uzlabošanai. Tas ietver auditus veiktspējai, pieejamībai, labākajām praksēm un SEO.
npm pakotnes (piem., `why-did-you-render`): Šīs pakotnes var palīdzēt jums identificēt nevajadzīgas pārrenderēšanas, kas dažkārt var liecināt par atmiņas noplūdēm.

Noslēgums

React effect tīrīšanas apgūšana ir būtiska, lai veidotu robustas, veiktspējīgas un atmiņas ziņā efektīvas React lietojumprogrammas. Izprotot efekta tīrīšanas principus un ievērojot šajā rokasgrāmatā izklāstītās labākās prakses, jūs varat novērst atmiņas noplūdes un nodrošināt vienmērīgu lietotāja pieredzi. Atcerieties vienmēr tīrīt blakusefektus, būt uzmanīgiem ar atkarībām un izmantot pieejamos rīkus, lai atklātu un novērstu jebkādas potenciālās atmiņas noplūdes savā kodā.

Rūpīgi pielietojot šīs tehnikas, jūs varat paaugstināt savas React izstrādes prasmes un radīt lietojumprogrammas, kas ir ne tikai funkcionālas, bet arī veiktspējīgas un uzticamas, veicinot labāku kopējo lietotāja pieredzi lietotājiem visā pasaulē. Šī proaktīvā pieeja atmiņas pārvaldībai atšķir pieredzējušus izstrādātājus un nodrošina jūsu React projektu ilgtermiņa uzturējamību un mērogojamību.