Реагировать на useEffect по глубине / использование useEffect? - PullRequest
Новая
       4

Реагировать на useEffect по глубине / использование useEffect?

10 голосов
/ 21 января 2020

Я пытаюсь понять хук useEffect.

Я хотел бы знать, когда использовать какой метод и почему? 

1.useEffect with no second paraments
 useEffect(()=>{})

2.useEffect with second paraments as []
  useEffect(()=>{},[])

3.useEffect with some arguments passed in the second parameter
 useEffect(()=>{},[arg])

Ответы [ 3 ]

18 голосов
/ 21 января 2020 
useEffect(callback)

Запускает при каждом рендеринге .

Обычно используется для отладки, аналогично выполнению тела функции при каждом рендеринге: 

const Component = () => {
  callback()
  return <></>;
};

useEffect(callback,[])

Запускает один раз при монтировании компонента.

Обычно используется для инициализации состояния компонентов путем выборки данных et c.

Примечание : обратный вызов выполняется после фазы рендеринга (известное "Gotcha"). 

useEffect(callback,[arg])

Запускается при изменении из arg значения.

«При изменении» относится к поверхностное сравнение с предыдущим значением arg ( сравнивает значение arg из предыдущего и текущего рендеринга prevArg === arg ? Do nothing : callback()).

Обычно используется для запуска событий при изменении состояния / состояния.

Примечание: несколько могут быть предоставлены зависимости: [arg1,arg2,arg3...]

1 голос
/ 21 января 2020

Если вы знакомы с методами жизненного цикла класса React, вы можете подумать о том, чтобы использовать useEffect Hook как комбинированные componentDidMount, componentDidUpdate и componentWillUnmount.

1.useEffect без вторых параметров: используется, когда нам что-то нужно произойдет, когда компонент только что смонтирован, или если он был обновлен. Концептуально, мы хотим, чтобы это происходило после каждого рендеринга.

2.useEffect со вторыми параметрами как []: используется, когда мы хотим, чтобы что-то произошло во время монтирования компонента, если выполняется только один раз в Время монтирования. Это ближе к привычным компонентам DidMount и componentWillUnmount.

3.useEffect с некоторыми аргументами, передаваемыми во втором параметре: это используется, когда мы хотим, чтобы что-то произошло во время передачи программы, например. Аргументы изменились в вашем случае.

Для получения дополнительной информации. проверьте здесь: https://reactjs.org/docs/hooks-effect.html

0 голосов
/ 27 января 2020

3.useEffect с некоторыми аргументами, передаваемыми во втором параметре useEffect (() => {}, [arg])

, он будет запущен первым, затем он снова запустится, если arg change

Вы также забыли спросить насчет возврата внутри useEffect ... Его использует для очистки, он будет запущен, когда компонент демонтируется

...