如何处理传递给依赖项数组的引用值？

Question

假设我有这个组件，带有以下钩子：

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已更改。对于props.propOne它引用值C，但是对于props.propTwo值它引用了什么<代码>B或D

钩子引用值是基于组件执行时创建的闭包，还是React做了一些巫术，它只保留传递给依赖关系数组的值的更新值？

从文档中：

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

更新：

问了这个问题后，我想到了丹·阿布拉莫夫的这篇文章：

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

我建议大家读一读。

Answer 1

React钩子严重依赖于闭包来利用值。钩子中引用的值将是上次调用useEffect时出现在其闭包中的值。

例如，在您的示例中，如果更改了props.propOne，并且在随后的渲染props.propTwo中更改了props.propTwo，则useffect回调中的props.propTwo的值将与以前的值相同，因为在props.propTwo更改时不执行useffect。

但是，如果同时更新props.propOne和props.propTwo，则useffect钩子中的值将是更新后的值。

考虑到props.propOne和props.propTwo一起更改并触发渲染的情况，props.propTwo的值将是D内部的use效应回调