UseState срещу. useReducer в React: Избор на правилната кука за управление на състоянието

Ако искате да намерите работа за уеб разработка, ще имате по-добър шанс да успеете, ако научите библиотеката на React JavaScript. React е една от най-използваните библиотеки в индустрията. И една от най-интересните функции на React библиотеката е концепцията за куките.

Куките са просто JavaScript функции, които изолират и ви позволяват да използвате повторно логиката в React приложение. За управлението на държавата има две основни куки, достъпни за вас - useState кука и useReducer кука.

Преглед на useState Hook

The useState hook е най-често срещаният начин за обработка на състояние в React. Синтаксисът по-долу илюстрира как да използвате тази кука във вашето приложение:

конст [състояние, setState] = useState (initialStateValue);

В кодовия блок по-горе, състояние променливата съхранява данни в паметта между изобразяванията. И setState е функцията "setter", която манипулира състояние променлива.

The useState hook връща масив с точно два елемента. Той също така приема първоначална стойност за променливата на състоянието.

Например, ако искате да дефинирате променлива на състоянието, която представлява възрастта на потребителя, с първоначална стойност 17, ето как бихте го направили:

конст [userAge, setUserAge] = useState(17);

The setUserAge функция е отговорна за модифицирането на userAge променлива на състоянието.

setUserAge(19);

Важно е да се отбележи, че актуализирането на състоянието задейства повторно изобразяване на компонент, а неправилното актуализиране на променлива на състоянието може да доведе до безкраен цикъл, който може да наруши кода ви.

В React не е препоръчително да променяте състоянието директно (както е показано в кодовия блок по-долу), тъй като промените в променливите без състояние не продължават между изобразяването на компоненти.

потребителска възраст = 19;

Състоянието е локално за компонента, който го определя. Ако имате едни и същи компоненти, изобразени на екрана няколко пъти, всеки компонент ще има свое собствено независимо състояние.

функцияПриложение(){
връщане (




 </div>
 )
}

В кодовия блок по-горе има два Превключване компоненти, но всеки компонент обработва собственото си състояние и не разчита на другия компонент, освен ако единият компонент не споделя състоянието си с другия компонент.

React обработва актуализациите на състоянието чрез групиране. Това означава, че когато извикате функцията за настройка на променлива на състоянието, променливата на състоянието не се актуализира до следващото повторно изобразяване.

Общ преглед на useReducer Hook

useReducer е кука на React това може да ви бъде от полза винаги, когато искате да обработвате множество свързани състояния едновременно. Синтаксисът за useReducer изглежда нещо подобно:

конст [състояние, изпращане] = useReducer (редуктор, initialState)

В сравнение с useState, в useReducer, има състояние променлива и a изпращане функция, която изпраща действия до редуктор функция, която обработва полезни товари и актуализира състояние.

Да кажем например, че създавате просто приложение за брояч с бутони, които могат да нулират брояча, да увеличат стойността на брояча или да го намалят. Използвайки useState кодът ви ще изглежда така:

функцияБрояч(){
конст [count, setCount] = useState(0);
връщане(


 Броят е: {count}


 setCount (брой + 1)}>Увеличаване на броя</button>
 setCount(0)}>Нулиране</button>
 setCount (брой - 1)}>Намаляване на броя</button>
 </div>
 </div>
 )
}

Горната реализация работи перфектно. Но можете да постигнете същите резултати и с помощта на useReducer кука.

Този пример просто има за цел да демонстрира как useReducer куката работи. В приложение от реалния свят, useReducer е прекалено за този сценарий.

useReducer улеснява обработката на свързани състояния и сложна логика, базирана на Тип премина в изпратените действие обект.

Например функцията за изпращане може да изпрати действие обект, който изглежда така:

{Тип:"тип_действие", полезен товар:състояние * 2}

Първо импортирайте useReducer кука, след което дефинирайте редуктор функция с параметрите: състояние и деструктурираните действие обект.

импортиране {useReducer} от"реагира";
функцияредуктор(състояние, {тип, полезен товар}) {
ако (Тип 'countIncrease') {
връщане полезен товар;
 } другоако (Тип 'countDecrease') {
връщане полезен товар;
 } другоако (Тип 'countReset') {
връщане полезен товар;
 } друго {
връщане състояние;
 }
}

След дефиниране на редуктор функция, можете да изградите Брояч компонент с useReducer кука.

функцияБрояч() {
конст [брой, изпращане] = useReducer (редуцент, 0);
връщане (


 Броят е: {count}


 изпращане ({ Тип: 'countIncrease', полезен товар: брой + 1 })}>
 Увеличете броя
 </button>
 изпращане ({ Тип: 'countReset', полезен товар: 0 })}>
 Нулиране на броя
 </button>
 изпращане ({ Тип: 'countDecrease', полезен товар: броя - 1 })}>
 Увеличете броя
 </button>
 </div>
 </div>
 );
}

В кодовия блок по-горе първият бутон изпраща действие от тип countIncrease с полезен товар от брой + 1. Това действие е отговорно за увеличаването на стойността на броя.

Вторият бутон изпраща действие от тип countReset с полезен товар 0, който нулира стойността на броя обратно на 0.

Третият бутон изпраща действие от тип брой Намаляване с полезен товар от брой - 1 което намалява стойността на броя с 1.

Избор между useState и useReducer Hooks

Сега, когато разбирате как да използвате useState и useReducer куки, важно е да знаете кога да използвате правилната.

Ако вашето състояние не изисква сложна логика, тогава очевидно се използва useReducer може да бъде пресилено.

Ако състоянието ви е нещо друго освен JavaScript примитиви като числа, низове и булеви стойности, трябва да използвате useState кука. И ако типът състояние е обект или масив, тогава трябва да обмислите използването useReducer вместо.

С нарастването на сложността на вашето приложение става трудно да се справяте със състоянието само с useState и useReducer кукички.

Това е кога можете да използвате външни библиотеки като Redux, Джотай и Зустанд. Тези библиотеки улесняват обработката на промените в състоянието на множество компоненти.

Улесняване на управлението на състоянието с JavaScript библиотеки

Всички библиотеки като React, Vue и Svelte имат свои собствени начини за обработка на състоянието. Самостоятелното управление на състоянието с ванилен JavaScript определено е нещо, което можете да опитате, но е много по-лесно и удобно да използвате изпитана в битка JavaScript библиотека.

Ако създавате сложно приложение с помощта на React, където трябва да управлявате няколко компонента, Redux може да е най-добрият избор за вас.