React – Atkārtojam useState āķus (hook)

Kas ir useState āķi?

“useState” ir React funkcija, kas ļauj komponentam atcerēties stāvokli. Hooks ir jauna React funkciju sērija, kas tika ieviesta React versijā 16.8. “useState” ir viens no šiem “hooks”, un tas ļauj jums izmantot stāvokli komponentēs, kas tiek renderētas.

“useState” hooks lietošana ir diezgan vienkārša. Jums jāimportē “useState” no React bibliotēkas, un pēc tam jāizsauc tā funkcija, lai definētu stāvokli. Funkcijai jānodod sākotnējā stāvokļa vērtība kā argumentu, un tā atgriež divas vērtības: pašreizējo stāvokli un funkciju, kas ļauj to atjaunot.

Piemēram, šeit ir kā izmantot “useState” hooks, lai saglabātu skaitli un pievienotu 1 katru reizi, kad tiek klikšķināts uz pogas:

import React, { useState } from 'react';

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

return (
<div>
<p>Jūs nospiedāt {count} reizes</p>
<button onClick={() => setCount(count + 1)}>
Uzspied uz manis!
</button>
</div>
);
}

Šajā piemērā “useState” hooks tiek izmantots, lai definētu stāvokli “count” ar sākotnējo vērtību 0. Kad tiek renderēts “Counter” komponents, tas atgriež divus elementus: “count” vērtību un funkciju “setCount”, kas atjauno “count” vērtību, kad tiek klikšķināts uz pogas. Katru reizi, kad tiek piespiesta poga, “count” vērtība tiek palielināta par 1, un komponents tiek atkārtoti renderēts, lai atspoguļotu izmaiņas stāvoklī.

Bet ir vēl arī citi piemēri un daudz plašākas useState izmantošanas iespējas…

Iedomāsimies, ka kādam pilsētas restorānam ir nepieciešams veids, kā izsekot restorāna pārtikas krājumiem. Jūs izskatīsiet dažus praktiskus piemērus, izmantojot restorānam izstrādātu lietotni, lai pārskatītu izmantoto “steita āķi” un izpētītu, kā tiek izsaukts useState āķis, jūs pārbaudīsiet useState hook atgriešanas vērtības un to, kā tas tiek izmantots “steita” atjaunināšanai. Jūs, iespējams, jau esat iepazinies ar “steita āķi” (state hook), kas tiek izmantots, lai strādātu ar steitu React komponentā, kurā stāvoklis ir visi dati un lietotne, ar kuru konkrētajā laikā strādā. Bet pirms pāriet uz lietojuma steitu, vēlreiz apskatīsim *radi strukturēšanas koncepciju, atcerieties, ka “reids” strukturēšana ir veids, kā iegūt atsevišķus vienumus no vienumu masīva un saglabāt šos atsevišķos vienumus kā atsevišķus komponentus.

Tagad izpētīsim šo koncepciju ar praktisku piemēru.

Pieņemsim, ka kodējat lietotni, kas izseko pašreizējās pārtikas rezerves restorāna pieliekamajā, un izmantojat mainīgo, lai saglabātu visus dārzeņus masīvā. Turpinot kodēšanu, jūs saprotat, ka katrs vienums no masīva ir jāiegūst savā atsevišķā mainīgajā.

let dārzeņi = [pētersīļi, sīpoli, burkāni];

Pirmajam masīva vienumam mainīgo D1 vēlaties nosaukt tāpat kā “dārzeņi viens”, otro vienumu. D2 un tā tālāk. Izmantojot radi strukturēšanu, varat to viegli izdarīt, izmantojot vienu koda rindiņu,

let dārzeņi = [pētersīļi, sīpoli, burkāni];

const [d1, d2, d3] = dārzeņi;

Ņemiet vērā, ka, izmantojot radi strukturēšanu, vienumiem, kurus strukturējat no masīva, varat piešķirt jebkuru mainīgo nosaukumu.

let dārzeņi = [pētersīļi, sīpoli, burkāni];

const [d1, d2, d3] = dārzeņi;

console.log(d1); //Pētersīļi

console.log(d2); //Sīpoli

console.log(d3); // Burkāni

Tomēr, destrukturējot objektus, jums ir jādestrukturē objekta rekvizīts, izmantojot šo precīzu rekvizītu nosaukumu kā destrukturētā mainīgā nosaukumu. Tas padara objektus daudz stingrākus attiecībā uz to, ko varat nosaukt saviem destruktūras mainīgajiem. Šī iemesla dēļ react izmanto masīva datu struktūru izmantoto steita āķu atgriešanas vērtībai.

Tagad, kad esat guvis āķa useState atgriešanās vērtības priekšskatījumu. Izpētīsim, kā tas patiesībā darbojas.

Es parādīšu, kā atjaunināt statusu un React uz lietotnēm, izmantojot statusa āķi, lai iestatītu restorāna nosaukuma sākotnējo vērtību uz “Restorāns” un pēc tam izmantojot tikai useState atjaunināšanas funkciju, lai atjauninātu to uz “Pilsētas Restorāns”.

import {useState} from "react";


export default function App() {
  const restaurantName = useState("Restorāns");
  console.log(restaurantName);
  return null;
};

useState āķis ļauj strādāt ar stāvokli komponentos. Sāksim apspriest stāvokli, pārskatot to, kas notiek, kad es izsaucu useState hook.

Es atgriežu tikai null “return null;” , jo šobrīd vēlos koncentrēties uz konsoli, lai pārbaudītu konsoles izvadi.

Tas tiek reģistrēts. Konsoles reģistrētā vērtība ir masīvs (Array), kurā stāvokļa mainīgo vērtība ir pirmais vienums masīvā. Otrais vienums atgrieztajā masīvā ir funkcija, kas tiks izmantota, lai atjauninātu stāvokli.

Tātad useState hook izsaukšana atgriež divu locekļu masīvu. Nosaukums ir “steita” atjaunināšanas funkcijai nosaukt, izmantojot “camelCase“. Vēl viena metode ir to nosaukt, ievadot vārdus, kas iestatīti mainīgā nosaukumam, ko izmanto destrukturētā stāvokļa mainīgajam. Citiem vārdiem sakot, pareizs veids, kā strādāt ar “steitu”, nozīmē, ka, sākot koda piemēru, ir jāuzlabo līdz pareizam destrukturējiot masīvu, kas atgriezts no izsaukuma useState āķim. Tagad destrukturētā restorāna nosaukuma mainīgajam ir statuss un destrukturētā kopa. Restorāna nosaukuma mainīgais satur “steita” atjaunināšanas funkciju. Šis ir piemērs radi strukturēšanai, izmantojot izmantoto “steita” āķi.

Jums var rasties jautājums, kā var atjaunināt “steitu”, kad pirmo reizi sākat lietot “steita” āķi? Daži izstrādātāji mēģina atjaunināt steita mainīgo dažādos veidos, taču ir tikai viens pareizais veids, kā atjaunināt steitu, izmantojot useState, un tas ir, izmantojot “State” atjaunināšanas funkciju (State updating function). Citiem vārdiem sakot, vienīgais veids, kā atjaunināt restorāna nosaukuma mainīgā statusu, ir izsaukt setRestaurantName funkciju, React aplikācijā “steita” izmaiņas, kas parasti tiek aktivizētas, lietotājam mijiedarbojoties ar lietotni. Tas nozīmē, ka “Steita” izmaiņas parasti izraisa lietotāja ģenerēti notikumi. Šādi notikumi, piemēram, peles kustības, pogu klikšķi un taustiņu nospiešana, notiek visu laiku. Lietotnē izstrādātāju loma reaģēt uz noteikta veida notikumiem lietotnei nozīmīgā veidā kas tiek kodēts. Viens izplatīts veids, kā lietotāji mijiedarbojas ar tīmekļa lietotnēm, ir klikšķi uz pogas. Tāpēc apskatīsim piemēru Steita maiņai, reaģējot uz šiem lietotāja ģenerētajiem notikumiem, proti, pogu klikšķiem.

import {useState} from "react";


export default function App() {
const [restaurantName, setRestaurantName] = useState("Restorāns");


function updateRestaurantName() {
  setRestaurantName("Pilsētas Restorāns")
};


return (
  <div>
    <h1>{restaurantName}</h1>
    <button onClick={updateRestaurantName}>
      Atjaunot restorāna nosaukumu
    </button>
  </div>
);
};

Šajā koda piemērā es pievienoju pogu, uz kuras noklikšķinot tiks izpildīta funkcija. Šī funkcija ir restorāna nosaukuma atjaunināšana, kas tiek izsaukta visur, kur lietotājs noklikšķina uz pogas. Tagad, kad es noklikšķinu uz pogas Atjaunināt restorāna nosaukumu, <h1> virsraksts tiks mainīts no “Restorāns” uz “Pilsētas Restorāns”. Tā kā atjaunināšanas restorāna nosaukuma funkcijas izsaukšana izraisīja izsaukumu uz iestatīto restorāna nosaukuma “steita” iestatīšanas funkciju. Tagad Jums vajadzētu apjaust, kādam mērķim iespējams izmantot useState hook un kā šis āķis tiek izmantots – kā tas darbojas praksē. Es ceru, ka darbs ar useState hook jums būs bezrūpīgs uzdevums, jo īpaši strādājot ar primitīviem datu tipiem, lai izsekotu steitu…

*Radi (angļu valodā “atoms”) ir strukturēšanas koncepcija, kas tiek izmantota, lai izveidotu dizaina sistēmu ar React komponentiem. Šī koncepcija ieviesta bibliotēkā “Storybook”, un tās mērķis ir nodrošināt saskaņotu veidu, kā strukturēt un organizēt komponentus, kas tiek izmantoti lietotāja saskarnē.

Radi koncepcija paredz, ka komponenti tiek sadalīti sīkākās komponentu daļās, kas tiek sauktas par “radiem”. Katrs radi ir vienkāršs un atkārtojams komponents, kas var būt vienkāršs teksta elements, pogas, ikonas u.c. Radi tiek izveidoti, lai būtu ļoti mazi un vienkārši komponenti, kas var būt viegli pielāgojami un izmantojami citos projektos.

Kopā ar radiem var tikt izveidoti augstākas līmeņa komponenti, kas tiek saukti par “molekulām”. Molekulas ir vairāku radiu kombinācijas, kas izveido vēl sarežģītākus un lielākus komponentus, piemēram, pogu rindas vai veidlapas laukus. Molekulas var tikt atkārtoti izmantotas un pielāgotas, lai izveidotu jaunas saskarnes.

Visbeidzot, izmantojot molekulas, var tikt izveidoti “organismi”, kas ir kompleksi un daudzveidīgi komponenti, piemēram, galvenes, lapas nosaukumi u.c. Organismi tiek izveidoti, lai nodrošinātu lietotājam pilnīgi funkcionālas saskarnes, kas ir viegli izmantojamas un pielāgojamas.

Tātad, radi koncepcija ir veids, kā strukturēt un organizēt React komponentus, izmantojot vienkāršu un atkārtojamu komponentu hierarhiju, kas ir viegli pielāgojama un izmantojama citos projektos. Tas var ievērojami uzlabot komponentu atkārtotību un uzturēšanu un nodrošināt vienmērīgu un konsekventu lietotāja pieredzi visā lietotāja saskarnē.