反应钩子如何引用传递给依赖项数组的值?



>假设我有这个组件,带有以下钩子:

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

上面的钩子将运行

  • 第一次执行组件代码时
  • 每次props.propOne的值发生变化时

但请注意,钩子回调也引用了pros.propTwo,而实际上并没有将其传递给依赖数组。

虽然props.propTwo永远不会考虑钩子是否被重新执行,但钩子回调在其体内引用的值会发生什么变化?

例如

  • 在初始组件渲染期间props.propOne === Aprops.propTwo === B
  • 钩子被执行并引用值AB
  • 在后续渲染期间props.propOne === Cprops.propTwo === D
  • 钩子被重新执行,因为props.propOne更改了。它引用props.propOne的值C,但它引用props.propTwo值的什么?B还是D

钩子是否基于组件执行时创建的闭包引用值,或者 React 是否做了一些巫毒教,它只保留传递给依赖项数组的值的更新值?

从文档中:

依赖项数组不会作为参数传递给回调。不过,从概念上讲,这就是它们所代表的:回调中引用的每个值也应该出现在依赖项数组中。

更新:

在问完这个问题之后,我落到了丹·阿布拉莫夫(Dan Abramov)的这篇文章上:

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

我建议大家阅读它。

>React hooks严重依赖closures来利用值。钩子中引用的值将是上次调用 useEffect 时闭包中存在的值。

例如,在您的示例中,如果更改了props.propOne,并且在随后的渲染 props.propTwo 中更改了,则useEffect回调中的props.propTwo值将是前一个值,因为当props.propTwo更改时不会执行 useEffect。

但是,如果您要一起更新props.propOneprops.propTwo,则钩子useEffect中的值将是更新的值。

考虑到props.propOneprops.propTwo一起更改并触发渲染的情况,props.propTwo的值将在回调useEffectD

相关内容

  • 没有找到相关文章

最新更新