时间戳

首页 > 解决方案 > React Hooks：为什么穷举-deps linter 规则要在依赖列表中的 useMemo 中使用本地函数？

javascript - React Hooks：为什么穷举-deps linter 规则要在依赖列表中的 useMemo 中使用本地函数？

问题描述

如果我在传递给的函数useMemo（或其他钩子）中使用本地函数，则穷举-deps linter 规则希望本地函数位于useMemo. 我知道每次渲染时，本地函数都是一个新实例。但是因为它从来没有真正改变过，在我看来没有必要放入依赖列表中，特别是因为我需要使用useCallback函数（这使得代码更复杂）。

这是一个工作示例：

const [inputNumber, setInputNumber] = useState(35);

function calculateFibonacciNumber(number) {
   return number < 1 ? 0 : number <= 2 ? 1 
      : calculateFibonacciNumber(number - 1) + calculateFibonacciNumber(number - 2);
};

const fibonacciNumber = useMemo(() => {
   return calculatedFibonacciNumber = calculateFibonacciNumber(inputNumber);
}, [inputNumber]); // Here the exhaustive-deps rule wants calculateFibonacciNumber in the dependency list

那么，是否有真正的理由calculateFibonacciNumber应该放在依赖列表中（通过useCallback）？

标签： javascriptreactjsreact-hooks

解决方案

我想这背后的原因是你calculateFibonacciNumber仍然在外面使用useMemo.

也许您可以尝试将定义移到里面，就像这样：

const fibonacciNumber = useMemo(() => {
   function calculateFibonacciNumber(number) {
      return number < 1 ? 0 : number <= 2 ? 1 
         : calculateFibonacciNumber(number - 1) + calculateFibonacciNumber(number - 2);
   };

   return calculatedFibonacciNumber = calculateFibonacciNumber(inputNumber);
}, [inputNumber]);

在这种情况下，您不会看到该警告消息。

我希望这会有所帮助！

推荐阅读