Какво представляват куките?
Куките са нова функция, въведена в React 16.8. Те ви позволяват да използвате методи за състояние и жизнен цикъл на компонента от функционалните компоненти на React. Преди кукичките тези функции можеха да се използват само в контекста на компонентите на класа.
Защо трябва да използвам куки?
Куките не са предназначени да заменят компонентите на React клас. Те са просто още един начин за постигане на същата цел. Те обаче подобряват стария начин на правене на нещата по няколко ключови начина. Някои кукички, като useEffect, комбинират функционалността на множество методи на жизнения цикъл на компонента. Това може да ви позволи да изсушите повтарящия се код, разпространен в различни методи на жизнения цикъл. Куките също са полезни, защото означават, че не е нужно напълно да пренаписвате функционални компоненти като компоненти на клас, ако искате да добавите състояние. И накрая, куките опростяват начина, по който управлявате състояние. Преди кукичките използването на състояние в компонент означаваше да трябва да напишете метод на конструктор, както и използването на „this“. Използването на 'this'в контекста на компонент на React става объркващо, защото обхватът на 'this' се променя, ако е поставен във функция, освен ако не използвате правилно обвързващи или стрелкови функции. Но тъй като куките работят само във функционални компоненти на React, няма повече „this“и няма повече конструктори!
Полезни кукички:
Две често използвани кукички са useState и useEffect. Те се използват вместо основни методи за управление на състоянието и жизнен цикъл в React класове. Ето „пълен списък“ на куките на React.
useState
useState е кука на React, предназначена да замени функционалността this.state и this.setState на класа на React. useState премахва необходимостта от конструктор, както се използва в компонентите на клас React. Той също така премахва използването на „това“, когато се опитвате да получите достъп или да актуализирате състоянието на компонента.
извикването на useState връща две неща:
- Променлива на състоянието — след това може да бъде извикана във всяка точка на вашата функция, за да върне стойността на текущото състояние.
2. Функция set — това е, което ще извикате, за да актуализирате стойността на променливата на състоянието.
Ще искате да присвоите и двете на променлива, когато извикате useState, за да можете да ги препратите отново по-късно в кода си.
Когато извиквате useState, вие също ще искате да предадете първоначалната стойност на променливата на състоянието като аргумент.
Тук scrollPositionе името на променливата на състоянието, а setScrollPositionе името на функцията, използвана за актуализиране на scrollPosition. Тъй като предадох 0 на useState, първоначалната стойност на scrollPositionще бъде 0.
За да получите достъп до вашата променлива на състоянието, просто я препратете, както бихте направили всяка друга променлива:
За да зададете стойността на вашата променлива на състоянието, извикайте метода, който сте задали на променлива, когато извиквате useState, и предайте новата стойност:
useEffect
useEffect е сравним с методите на жизнения цикъл на компонентите на React ComponentDidMount, ComponentDidUpdate и ComponentWillUnmount.
useEffect съчетава функционалността на ComponentDidMount и ComponentDidUpdate, защото се изпълнява не само когато компонент се монтира, но и при всяко следващо повторно изобразяване или актуализиране. Доста обичайно е да искате да извършвате едни и същи действия по време на двете фази от жизнения цикъл на компонента, така че useEffect наистина ви позволява да изсушите кода си чрез комбиниране на тези методи.
Той също така ви позволява да извършвате определени действия, когато компонент е на път да демонтира — подобно на метода на жизнения цикъл на ComponentWillUnmount. Всяка функция, която се връща от куката useEffect, автоматично ще се стартира, когато компонентът се демонтира.
useEffect приема два аргумента — първият е функция за обратно извикване (или „ефектът“), където ще включите всеки код, който искате да изпълните по време на жизнения цикъл на компонента. Вторият (незадължителен) аргумент приема масив от променливи за проверка за промени, преди да стартира ефекта. Ако нито една от стойностите на променливите не се е променила, ефектът няма да се стартира отново. Това може да помогне много за производителността на приложението. Ако искате вашата кука useEffect да се изпълнява само когато компонентът се монтира, подайте тук празен масив. Тъй като празният масив никога няма да се промени, ефектът ще се изпълни само веднъж.
Благодаря за четенето!
източници:
