Реагировать на 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 ... Он использует для очистки, он будет работать, когда компонент демонтируется

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

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

Ответы: