说我有这个组件,带有以下钩子:
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做一些巫毒教,它仅保留传递给依赖项数组的值的更新值?
从文档中
不将依赖项数组作为参数传递给回调。不过,从概念上讲,这就是它们所代表的含义:回调中引用的每个值也应出现在依赖关系数组中。
更新:
问了一个问题之后,我落入了Dan Abramov的这篇文章:
https://overreacted.io/a-complete-guide-to-useeffect/
我建议大家阅读。
答案 0 :(得分: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
< / p>