Должен ли я использовать один или несколько useEffect в компоненте? - PullRequest
Новая
       45

Должен ли я использовать один или несколько useEffect в компоненте?

0 голосов
/ 02 января 2019

У меня есть несколько побочных эффектов, которые нужно применить, и я хочу знать, как их организовать:

  • как единичное использованиеEffect
  • или несколько useEffects

Что лучше с точки зрения производительности и архитектуры?

Ответы [ 2 ]

0 голосов
/ 23 июля 2019

Вы должны использовать несколько эффектов, чтобы разделить проблемы, как это предлагается по реагированию. https://reactjs.org/docs/hooks-effect.html#tip-use-multiple-effects-to-separate-concerns

0 голосов
/ 02 января 2019

Шаблон, которому вы должны следовать, зависит от вашего useCase.

Первый . Может возникнуть ситуация, когда вам нужно добавить прослушиватель событий во время первоначального монтирования и очистить их приunmount и другой случай, когда конкретный слушатель должен быть очищен и повторно добавлен при смене реквизита.В таком случае лучше использовать два разных useEffect, чтобы сохранить соответствующую логику вместе, а также иметь преимущества в производительности 

useEffect(() => {
   // adding event listeners on mount here
   return () => {
       // cleaning up the listeners here
   }
}, []);

useEffect(() => {
   // adding listeners everytime props.x changes
   return () => {
       // removing the listener when props.x changes
   }
}, [props.x])

Секунда: В некоторых случаях может потребоваться запусквызов API или какой-либо другой побочный эффект, когда какое-либо состояние или реквизит изменяются среди набора.В таком случае хорошей идеей будет один useEffect с соответствующими значениями для мониторинга 

useEffect(() => {
    // side effect here on change of any of props.x or stateY
}, [props.x, stateY])

Третий: Третий случай, когда вам нужно предпринять различные действия при измененииразных значений.В таком случае разделите соответствующие сравнения на различные useEffects

useEffect(() => {
   // some side-effect on change of props.x
}, [props.x])

useEffect(() => {
   // another side-effect on change of stateX or stateY 
}, [stateX, stateY])
...