React Efekto Išvalymas: Įvaldykite Atminties Nutekėjimo Prevenciją

React useEffect „hook“ yra galingas įrankis, skirtas valdyti šalutinius efektus jūsų funkcinėse komponentėse. Tačiau, jei jis naudojamas netinkamai, gali sukelti atminties nutekėjimą, paveikdamas jūsų programos našumą ir stabilumą. Šis išsamus gidas gilinsis į React efekto išvalymo subtilybes, suteikdamas jums žinių ir praktinių pavyzdžių, kaip išvengti atminties nutekėjimo ir rašyti patikimesnes React programas.

Kas Yra Atminties Nutekėjimas ir Kodėl Tai Blogai?

Atminties nutekėjimas įvyksta, kai jūsų programa paskiria atmintį, bet nepavyksta jos atlaisvinti ir grąžinti sistemai, kai ji nebėra reikalinga. Laikui bėgant, šie neatlaisvinti atminties blokai kaupiasi, sunaudodami vis daugiau sistemos resursų. Interneto programose atminties nutekėjimas gali pasireikšti kaip:

Lėtas veikimas: Kai programa naudoja vis daugiau atminties, ji tampa lėta ir nereaguojanti.
Strigtys: Galiausiai programa gali pritrūkti atminties ir nustoti veikti, sukeldama prastą vartotojo patirtį.
Netikėtas elgesys: Atminties nutekėjimas gali sukelti nenuspėjamą elgesį ir klaidas jūsų programoje.

React aplinkoje atminties nutekėjimas dažnai įvyksta useEffect „hook'uose“, dirbant su asinchroninėmis operacijomis, prenumeratomis ar įvykių klausytojais (event listeners). Jei šios operacijos nėra tinkamai išvalomos, kai komponentas atjungiamas (unmounts) ar persikrauna (re-renders), jos gali toliau veikti fone, naudodamos resursus ir galimai sukeldamos problemas.

`useEffect` ir Šalutinių Efektų Supratimas

Prieš gilinantis į efekto išvalymą, trumpai apžvelkime useEffect paskirtį. useEffect „hook“ leidžia jums atlikti šalutinius efektus jūsų funkcinėse komponentėse. Šalutiniai efektai yra operacijos, kurios sąveikauja su išoriniu pasauliu, pavyzdžiui:

Duomenų gavimas iš API
Prenumeratų nustatymas (pvz., websockets ar RxJS Observables)
Tiesioginis DOM manipuliavimas
Laikmačių nustatymas (pvz., naudojant setTimeout ar setInterval)
Įvykių klausytojų (event listeners) pridėjimas

useEffect „hook“ priima du argumentus:

Funkciją, kurioje yra šalutinis efektas.
Neprivalomą priklausomybių masyvą.

Šalutinio efekto funkcija yra vykdoma po to, kai komponentas yra atvaizduojamas. Priklausomybių masyvas nurodo React, kada iš naujo paleisti efektą. Jei priklausomybių masyvas yra tuščias ([]), efektas paleidžiamas tik vieną kartą po pirminio atvaizdavimo. Jei priklausomybių masyvas praleidžiamas, efektas paleidžiamas po kiekvieno atvaizdavimo.

Efekto Išvalymo Svarba

Raktas į atminties nutekėjimo prevenciją React programose yra išvalyti bet kokius šalutinius efektus, kai jie nebėra reikalingi. Čia į pagalbą ateina išvalymo funkcija. useEffect „hook“ leidžia grąžinti funkciją iš šalutinio efekto funkcijos. Ši grąžinama funkcija yra išvalymo funkcija, ir ji vykdoma, kai komponentas yra atjungiamas arba prieš tai, kai efektas yra paleidžiamas iš naujo (dėl priklausomybių pasikeitimų).

Štai pagrindinis pavyzdys:


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

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

  useEffect(() => {
    console.log('Efektas paleistas');

    // Tai yra išvalymo funkcija
    return () => {
      console.log('Išvalymas įvykdytas');
    };
  }, []); // Tuščias priklausomybių masyvas: veikia tik vieną kartą prijungus komponentą

  return (
    
      Skaičius: {count}
      
    
  );
}

export default MyComponent;

Šiame pavyzdyje console.log('Efektas paleistas') bus įvykdytas vieną kartą, kai komponentas bus prijungtas. console.log('Išvalymas įvykdytas') bus įvykdytas, kai komponentas bus atjungtas.

Dažniausi Scenarijai, Reikalaujantys Efekto Išvalymo

Panagrinėkime keletą dažniausių scenarijų, kur efekto išvalymas yra būtinas:

1. Laikmačiai (`setTimeout` ir `setInterval`)

Jei naudojate laikmačius savo useEffect „hook'e“, būtina juos išvalyti, kai komponentas atjungiamas. Priešingu atveju, laikmačiai toliau veiks net ir po to, kai komponentas bus pašalintas, sukeldami atminties nutekėjimą ir galimas klaidas. Pavyzdžiui, apsvarstykite automatiškai atsinaujinantį valiutų keitiklį, kuris periodiškai gauna valiutų kursus:


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

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

  useEffect(() => {
    const intervalId = setInterval(() => {
      // Simuliuojamas valiutos kurso gavimas iš API
      const newRate = Math.random() * 1.2;  // Pavyzdys: atsitiktinis kursas tarp 0 ir 1.2
      setExchangeRate(newRate);
    }, 2000); // Atnaujinti kas 2 sekundes

    return () => {
      clearInterval(intervalId);
      console.log('Intervalas išvalytas!');
    };
  }, []);

  return (
    
      Dabartinis valiutos kursas: {exchangeRate.toFixed(2)}
    
  );
}

export default CurrencyConverter;

Šiame pavyzdyje setInterval naudojamas exchangeRate atnaujinti kas 2 sekundes. Išvalymo funkcija naudoja clearInterval, kad sustabdytų intervalą, kai komponentas atjungiamas, taip užkertant kelią laikmačio veikimui ir atminties nutekėjimui.

2. Įvykių Klausytojai (Event Listeners)

Pridėdami įvykių klausytojus savo useEffect „hook'e“, privalote juos pašalinti, kai komponentas atjungiamas. To nepadarius, prie to paties elemento gali būti prijungti keli įvykių klausytojai, sukeliantys netikėtą elgesį ir atminties nutekėjimą. Pavyzdžiui, įsivaizduokite komponentą, kuris klauso lango dydžio keitimo įvykių, kad pritaikytų savo išdėstymą skirtingiems ekrano dydžiams:


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('Įvykio klausytojas pašalintas!');
    };
  }, []);

  return (
    
      Lango plotis: {windowWidth}
    
  );
}

export default ResponsiveComponent;

Šis kodas prideda resize įvykio klausytoją prie lango. Išvalymo funkcija naudoja removeEventListener, kad pašalintų klausytoją, kai komponentas atjungiamas, taip užkertant kelią atminties nutekėjimui.

3. Prenumeratos (Websockets, RxJS Observables ir kt.)

Jei jūsų komponentas prenumeruoja duomenų srautą naudodamas websockets, RxJS Observables ar kitus prenumeratos mechanizmus, būtina atšaukti prenumeratą, kai komponentas atjungiamas. Palikus aktyvias prenumeratas, gali atsirasti atminties nutekėjimas ir nereikalingas tinklo srautas. Apsvarstykite pavyzdį, kuriame komponentas prenumeruoja websocket kanalą, kad gautų realaus laiko akcijų kainas:


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

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

  useEffect(() => {
    // Simuliuojamas WebSocket ryšio sukūrimas
    const newSocket = new WebSocket('wss://example.com/stock-feed');
    setSocket(newSocket);

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

    newSocket.onmessage = (event) => {
      // Simuliuojamas akcijų kainos duomenų gavimas
      const price = parseFloat(event.data);
      setStockPrice(price);
    };

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

    newSocket.onerror = (error) => {
      console.error('WebSocket klaida:', error);
    };

    return () => {
      newSocket.close();
      console.log('WebSocket uždarytas!');
    };
  }, []);

  return (
    
      Akcijos kaina: {stockPrice}
    
  );
}

export default StockTicker;

Šiame scenarijuje komponentas sukuria WebSocket ryšį su akcijų kanalu. Išvalymo funkcija naudoja socket.close(), kad uždarytų ryšį, kai komponentas atjungiamas, taip užkertant kelią ryšio išlikimui ir atminties nutekėjimui.

4. Duomenų Gavimas su AbortController

Gaunant duomenis useEffect, ypač iš API, kuriems gali prireikti laiko atsakyti, turėtumėte naudoti AbortController, kad atšauktumėte užklausą, jei komponentas atjungiamas prieš užklausai pasibaigiant. Tai apsaugo nuo nereikalingo tinklo srauto ir galimų klaidų, kurias sukelia komponento būsenos atnaujinimas po jo atjungimo. Štai pavyzdys, gaunantis vartotojo duomenis:


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 klaida! būsena: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (err) {
        if (err.name === 'AbortError') {
          console.log('Užklausa atšaukta');
        } else {
          setError(err);
        }
      } finally {
        setLoading(false);
      }
    };

    fetchData();

    return () => {
      controller.abort();
      console.log('Užklausa atšaukta!');
    };
  }, []);

  if (loading) {
    return Kraunama...;
  }

  if (error) {
    return Klaida: {error.message};
  }

  return (
    
      Vartotojo profilis
      Vardas: {user.name}
      El. paštas: {user.email}
    
  );
}

export default UserProfile;

Šis kodas naudoja AbortController, kad atšauktų duomenų gavimo užklausą, jei komponentas atjungiamas anksčiau, nei gaunami duomenys. Išvalymo funkcija iškviečia controller.abort(), kad atšauktų užklausą.

Priklausomybių Supratimas `useEffect`

Priklausomybių masyvas useEffect atlieka lemiamą vaidmenį nustatant, kada efektas yra paleidžiamas iš naujo. Jis taip pat veikia išvalymo funkciją. Svarbu suprasti, kaip veikia priklausomybės, kad išvengtumėte netikėto elgesio ir užtikrintumėte tinkamą išvalymą.

Tuščias Priklausomybių Masyvas (`[]`)

Kai nurodote tuščią priklausomybių masyvą ([]), efektas paleidžiamas tik vieną kartą po pirminio atvaizdavimo. Išvalymo funkcija bus paleista tik tada, kai komponentas bus atjungtas. Tai naudinga šalutiniams efektams, kuriuos reikia nustatyti tik vieną kartą, pavyzdžiui, inicijuojant websocket ryšį ar pridedant visuotinį įvykio klausytoją.

Priklausomybės su Reikšmėmis

Kai nurodote priklausomybių masyvą su reikšmėmis, efektas paleidžiamas iš naujo, kai pasikeičia bet kuri iš masyvo reikšmių. Išvalymo funkcija vykdoma *prieš* efekto paleidimą iš naujo, leidžiant jums išvalyti ankstesnį efektą prieš nustatant naują. Tai svarbu šalutiniams efektams, kurie priklauso nuo konkrečių reikšmių, pavyzdžiui, duomenų gavimui pagal vartotojo ID arba DOM atnaujinimui pagal komponento būseną.

Apsvarstykite šį pavyzdį:


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('Klaida gaunant duomenis:', error);
      }
    };

    fetchData();

    return () => {
      didCancel = true;
      console.log('Užklausa atšaukta!');
    };
  }, [userId]);

  return (
    
      {data ? Vartotojo duomenys: {data.name}
 : Kraunama...}
    
  );
}

export default DataFetcher;

Šiame pavyzdyje efektas priklauso nuo userId „prop“. Efektas paleidžiamas iš naujo, kai pasikeičia userId. Išvalymo funkcija nustato didCancel vėliavėlę į true, kas neleidžia atnaujinti būsenos, jei duomenų gavimo užklausa baigiasi po to, kai komponentas buvo atjungtas arba pasikeitė userId. Tai apsaugo nuo įspėjimo „Can't perform a React state update on an unmounted component“.

Priklausomybių Masyvo Praleidimas (Naudoti Atsargiai)

Jei praleisite priklausomybių masyvą, efektas veiks po kiekvieno atvaizdavimo. Paprastai to reikėtų vengti, nes tai gali sukelti našumo problemų ir begalines ciklines priklausomybes. Tačiau yra retų atvejų, kai tai gali būti būtina, pavyzdžiui, kai reikia pasiekti naujausias „props“ ar būsenos reikšmes efekto viduje, aiškiai nenurodant jų kaip priklausomybių.

Svarbu: Jei praleidžiate priklausomybių masyvą, *privalote* būti itin atsargūs valydami bet kokius šalutinius efektus. Išvalymo funkcija bus vykdoma prieš *kiekvieną* atvaizdavimą, o tai gali būti neefektyvu ir sukelti problemų, jei netinkamai valdoma.

Geriausios Praktikos Efekto Išvalymui

Štai keletas geriausių praktikų, kurių reikėtų laikytis naudojant efekto išvalymą:

Visada išvalykite šalutinius efektus: Įpraskite visada įtraukti išvalymo funkciją į savo useEffect „hook'us“, net jei manote, kad tai nebūtina. Geriau apsidrausti.
Išvalymo funkcijos turi būti trumpos: Išvalymo funkcija turėtų būti atsakinga tik už konkretaus šalutinio efekto, kuris buvo nustatytas efekto funkcijoje, išvalymą.
Venkite kurti naujas funkcijas priklausomybių masyve: Naujų funkcijų kūrimas komponento viduje ir jų įtraukimas į priklausomybių masyvą privers efektą persikrauti po kiekvieno atvaizdavimo. Naudokite useCallback, kad įsimintumėte funkcijas, kurios naudojamos kaip priklausomybės.
Atsižvelkite į priklausomybes: Atidžiai apsvarstykite savo useEffect „hook“ priklausomybes. Įtraukite visas reikšmes, nuo kurių priklauso efektas, bet venkite nereikalingų reikšmių.
Testuokite savo išvalymo funkcijas: Rašykite testus, kad užtikrintumėte, jog jūsų išvalymo funkcijos veikia teisingai ir apsaugo nuo atminties nutekėjimo.

Įrankiai Atminties Nutekėjimui Aptikti

Keli įrankiai gali padėti jums aptikti atminties nutekėjimą jūsų React programose:

React Developer Tools: React Developer Tools naršyklės plėtinys turi profiliuoklį, kuris gali padėti nustatyti našumo problemas ir atminties nutekėjimus.
Chrome DevTools Memory Panel: Chrome DevTools suteikia „Memory“ skydelį, kuris leidžia daryti atminties momentines nuotraukas (heap snapshots) ir analizuoti atminties naudojimą jūsų programoje.
Lighthouse: Lighthouse yra automatizuotas įrankis, skirtas interneto puslapių kokybei gerinti. Jis apima našumo, prieinamumo, geriausių praktikų ir SEO auditus.
npm paketai (pvz., `why-did-you-render`): Šie paketai gali padėti nustatyti nereikalingus persikrovimus, kurie kartais gali būti atminties nutekėjimo ženklas.

Išvada

React efekto išvalymo įvaldymas yra būtinas norint kurti patikimas, našias ir atmintį taupančias React programas. Suprasdami efekto išvalymo principus ir laikydamiesi šiame gide pateiktų geriausių praktikų, galite išvengti atminties nutekėjimo ir užtikrinti sklandžią vartotojo patirtį. Nepamirškite visada išvalyti šalutinius efektus, atsižvelgti į priklausomybes ir naudoti prieinamus įrankius, kad aptiktumėte ir išspręstumėte bet kokius galimus atminties nutekėjimus savo kode.

Kruopščiai taikydami šias technikas, galite pakelti savo React programavimo įgūdžius ir kurti programas, kurios yra ne tik funkcionalios, bet ir našios bei patikimos, prisidedant prie geresnės bendros vartotojų patirties visame pasaulyje. Šis proaktyvus požiūris į atminties valdymą išskiria patyrusius programuotojus ir užtikrina ilgalaikį jūsų React projektų palaikymą bei mastelio keitimą.