Скажем, у меня есть этот компонент со следующим хуком:
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/
Предлагаю всем прочитать.
Да, но суть вопроса была не в этом.
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
Это, кажется, подтверждает мое собственное понимание тогда. Спасибо.
Конечно, простое решение состоит в том, чтобы включить props.propTwo в зависимости, тогда, если, как вы говорите, «Хотя props.propTwo никогда не будет учитывать, будут ли хуки выполняться повторно ...»?