Ако сте разработчик на React, който все още не е научил за React куките, сега е моментът. Тази публикация ще премине подробно през useEffect React Hook. Това е еквивалент на куката на швейцарски армейски нож. Той решава различни проблеми, като например как да получите данни, когато компонент се монтира, как да стартирате код, когато състояние или опора се промени, как да настроите таймери или интервали и т.н.
UseEffect се използва за почти всичко, което искате да „правите“ в компонент на React, който не връща JSX (всякакъв вид страничен ефект). Може също да имате няколко useEffects на компонент.
Цялата тази сила има цена: освен ако не разберете как работи, може да е объркващо. В тази публикация ще разгледаме различни примери, за да можете да схванете концептуалния модел и да го приложите към собствения си код.
Реагирайте куки – Какво се опитва да реши?
Куките бяха въведени за първи път в React версия 16.8 и сега се използват от много проекти на React. Hooks преодолява проблема с повторението на кода между компонентите. Те са написани без използване на класове. Това не означава, че React изоставя класове; куките са просто алтернативен метод.
React ви позволява бързо да създавате сложни компоненти с логика на състоянието. Трудно е да се разделят тези компоненти, тъй като класът разчита на React Lifecycle Methods. Тук идват React Hooks.
Те ви позволяват да разделите компонент на по-малки функции. Вместо да разделяте кода на по-малки части въз основа на методите на жизнения цикъл, сега можете да подредите и разделите кода на по-малки единици в зависимост от функционалността.
Какво е useEffect Hook?
Куките са функции, които ви позволяват да получите достъп до състояние и други възможности за реакция, без да се налага да пишете ES6 класове. API за куки за реакция има кука, наречена useEffect. Ако сте запознати с жизнените цикли на реакцията, куката useEffect е същата като componentDidMount, componentDidUpdate, и компонентWillUnmount комбинирани методи на жизнения цикъл.
Според документацията на React Hooks, той е създаден за решаване на някои от проблемите с методите на жизнения цикъл на компонентите от клас ES6.
Синтаксис
Първият аргумент е функция за обратно извикване, която се изпълнява по подразбиране след всяко изобразяване. Вторият параметър е незадължителен масив на зависимост, който инструктира куката за обратно извикване само ако целевото състояние се промени.
Куката сравнява историческите и настоящите състояния на всяка зависимост. Ако двете стойности не съвпадат, Hook извиква обратното извикване, посочено в първия параметър. Масивите на зависимости променят обичайното поведение за обратно извикване и гарантират, че Hook игнорира всички други компоненти в обхвата на компонента.
Основно използване
За да запазя съобщение, използвам React useState в примерния код по-горе. След това вземам променливата си за състоянието на съобщението и я отпечатвам на екрана. Сега обаче искам да използвам Effect, за да променя съобщението секунда след монтирането на компонента.
Вмъкнах своя ефект зад линията useState след импортиране на useEffect от рамката React. Първият параметър за useEffect е функция. Когато този манипулатор на функции се изпълни, той ще се погрижи за всички странични ефекти, които предоставяте. Функцията е функция за обратно извикване, която се извиква, когато възникне едно от събитията в жизнения цикъл на компонента React.
Кога да го използвате?
Куката useEffect може да бъде полезна в различни ситуации. Следните са най-важните:
- Можем да променим този параметър от страна на клиента, когато искаме да извлечем данни в зависимост от предоставения аргумент. Той ще бъде извикан, след като параметърът бъде актуализиран с нови данни.
- Ако искаме да извлечем данни от крайна точка на API и да ги покажем от страна на клиента. Когато нашият компонент се рендира, функцията или манипулаторът, даден на куката useEffect, се изпълнява и данните в състоянията на компонента се извличат. След това тези състояния се използват в компонентите на потребителския интерфейс.
- Когато вашият компонент разчита на данни от външния свят и не можем да гарантираме, че данните ще пристигнат, трябва да използваме Effect (може би сървърът е там долу). Вместо да създавате проблеми и да предотвратявате показването на други компоненти, поставете ги в куката useEffect.
Защо OEE рипортинг?
Ако компонентът се изобрази повторно след първото изпълнение, той няма да се изпълни.
Всеки път, когато даден компонент се рендира или рендерира, той винаги трябва да се изпълнява.
По подразбиране програмата се изпълнява само веднъж. След това, ако стойностите на prop се променят, изпълнете:
За асинхронни дейности винаги използвайте useEffect.
Кодовите блокове на useEffect са очевидни маркери за асинхронни задачи за вашите колеги разработчици. Възможно е да се създаде асинхронен код без използване на useEffect, но това не е „методът React“ и увеличава както сложността, така и риска от грешки.
Използването на useEffect вместо писане на асинхронен код, който може да спре потребителския интерфейс, е добре позната техника в общността на React, особено начина, по който екипът на React го е изградил за извършване на страничен ефект.
Друго предимство на използването му е, че разработчиците могат просто да прегледат кода и незабавно да открият код, който се изпълнява „извън контролния поток“, което става важно само след първия цикъл на изобразяване. Освен това, блоковете са подходящи за извличане в многократна употреба и дори по-семантични персонализирани куки.
Пример
Използвайки кода useEffect, увеличете число в секунда.
Заключение
Разбирането на основните принципи на проектиране и най-добрите практики на useEffect Hook, според мен, е важно умение, което трябва да научите, ако искате да станете React разработчик от следващо ниво.
За да обобщим, useEffect Hook получава функция, която включва императивна, потенциално ефектна пълна логика. Масивът на зависимости, който е вторият параметър, може да се използва за влияние върху изпълнението. Докато се занимавате с него, също така е необходимо да напишете код за почистване с помощта на функцията за връщане.
Кажете ни в коментарите дали статията е била полезна.
Оставете коментар