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

10

Я пытаюсь понять 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])

javascript reactjs react-redux

— Джонни
источник

3

1. Вызывается при монтировании и каждом обновлении зависимостей (любое состояние / изменение реквизита). 2. Вызывается только при монтировании, потому что вы указали пустой список зависимостей. 3. Вызывается при монтировании и при изменении любой из перечисленных зависимостей

— ajobi

2

Дэн Абрамов написал отличный блог о useEffect: overreacted.io/a-complete-guide-to-useeffect . Вы должны прочитать это ;-)

— rphonika

18

useEffect(callback)

Работает на каждом компоненте рендера.

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

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

useEffect(callback,[])

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

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

Примечание : Обратный вызов выполняется после того, как на этапе рендеринга (Known «Попался»).

useEffect(callback,[arg])

Запускается на изменение в argстоимости.

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

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

Примечание. Можно указать несколько зависимостей: [arg1,arg2,arg3...]

— Деннис Ваш
источник

1

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

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

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

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

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

— Нилеш Бишт
источник

0

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

сначала он запустится, затем снова запустится при изменении аргумента

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

— Абу Дужана Махалайл
источник