Kas ir useEffect āķa blakusefekti? – Tīrās un netīrās funkcijas…

Iepriekšējos rakstos diezgan plaši apskatijām useState āķa izmantošanu un piemērus, bet ir protams vēl kāds, pazīstams kā efekta āķis, jeb useEffect hook veltīsim laiku, lai nedaudz izķidātu un izprastu tā nosaukumu.

Nosaukums Effect hook ir cieši saistīts ar efekta vai precīzāk blakus efekta jēdzienu. Šajā rakstā jūs uzzināsiet, kādas ir šī React komponenta blakusparādības, tostarp tīrās un netīrās funkcijas. Un to saistība ar blakusparādībām, kā arī tas, kā efekta āķis tiek izmantots blakusparādību veikšanai funkcionālo komponentu ietvaros.

Tātad, kas ir blakusparādība React izpratnē?

Blakusparādība ir kaut kas tāds, kas padara funkciju tīru vai netīru. Vai zinājāt, ka funkcijas var klasificēt kā tīras un netīras? Vienkārši izsakoties, tīrām funkcijām nav blakusparādībuatšķirībā no netīrām funkcijām. Tīrai funkcijai jāsaņem īpaša ievade. Tas ir konkrēts parametrs, kas vienmēr atgriezīs tieši tādu pašu izvadi. Neatkarīgi no tā, cik reižu tas tiek izsaukts. Lai ilustrētu, izpētīsim funkciju, kas izmanto maza uzņēmuma izveides gadu.

Tīras funkcijas piemēri:

import './App.css';



function DibināšanasGads(props) {
  return <h1>Dibināšanas Gads: {props.year}</h1>
}


function App() {
  return <DibināšanasGads year={2023} />
}



export default App;

Šajā piemērā izveidotais gada komponents pieņem rekvizītu (props) objektu, kas ir rekvizītu parametrs.

Tas arī atgriež vērtību, kas ir virsraksts, kas izvada vārdus, izveides gads, kam seko kols un atstarpe – un gada rekvizīta vērtība, ja vien gada rekvizīta vērtība ir 2023. Neatkarīgi no tā, cik reižu noteiktā gada funkcija tiek izsaukta vai tiek renderēta no lietotnes komponenta, izvade paliks nemainīga. Šis ir tīras funkcijas piemērs. Noteiktajai gada funkcijai nav blakusparādību.

import './App.css';



function DibināšanasGads(props) { // (props) objekts, kas ir rekvizītu parametrs.
  return <h1>Dibināšanas Gads: {props.year}</h1> // atgriež vērtību, kas ir virsraksts, kas izvada vārdus, izveides gads, kam seko kols un atstarpeun gada rekvizīta vērtība
}


function App() {
  return <DibināšanasGads year={2023} /> // izvade paliks nemainīga bez blakusefektiem
}



export default App;

Pretstatā un netīrā funkcija veiks blakus efektu.

Tas nozīmē, ka netīrās funkcijas veiks tādas darbības kā konsoles žurnāla izsaukšana (invoke console.log), pārlūkprogrammu ģeogrāfiskās atrašanās vietas noteikšanas funkcionalitātes izsaukšana (invoke geolocation), ienešana vai izsaukšana, (invoke fetch) u.t.t… Šajā kontekstā blakusparādību var uzskatīt par kaut ko ārpus funkcijas vai ārpus tās. Apsveriet piemēru ar iepirkšanās groza funkciju, kas izstrādāta kādai lietotnei.

import './App.css';



function IepirkumuGrozs(props) {
  const total = props.count * props.price;
  console.log(total); // padara funkciju par netīru
  return <h1>Kopā: {total}</h1>
}


export default function App() {
  return (
    <IepirkumuGrozs preces={5} cenaParPreci={10} />
  )
}

Tā ir netīra funkcija, jo rinda “console.log(total);” nolasa konsoles žurnāla kopējo summu. Konsoles žurnāla izsaukums padara funkciju netīru, jo tas ir izsaukums pārlūkprogrammai, lietojumprogrammu saskarnei vai API. Iepirkumu groza funkcija tagad ir atkarīga no kaut kā ārpus pašas un pat ārpus React lietotnes, lai tā darbotos pareizi. Tātad, kā jums vajadzētu risināt jautājumu par netīrajām funkcijām React. Tas viss ir saistīts ar netīro darbību ierobežošanu viņu īpašajās zonās.

Lai to izdarītu programmējot ar React, jums ir jāizmanto efekta āķis useEffect hook, atjaunināsim IepirkumuGrozs komponentu ar useEffect hook, lai pareizi tiktu galā ar konsoles žurnāla izraisīto blakusparādību.

import {useEffect} from "react"


function IepirkumuGrozs(props) {
  const total = props.count * props.price;


  useEffect(function() { // atzvanīšanas funkcija
    console.log(total);
  }, []) // masīvs
 
  return <h1>Kopā: {total}</h1>
}


export default App;

Pirmkārt, jums ir jāimportē use Effect hook no react import {useEffect} from "react"
. Use Effect hook darbojas, pieņemot divus parametrus. Pirmā ir atzvanīšanas funkcija. Otrais parametrs ir masīvs. Šo masīvu var atstāt tukšu [ ] , kas ir pilnīgi derīgs, kamēr sintakse ir derīga.

Ir ierasts izmantot bultiņas funkciju kā pirmo argumentu useEffect āķa izsaukšanai useEffect(()=>console.log(total), []); . Ņemiet vērā, ka efekta lietošana ir vienkāršota līdz vienai koda rindiņai. Tas parasti iztērē vairākas koda rindiņas, jo tam parasti ir jādara kaut kas jēgpilnāks, nevis tikai konsoles komponentu mainīgā vērtības reģistrēšana.

Plašāk…

Kas ir useEffect āķis?
Jūs esat iepazīstināts ar useEffect hook primāro lietojumu. Tas ir iebūvēts React hook, kas vislabāk piemērots blakusparādību rašanai jūsu React komponentos.

Raksta turpinājumā jūs iepazīsieties ar pareizu atkarības masīva izmantošanu un dažādiem useEffect izsaukumiem, kurus var izmantot, lai atdalītu dažādas problēmas. Jūs arī uzzināsiet, kā varat iztīrīt resursus un atbrīvot atmiņu useEffect loģikā, atgriežot funkciju.

Kods, ko ievietojat useEffect āķī, vienmēr tiek palaists pēc komponenta pievienošanas vai, citiem vārdiem sakot, pēc tam, kad React ir atjauninājis DOM.

Turklāt atkarībā no jūsu konfigurācijas, izmantojot atkarību masīvu, jūsu efekti var darboties arī tad, kad mainās noteikti stāvokļa mainīgie vai rekvizīti.

Pēc noklusējuma, ja funkcijai useEffect netiek nodrošināts otrs arguments, efekts tiks palaists pēc katras renderēšanas.

useEffect(() => { 
   document.title = 'Programmēšana ar kas.id.lv';
 }); 

useEffect(() => { 
  document.title = `Programmēšana ar kas.id.lv, v${version}`;
}, [version]); // Palaist tikai tad, kad monainās versija 

function IzvēlnesLapa(props) {
  const [data, setData] = useState([]);


  useEffect(() => {
    document.title = 'Programmē ar kas.id.lv';
  }, []);


  useEffect(() => {
    fetch(`https://kas.id.lv/blog/${id}`)
      .then(response => response.json())
      .then(json => setData(json));
  }, [props.id]);


  // ...
}

function Tērzētava(props) {
  const [status, chatStatus] = useState('offline');


  useEffect(() => {
    LemonChat.subscribeToMessages(props.chatId, () => setStatus('online'))


    return () => {
      setStatus('offline');
      KasIdLvChat.unsubscribeFromMessages(props.chatId);
    };
  }, []);


  // ...
}

*Rakstā izmantotie skripti NAV pabeigtu komponentu vai aplikāciju kodi, bet gan uzskatāmi piemēri priekšstata radīšanai mācību procesā