За моите по-нови React-Native проекти свикнах да използвам куки. Куките са фантастична функция на React/React-Native, която ни позволява да използваме State във функционални компоненти, освен това ни позволяват да изпълняваме различни функции в нашето приложение в зависимост от това коя кука използваме, като useState, useRef, useEffect и useContext.
Освен това можем да създадем наши собствени кукички, което може да бъде много полезно, ако използваме повторно определена кукичка в много различни компоненти.
Една от най-често използваните кукички е „useState“, State ни позволява да запомним информация за определена част от компонент и да я използваме за други цели, т.е. можем да имаме част от състоянието, за да запомним текста, въведен от потребителя за имейл адрес или можем да имаме част от състояние, което съдържа дали дадена стойност е вярна или невярна.
В приложенията, които съм направил за моя лична употреба, съм попадал на ситуации, в които съм имал компоненти, които използват куката „useState“, за да запомнят информация от текстово поле, т.е. във формуляр за регистрация/вписване или в модален. Това означава, че трябва да запазя стойността, но също така да имам функция, която обработва текста и задава състоянието, когато потребителят напише нещо.
Така че вместо да правя функция за манипулиране за всяко въвеждане на текст, което използвам, или просто да добавя функцията setState директно към свойството „onChangeText“, мога да добавя един метод към персонализирана кука, да го върна от функцията и след това да направя екземпляр на куката в моя компонент и след това приложете метода за обработка на екземпляра върху свойството „onChangeText“ на текстовите входове, с които работите.
React куките ТРЯБВА винаги да започват с „use“, последвано от главна буква, т.е. useInput.
Друго нещо, което трябва да запомните е, че куките споделят логика на състоянието, а не самите стойности на състоянието. Например, ако сте имали 2 текстови входа в един компонент и сте направили 2 екземпляра на една и съща персонализирана кука, за да влезете в 2-те текстови входа, тогава и двата тези екземпляра са независими един от друг и няма да споделят стойностите на състоянието
Ще започна с изграждане на пример за това и ще го обясня, така че както обикновено създайте React-Native проект (използвайки командата по-долу) и го отворете в любимия си текстов редактор.
npx react-native@latest init…
