React useEffect izmantošana reālā aplikācijas komponenta piemērā

Lai parādītu, kā komponentā izmantot āķi useEffect, turpināsim darbu pie kādas lietotnes. Pieņemsim, ka lietotnes īpašnieks vēlas pievienot konkrētu veidu, kā lietotājs var mijiedarboties ar lietotni. Noklikšķinot uz pogas, īpašnieks vēlas, lai tiktu parādīts sveiciena ziņojums, un, noklikšķinot vēlreiz uz  pogas, īpašnieks vēlas, lai ziņojums tiktu paslēpts. Turklāt īpašnieks vēlas, lai šīs izmaiņas tiktu atspoguļotas cilnē Pārlūks, kurā tiek rādīta lietotne. Blakusparādības piemērs ir pārlūkprogrammas cilnes atjaunināšana.

Šajā rakstā es parādīšu, kā to izdarīt, izmantojot āķi useEffect, lai programmā React radītu blakusparādības, kā arī kā kontrolēt, kad funkcija useEffect tiek palaists, izmantojot atkarību masīvu. Es izmantošu lietotni, ko iepriekš izveidoju, izmantojot “npx create-react-app“, lai parādītu, kā izmantot useEffect āķi.

import React from "react";
import './App.css';


function App() {
  const [toggle, setToggle] = React.useState(false);


  const clickHandler = () => {
    setToggle(!toggle);
  }


return (
  <div>
    <h1>Izmantojam useEffect āķi</h1>
    <button onClick={clickHandler}>
      Ziņojums
    </button>
    {toggle && <h2>Sveicināti mūsu aplikācijā</h2>}
  </div>
)


}


export default App;

Lai aprakstītu notiekošo, sāksim ar atgriešanās paziņojumu. Man ir iesaiņojuma div, un tā iekšpusē ir h1, poga JSX izteiksmē, kas izmanto loģisko && operatoru, lai nosacīti renderētu h2. Pogai ir onClick notikumu apstrādes atribūts, un tā aktivizē clickHandler funkciju, ko esmu deklarējis kā funkcijas izteiksmi, sākot ar 7. rindu. 5. rindiņā esmu destrukturējis pārslēgšanas mainīgo no izsaukuma uz useState āķi, lai izsekotu pārslēgšanas mainīgā stāvokli un padariet iespējamu nosacījumu renderēšanu atgriešanas priekšrakstā.

Tagad pārbaudīsim manu lietotni pārlūkprogrammā, kā tā pašlaik tiek pasniegta.

Viss darbojas labi. Kad es noklikšķinu uz pogas, zem tā parādās teikums, “Sveicināti mūsu aplikācijā”, ja tas iepriekš nebija parādīts, un otrādi. Lai gan lietotne darbojas labi, manai lietotnei pašlaik nav iespējas atjaunināt tekstu cilnē Pārlūks, kā to vēlas īpašnieks. Šis ir blakusefekta piemērs, tāpēc pareizais veids, kā pievienot šo funkcionalitāti, ir izmantot useEffect āķi. Virs atgriešanas priekšraksta es pievienošu funkcijas useEffect izsaukumu React.useEffect();.

Man ir jānodod funkcija useEffect izsaukumam. Es pievienošu bultiņas funkciju bez parametriem, un bultiņas funkcijas pamattekstā es pievienošu šeit šo trīskāršu vērtību, kas pārbauda, vai pārslēgšanas mainīgā vērtība ir patiesa vai nepatiesa. Ja tā ir patiesība, tai ir jāatgriež virkne, “Sveicināti mūsu aplikācijā”. Pretējā gadījumā tai ir jāatgriež virkne, kas tiek nolasīta, izmantojot useEffect āķi. Viss, kas tiek atgriezts, ir vērtība, ko es piešķiru dokumenta objekta nosaukuma īpašumam. Tādējādi šis rekvizīts dinamiski atjaunina tekstu, kurā tiek parādīta pārlūkprogrammas cilne, kurā tiek apkalpota šī React lietotne.

import React from "react";
import './App.css';


function App() {
  const [toggle, setToggle] = React.useState(false);


  const clickHandler = () => {
    setToggle(!toggle);
  }


  React.useEffect(() => {
    document.title = toggle ? "Sveicināti mūsu aplikācijā" : "Izmantojam useEffect āķi"
  });


return (
  <div>
    <h1>Izmantojam useEffect āķi</h1>
    <button onClick={clickHandler}>
      Ziņojums
    </button>
    {toggle && <h2>Sveicināti mūsu aplikācijā</h2>}
  </div>
)


}


export default App;

Pārbaudīsim atjaunināto lietotni pārlūkprogrammā. Varu apstiprināt, ka ar katru pogas klikšķi cilnes virsraksts tiek atjaunināts uz vienu no divām norādītajām virknēm.

Varu apstiprināt, ka ar katru pogas klikšķi cilnes virsraksts tiek atjaunināts uz vienu no divām norādītajām virknēm.

Iedomājieties, ka īpašnieks ir mainījis savas domas un vēlas, lai dokumenta nosaukums tiktu iestatīts sākotnējā komponenta renderēšanā. Pēc tam tas nevēlas to atjaunināt. Šeit tiek izmantots atkarības masīvs. Atkarības masīvs nosaka, kad tiks izsaukts useEffect āķis. Pagaidām es atjaunināšu savu kodu ar tukšu atkarības masīvu, kas nozīmē, ka es neizsekoju neviena stāvokļa mainīgā stāvoklim. Citiem vārdiem sakot, neatkarīgi no tā, kas notiek manā lietotnē, es nevēlos, lai tiktu izsaukts useEffect āķis. Tas nozīmē, ka tas tiks izsaukts tikai vienu reizi. Pēc tam neatkarīgi no tā, kas notiek manā lietotnē, useEffect āķis vairs netiks palaists.

Tas izdarāms 13.rindiņā pievienojot [ ] – skatīt atjaunināto kodu:

import React from "react";
import './App.css';


function App() {
  const [toggle, setToggle] = React.useState(false);


  const clickHandler = () => {
    setToggle(!toggle);
  }


  React.useEffect(() => {
    document.title = toggle ? "Sveicināti mūsu aplikācijā" : "Izmantojam useEffect āķi"
  }, []);


return (
  <div>
    <h1>Izmantojam useEffect āķi</h1>
    <button onClick={clickHandler}>
      Ziņojums
    </button>
    {toggle && <h2>Sveicināti mūsu aplikācijā</h2>}
  </div>
)


}


export default App;