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

Скажем, у меня есть этот компонент со следующим хуком:

function SomeComponent(props) {
useEffect(
    () => {
        //....code
        if (props.propOne === ....) { .... }
        // ...code
        if (props.propTwo === ....) { .... }
    }, 
    [props.propOne]
)

return <Something />

}

Вышеупомянутый хук будет работать

  • один раз при первом выполнении кода компонента
  • каждый раз, когда значение props.propOne меняется

Однако обратите внимание, что обратный вызов хука также делает ссылку на pros.propTwo, фактически не передавая его массиву зависимостей.

Хотя props.propTwo никогда не будет учитывать, будут ли хуки выполняться повторно, что происходит со значением, на которое ссылается обратный вызов хука внутри своего тела?

Например

  • Во время начального рендеринга компонента props.propOne === A и props.propTwo === B
  • Хук выполняется и ссылается на значения A и B
  • Во время последующего рендеринга props.propOne === C и props.propTwo === D
  • Хук выполняется повторно, так как props.propOne изменился. Он ссылается на значение C для props.propOne, но на что он ссылается для значения props.propTwo? B или D?

Ссылочные значения хука основаны на замыкании, созданном при выполнении компонента, или React использует какое-то вуду, сохраняя только обновленное значение для значений, переданных в массив зависимостей?

Из документов:

The array of dependencies is not passed as arguments to the callback. Conceptually, though, that’s what they represent: every value referenced inside the callback should also appear in the dependencies array.

ОБНОВИТЬ:

Задав вопрос, я наткнулся на эту статью Дэна Абрамова:

https://overreacted.io/a-complete-guide-to-useeffect/

Предлагаю всем прочитать.

Конечно, простое решение состоит в том, чтобы включить props.propTwo в зависимости, тогда, если, как вы говорите, «Хотя props.propTwo никогда не будет учитывать, будут ли хуки выполняться повторно ...»?

rrd 29.05.2019 11:10

Да, но суть вопроса была не в этом.

Dimitris Karagiannis 29.05.2019 11:29
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
2
270
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

React hooks в значительной степени полагаются на closures, чтобы использовать ценности. Значения, на которые ссылаются в хуке, будут значениями, которые присутствовали в закрытии useEffect, когда оно было вызвано в последний раз.

Например, в вашем примере, если props.propOne изменено и в последующем рендере props.propTwo изменено, значение props.propTwo внутри обратного вызова useEffect будет прежним значением, поскольку useEffect не выполняется при изменении props.propTwo.

Однако, если вы обновляете props.propOne и props.propTwo вместе, то значение внутри хука useEffect будет обновленным.

Учитывая ваш случай, когда props.propOne и props.propTwo изменяются вместе и вызывают рендеринг, значение props.propTwo будет D внутри обратного вызова useEffect

Это, кажется, подтверждает мое собственное понимание тогда. Спасибо.

Dimitris Karagiannis 29.05.2019 11:30

Другие вопросы по теме