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

时间:2019-05-29 08:19:37

标签: reactjs react-hooks

说我有这个组件,带有以下钩子:

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更改以来,该挂钩被重新执行。它为C引用了值props.propOne,但是它为props.propTwo引用了什么? B还是D

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

从文档中

  

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

更新:

问了一个问题之后,我落入了Dan Abramov的这篇文章:

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

我建议大家阅读。

1 个答案:

答案 0 :(得分:1)

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

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

但是,如果您要同时更新props.propOneprops.propTwo,则useEffect挂钩中的值将是更新的。

考虑到您将props.propOneprops.propTwo一起更改并触发渲染的情况,props.propTwo的值将是D回调内的useEffect < / p>