Использование useEffect
Мы используем useEffect для обработки побочных эффектов. Да, и это все, что есть, и немного больше. Но прежде давайте узнаем, какие есть побочные эффекты.
Что такое побочные эффекты?
Основная задача React - визуализировать пользовательский интерфейс и реагировать на ввод пользователя. Управление состоянием, реквизитами, обработкой событий и повторным рендерингом компонентов также входит в состав Main-task.
«Побочный эффект» - это все, что происходит вне цикла оценки и рендеринга компонента.
Его пример будет включать вызовы API, использование функций таймера и т. Д.
структура useEffect
useEffect (() = ›{…}, [список зависимостей]);
Первый параметр - это функция обратного вызова, которая будет выполняться после каждой оценки компонента, если указанные зависимости изменяются.
Второй параметр - это список зависимостей, которые при изменении от предыдущего рендеринга компонента вызовут функцию обратного вызова.
Давайте посмотрим на примеры:
Мы можем использовать useEffect тремя способами:
i) без зависимостей
ii) с пустыми зависимостями
iii) с зависимостями
i) Без зависимостей
Здесь вы можете увидеть, что зависимостей нет (даже пустых зависимостей). Использование useEffect без зависимостей так же хорошо, как и не использовать его. Если бы код выборки был написан без useEffect, он работал бы точно так же.
Без какой-либо зависимости useEffect будет запускаться при каждом рендеринге, просто нарушая его цель . Это также вызовет бесконечный цикл между выборкой и setParaList.
ii) useEffect с пустыми зависимостями
Так в чем разница? Раньше у нас не было зависимостей, теперь у нас есть пустая зависимость. Кажется, то же самое, правда?
НЕТ, разница между ними в том, что на этот раз useEffect запустится только после первого рендеринга.
После этого, даже если мы изменим заголовок, это не повлияет, потому что список зависимостей пуст.
iii) useEffect с зависимостью
Теперь с зависимостью useEffect определенно будет запускаться при первом рендеринге, но после каждого второго повторного рендеринга он будет проверять, изменилась ли зависимость. Если да, то он запустит useEffect, в противном случае - нет.
Теперь, что вы можете добавить в качестве зависимостей
Зависимости могут быть чем угодно, что вы используете в функции useEffect и можете изменить ваш компонент. Нет необходимости добавлять функции обновления состояния (хотя их можно добавить в список зависимостей), потому что React гарантирует, что они никогда не изменятся. Также не нужно добавлять встроенный API браузера в качестве зависимости, поскольку он не зависит от нашего компонента и не изменяется.
