Якщо ви розробник React, який ще не дізнався про хуки React, зараз саме час. У цьому дописі буде детально розглянуто використання React Hook. Це гачок, еквівалент швейцарського армійського ножа. Він вирішує різноманітні проблеми, наприклад, як отримати дані під час монтування компонента, як запустити код, коли стан або параметр змінюється, як налаштувати таймери чи інтервали тощо.
UseEffect використовується майже для всього, що ви хочете «зробити» в компоненті React, який не повертає JSX (будь-який тип побічних ефектів). Ви також можете мати кілька useEffects для кожного компонента.
Вся ця сила коштує: якщо ви не зрозумієте, як вона працює, це може викликати незрозумілість. У цій публікації ми розглянемо різноманітні приклади, щоб ви могли зрозуміти концептуальну модель і застосувати її до свого коду.
Гаки для реагування – Що це намагається вирішити?
Хуки вперше були представлені у версії React 16.8 і тепер використовуються багатьма проектами React. Hooks долає проблему повторення коду між компонентами. Вони написані без використання класів. Це не означає, що React залишає класи; гачки є просто альтернативним методом.
React дає змогу швидко створювати складні компоненти з логікою стану. Важко розділити ці компоненти, оскільки клас покладається на React Lifecycle Methods. Тут на допомогу приходять React Hooks.
Вони дозволяють розділити компонент на менші функції. Замість того, щоб ділити код на менші частини на основі методів життєвого циклу, тепер ви можете впорядкувати та розділити код на менші блоки залежно від функціональності.
Що таке useEffect Hook?
Хуки — це функції, які дозволяють отримати доступ до стану та інших можливостей реагування без необхідності писати класи ES6. React hooks API має хук під назвою useEffect. Якщо ви знайомі з життєвими циклами реагування, хук useEffect такий самий, як і componentDidMount, componentDidUpdate та componentWillUnmount комбіновані методи життєвого циклу.
Згідно з документацією React Hooks, він був створений для вирішення деяких проблем із методами життєвого циклу компонентів класу ES6.
синтаксис
Першим аргументом є функція зворотного виклику, яка за замовчуванням виконується після кожного візуалізації. Другим параметром є необов'язковий масив залежностей, який наказує хуку виконувати зворотний виклик, лише якщо цільовий стан змінюється.
Хук порівнює історичний та поточний стан кожної залежності. Якщо два значення не збігаються, хук викликає зворотний виклик, зазначений у першому параметрі. Масиви залежностей змінюють звичайну поведінку зворотного виклику і гарантують, що Hook ігнорує всі інші компоненти в області дії компонента.
Основне використання
Щоб зберегти повідомлення, я використовую React useState у прикладі коду вище. Після цього я беру змінну стану свого повідомлення і друкую її на екрані. Однак тепер я хочу використовуватиEffect, щоб змінити повідомлення через секунду після того, як компонент було змонтовано.
Я вставив свій ефект за рядок useState після імпорту useEffect з фреймворка React. Першим параметром useEffect є функція. Коли цей обробник функцій виконується, він подбає про всі надані вами побічні ефекти. Функція — це функція зворотного виклику, яка викликається, коли відбувається одна з подій життєвого циклу компонента React.
Коли його використовувати?
Хук useEffect може бути корисним у різних ситуаціях. Найважливішими є наступні:
- Ми можемо змінити цей параметр на стороні клієнта, коли хочемо отримати дані залежно від наданого аргументу. Він буде відкликаний після оновлення параметра свіжими даними.
- Якщо ми хочемо отримати дані з кінцевої точки API та відобразити їх на стороні клієнта. Коли наш компонент відтворюється, виконується функція або обробник, наданий хуку useEffect, і витягуються дані в станах компонента. Ці статуси потім використовуються в компонентах інтерфейсу користувача.
- Коли ваш компонент покладається на дані із зовнішнього світу, і ми не можемо гарантувати, що дані надійдуть, ми повинні використовуватиEffect (можливо, сервер там внизу). Замість того, щоб створювати проблеми та запобігати відображенню інших компонентів, помістіть їх у хук useEffect.
Use cases
Якщо компонент повторно відтворюється після першого запуску, він не виконується.
Кожного разу, коли компонент відтворюється або повторно відтворюється, він завжди має виконуватися.
За замовчуванням програма запускається лише один раз. Після цього, якщо значення prop зміняться, запустіть:
Для асинхронних дій завжди використовуйте useEffect.
Блоки коду useEffect є очевидними маркерами асинхронних завдань для ваших колег-розробників. Можна створити асинхронний код без використання useEffect, але це не «метод React», і він підвищує як складність, так і ризик помилок.
Використання useEffect замість написання асинхронного коду, який може зупинити інтерфейс користувача, є добре відомим прийомом у спільноті React, особливо тим, як команда React створила його для виконання побічного ефекту.
Ще одна перевага його використання полягає в тому, що розробники можуть просто переглянути код і негайно виявити код, який виконується «поза потоком керування», що стає важливим лише після першого циклу візуалізації. Крім того, блоки придатні для вилучення в багаторазові та навіть більш семантичні користувацькі хуки.
Приклад
Використовуючи код useEffect, збільште число за секунду.
Висновок
Розуміння основних принципів проектування та найкращих практик useEffect Hook, на мою думку, є важливою навичкою, яку потрібно навчитися, якщо ви хочете стати розробником React наступного рівня.
Підводячи підсумок, гачок useEffect отримує функцію, яка включає імперативну, потенційно повну логіку ефекту. Для впливу на виконання можна використовувати масив залежностей, який є другим параметром. Під час роботи з ним також необхідно написати код очищення за допомогою функції повернення.
Повідомте нам у коментарях, чи була стаття корисною.
залишити коментар