微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

需要将每个useMemo依赖项包装在useCallback

如何解决需要将每个useMemo依赖项包装在useCallback

我希望有人能帮助我。我试图找到问题的答案,但我没有,所以,如果有,但找不到,我向您道歉。

因此,我有一个昂贵的操作,该操作取决于redux存储中存储的3个对象。由于价格昂贵,我只想在这三个对象中的任何一个发生更改时执行它。

为避免使useMemo执行的函数过于复杂,我将其拆分为较小的函数,然后在需要时调用这些函数,如下所示:

const computedValue = useMemo(() => {
  ...
  const result = processstoreObject1(storeObject1)
  ...
},[storeObject1,storeObject2,storeObject3,processstoreObject1])

现在,我不想将processstoreObject1列为useMemo的依赖项,计算值不依赖于它,计算值仅取决于3个存储对象。但是,如果我未将功能列出为useMemo的依赖项,则会收到以下棉绒警告:

“ React Hook useMemo缺少依赖项:'processstoreObject1'。要么包含它,要么删除依赖项数组。eslint(react-hooks / exhaustive-deps)”

由于此警告,我必须将该函数包括在依赖关系数组中,并且由于该函数是在组件内部声明的,因此类似于:

const MyComponent = () => {
  ...
  const processstoreObject1 = () => {
    // Do something
  }
  ...
}

我必须将其包装在useCallback中,否则它会随每个渲染而改变,并且useMemo一直都在重新计算(这是错误的)。如果不使用useCallback包装processstoreObject1,则会收到以下警告:

“'processstoreObject1'函数使useMemo Hook(在NNN行上)的依赖关系在每个渲染上都发生变化。要解决此问题,请将'processstoreObject1'定义包装到其自己的useCallback()Hook.eslint(react-hooks / exhaustive -deps)”

我知道一个简单的解决方案是在组件外部定义processstoreObject1,这样就不会在每个渲染器中创建它,但是我不喜欢这种方式,该函数仅在组件内部使用,因此我想在其中定义。

总而言之,问题是,如何在useMemo执行的函数中使用函数而不将依赖项添加到依赖项数组中。我知道这是可行的,我看到了一些不在依赖数组中使用的函数示例。

如果有人能帮助我,我会很感激。

谢谢!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。