Hvað er krókar og notkun?

Hvað er Hooks og notar?

React er eitt vinsælasta bókasafnið sem notað er í vefþróun í dag. Það hefur gjörbylt því hvernig vefforrit eru smíðuð, sem gerir það auðveldara og skilvirkara en nokkru sinni fyrr. Ein af lykilástæðunum fyrir vinsældum þess er kynning á krókum, sem hafa gert það auðveldara fyrir forritara að stjórna ástandi í forritum sínum.

Í þessari grein munum við skoða nánar hvað krókar eru og hvernig hægt er að nota þá í React forritum. Við munum byrja á því að ræða ástandshugtakið í React, áður en við förum að útskýra hvað krókar eru og hvernig þeir virka. Við munum einnig gefa dæmi um hvernig hægt er að nota króka í mismunandi gerðir af React forritum.

Ríki í React

Áður en við getum rætt króka þurfum við fyrst að skilja hugtakið ástand í React. Í React er ástand notað til að stjórna gögnunum sem eru notuð af íhlut. Þessi gögn geta verið allt frá streng eða tölu til fylkis eða hluta. Þegar ástand íhluta breytist, endurgerir React íhlutinn sjálfkrafa til að endurspegla nýja ástandið.

Það eru tvær leiðir til að stjórna ástandi í React: með því að nota bekkjaríhluti og nota virka hluti. Klassaíhlutir nota sérstaka aðferð sem kallast setState til að uppfæra stöðu íhluta, á meðan hagnýtir íhlutir treysta á króka til að stjórna ástandinu.

Hvað eru Hooks?

Hooks er nýr eiginleiki í React sem var kynntur í útgáfu 16.8. Þeir gera forriturum kleift að nota ástand og aðra React eiginleika í virkum íhlutum. Þetta þýðir að forritarar geta nú búið til íhluti sem nota ástand án þess að þurfa að nota bekkjarhluta.

Krókar koma í mismunandi gerðum, hver þjónar öðrum tilgangi. Algengustu krókarnir eru useState, useEffect, useContext og useReducer. Við munum ræða hvern þessara króka nánar hér að neðan.

useState

UseState krókurinn er notaður til að stjórna ástandi í virkum hlutum. Það tekur upphafsgildi sem rök og skilar fylki sem inniheldur núverandi ástand og fall sem hægt er að nota til að uppfæra ástandið. Hér er dæmi um hvernig useState er hægt að nota:

```javascript
flytja React, { useState } frá "react";

fall Dæmi() {
const [count, setCount] {{0}} useState(0);

skila (

Í þessu dæmi erum við að nota useState til að stjórna stöðu teljara. Upphafsgildi teljarans er stillt á 0 með useState. Við notum síðan setCount til að uppfæra gildi teljarans í hvert skipti sem smellt er á hnappinn.

useEffect

UseEffect krókurinn er notaður til að framkvæma aukaverkanir í virkum íhlutum. Aukaverkanir eru allar aðgerðir sem eru gerðar utan íhlutans, eins og að sækja gögn úr API eða uppfæra titil síðunnar.

UseEffect krókurinn tekur tvö rök: fall sem framkvæmir aukaverkunina og fjölda ósjálfstæðra. Fallið er kallað í hvert sinn sem íhluturinn er sýndur og ósjálfstæðin eru notuð til að ákvarða hvenær kalla á fallið. Hér er dæmi um hvernig useEffect er hægt að nota:

```javascript
flytja React, { useState, useEffect } frá „react“;

fall Dæmi() {
const [count, setCount] {{0}} useState(0);

useEffect(() => {
document.title=`Þú smelltir ${count} sinnum`;
}, [telja]);

skila (

Í þessu dæmi erum við að nota useEffect til að uppfæra titil síðunnar í hvert sinn sem teljarinn er uppfærður. Við sendum inn fylki sem inniheldur talningarbreytuna til useEffect, sem segir React að kalla aðeins á fallið þegar fjöldi breytist.

notaSamhengi

useContext krókurinn er notaður til að fá aðgang að gögnum sem eru geymd í samhengisveitu. Samhengi er leið til að deila gögnum á milli íhluta án þess að senda þau í gegnum leikmuni.

Til að nota useContext þurfum við fyrst að búa til samhengisveitu með því að nota createContext aðgerðina. Við getum síðan notað useContext til að fá aðgang að gögnum sem geymd eru í þjónustuveitunni. Hér er dæmi um hvernig hægt er að nota useContext:

```javascript
flytja React, { useState, useContext } frá „react“;

const ThemeContext=React.createContext("ljós");

fall Dæmi() {
const [þema, settÞema]=useState("ljós");

skila (

setTheme("dark")}>Skiptu yfir í dökkt þema


);
}

function Toolbar() {
const þema=useContext(ThemeContext);

skila (

Í þessu dæmi erum við að nota useContext til að fá aðgang að þemabreytunni sem er geymd í ThemeContext veitunni. Við getum uppfært þemabreytuna með því að smella á hnappinn í dæmihlutanum.

nota Reducer

UseReducer krókurinn er notaður til að stjórna flóknu ástandi í virkum hlutum. Það er svipað og useState krókurinn, en í stað þess að uppfæra ástandið beint, notar það afoxunaraðgerð til að uppfæra ástandið.

Minnkunaraðgerð tekur tvö rök: núverandi ástand og aðgerðahlut. Það skilar nýju ástandi byggt á aðgerðinni sem var framkvæmd. UseReducer krókurinn tekur afoxunarfallið og upphafsástandið sem rök og skilar fylki sem inniheldur núverandi ástand og sendingarfall sem hægt er að nota til að framkvæma aðgerðir. Hér er dæmi um hvernig hægt er að nota useReducer:

```javascript
flytja React, { useReducer } frá "react";

virkni minnkar (ástand, aðgerð) {
switch (action.type) {
„hækka“:
skila { count: state.count + 1 };
tilfelli "lækka":
skila { count: state.count - 1 };
sjálfgefið:
henda nýja Villa();
}
}

fall Dæmi() {
const [ástand, sending] {{0}} useReducer(reducer, { count: 0 });

skila (

Í þessu dæmi erum við að nota useReducer til að stjórna stöðu teljara. Við sendum inn minnkunaraðgerð sem uppfærir talningarbreytuna út frá aðgerðinni sem var framkvæmd. Við notum síðan sendingaraðgerðina til að framkvæma aðgerðirnar.

Niðurstaða

Krókar hafa gert það auðveldara en nokkru sinni fyrr að stjórna ástandi í React forritum. Þeir gera okkur kleift að búa til hagnýta íhluti sem geta notað ástand og aðra React eiginleika, án þess að þurfa að nota bekkjarhluta. Í þessari grein höfum við fjallað um algengustu krókana í React: useState, useEffect, useContext og useReducer. Við höfum einnig gefið dæmi um hvernig hægt er að nota þessa króka í mismunandi gerðir af React forritum.

Með því að skilja hvernig krókar virka og hvernig á að nota þá geturðu skrifað skilvirkari og viðhaldshæfari kóða í React forritunum þínum. Ef þú hefur ekki gert það nú þegar, hvetjum við þig til að byrja að nota króka í þínum eigin verkefnum og upplifa ávinninginn sem þeir hafa í för með sér fyrir þróunarvinnuflæðið þitt.