Как раньше выйти из хука useEffect?
В документы сказано, что мы должны вызывать хуки только на верхнем уровне наших компонентов. Из-за API useEffect return уже зарезервирован для очистки, что заставило меня задаться вопросом, как я могу раньше выйти из хука useEffect, чтобы предотвратить глубокую вложенность моих операторов if.
// instead of
React.useEffect(() => {
if (foo){
// do something
}
})
// I would rather write something like
React.useEffect(() => {
if (!foo){
// exit early and stop executing the rest of the useEffect hook
}
// do something
})
Как я могу этого добиться? В моем первом примере все может быстро запутаться со сложной условной логикой, особенно если учесть, что я не могу использовать useEffect внутри условного оператора.
Ответы 1
Как и из любой функции, из нее можно выйти досрочно с помощью ключевого слова return.
Эти два фрагмента эквивалентны:
React.useEffect(() => {
if (foo){
// do something
}
})
React.useEffect(() => {
if (!foo){
return;
}
// do something
})
Итак, очистка будет запущена только в том случае, если я верну функцию, подобную return () => /* cleanup */?
Это правильно. return;, return undefined; и вообще без возврата полностью взаимозаменяемы в JS.
Как уже упоминалось, просто выполнение
return, как и в любой функции JS, будет работать. Но сначала может быть идея подумать о том, зачем вам нужно это условие. Иногда может быть лучше разделить компонент больше. Например, скажем, у нас есть компонент с именемMultiEdit, и мы хотим иметь свойство с именемeditType, это будет отображать два разных стиля элементов управления, поэтому может потребоваться другая семантикаuseEffect, а не использованиеif (!style1) returnи т. д., вы могли бы просто создайте 2 подкомпонента, скажем,EditStyle1иEditStyle2и т. д. Затем вы можете условно визуализировать их.