Какво е Hooks и употреби?
React е една от най-популярните библиотеки, използвани в уеб разработката днес. Той революционизира начина, по който се изграждат уеб приложенията, правейки го по-лесен и по-ефективен от всякога. Една от ключовите причини за неговата популярност е въвеждането на кукички, които улесниха разработчиците да управляват състоянието в своите приложения.
В тази статия ще разгледаме по-подробно какво представляват куките и как могат да се използват в React приложения. Ще започнем с обсъждане на концепцията за състояние в React, преди да преминем към обяснение какво представляват куките и как работят. Също така ще предоставим примери за това как куките могат да се използват в различни типове приложения на React.
Състояние в React
Преди да можем да обсъждаме куките, първо трябва да разберем концепцията за състояние в React. В React състоянието се използва за управление на данните, които се използват от компонент. Тези данни могат да бъдат всичко - от низ или число до масив или обект. Когато състоянието на компонент се промени, React автоматично рендерира компонента, за да отрази новото състояние.
Има два начина за управление на състоянието в React: използване на компоненти на клас и използване на функционални компоненти. Компонентите на класа използват специален метод, наречен setState, за да актуализират състоянието на компонент, докато функционалните компоненти разчитат на куки за управление на състоянието.
Какво представляват куките?
Куките са нова функция в React, която беше въведена във версия 16.8. Те позволяват на разработчиците да използват състояние и други функции на React във функционални компоненти. Това означава, че разработчиците вече могат да създават компоненти, които използват състояние, без да се налага да използват компоненти на класа.
Куките се предлагат в различни форми, като всяка служи за различна цел. Най-често използваните куки са useState, useEffect, useContext и useReducer. Ще обсъдим всяка от тези куки по-подробно по-долу.
useState
Куката useState се използва за управление на състоянието във функционални компоненти. Той приема начална стойност като аргумент и връща масив, съдържащ текущото състояние и функция, която може да се използва за актуализиране на състоянието. Ето пример за това как може да се използва useState:
```javascript
импортиране на React, {useState} от "реагиране";
функция Пример() {
const [count, setCount] {{0}} useState(0);
връщане (
Щракнахте {count} пъти
);
}
```
В този пример използваме useState за управление на състоянието на брояч. Първоначалната стойност на брояча е зададена на 0 с помощта на useState. След това използваме setCount, за да актуализираме стойността на брояча при всяко щракване върху бутона.
useEffect
Куката useEffect се използва за извършване на странични ефекти във функционални компоненти. Страничните ефекти са всички действия, които се извършват извън компонента, като извличане на данни от API или актуализиране на заглавието на страницата.
Куката useEffect приема два аргумента: функция, която изпълнява страничния ефект и масив от зависимости. Функцията се извиква всеки път, когато компонентът се визуализира и зависимостите се използват, за да се определи кога трябва да се извика функцията. Ето пример за това как може да се използва useEffect:
```javascript
импортиране на React, { useState, useEffect } от "react";
функция Пример() {
const [count, setCount] {{0}} useState(0);
useEffect(() => {
document.title=`Щракнахте ${count} пъти`;
}, [брой]);
връщане (
Щракнахте {count} пъти
);
}
```
В този пример използваме useEffect, за да актуализираме заглавието на страницата всеки път, когато броячът се актуализира. Предаваме масив, съдържащ променливата count за useEffect, която казва на React да извиква функцията само когато броят се промени.
useContext
Куката useContext се използва за достъп до данни, които се съхраняват в доставчик на контекст. Контекстът е начин за споделяне на данни между компоненти, без да се предават през props.
За да използваме useContext, първо трябва да създадем доставчик на контекст с помощта на функцията createContext. След това можем да използваме useContext за достъп до данните, съхранени в доставчика. Ето пример за това как може да се използва useContext:
```javascript
импортиране на React, { useState, useContext } от "react";
const ThemeContext=React.createContext("light");
функция Пример() {
const [тема, setTheme]=useState("light");
връщане (
);
}
функция Toolbar() {
const тема=useContext(ThemeContext);
връщане (
Текущата тема е: {theme}
);
}
```
В този пример използваме useContext за достъп до променливата на темата, съхранена в доставчика на ThemeContext. Можем да актуализираме променливата на темата, като щракнете върху бутона в компонента Пример.
употребаReducer
Куката useReducer се използва за управление на сложно състояние във функционални компоненти. Подобно е на куката useState, но вместо да обновява състоянието директно, използва редукторна функция, за да актуализира състоянието.
Редукторната функция приема два аргумента: текущото състояние и обект на действие. Връща ново състояние въз основа на извършеното действие. Куката useReducer приема функцията за намаляване и първоначалното състояние като аргументи и връща масив, съдържащ текущото състояние и функция за изпращане, която може да се използва за извършване на действия. Ето пример за това как може да се използва useReducer:
```javascript
импортиране на React, {useReducer} от "react";
функция редуктор(състояние, действие) {
превключвател (action.type) {
case "increment":
return { count: state.count + 1 };
case "decrement":
return { count: state.count - 1 };
по подразбиране:
извежда нова грешка();
}
}
функция Пример() {
const [състояние, изпращане] {{0}} useReducer(редуцер, {брой: 0});
връщане (
Щракнахте {state.count} пъти
);
}
```
В този пример използваме useReducer за управление на състоянието на брояч. Предаваме редуцираща функция, която актуализира променливата за броене въз основа на извършеното действие. След това използваме функцията за изпращане, за да извършим действията.
Заключение
Куките направиха по-лесно от всякога управлението на състоянието в React приложенията. Те ни позволяват да създаваме функционални компоненти, които могат да използват състояние и други функции на React, без да се налага да използваме компоненти на клас. В тази статия обсъдихме най-често използваните кукички в React: useState, useEffect, useContext и useReducer. Ние също предоставихме примери за това как тези куки могат да се използват в различни типове React приложения.
Като разберете как работят куките и как да ги използвате, можете да пишете по-ефективен и поддържаем код във вашите React приложения. Ако все още не сте го направили, препоръчваме ви да започнете да използвате куки в собствените си проекти и да изпитате ползите, които те носят в работния ви процес на разработка.