Question

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

因此，我有一个昂贵的操作，该操作取决于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执行的函数中使用函数而不将依赖项添加到依赖项数组中。我知道这是可行的，我看到了一些不在依赖数组中使用的函数示例。

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

谢谢！

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

0 个答案: