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

Question

如果我在传递给useMemo（或其他挂钩）的函数中使用本地函数，则exhaustive-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）有真正的原因吗？

Answer 1

我猜这背后的原因是您在useMemo 之外使用calculateFibonacciNumber。

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

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

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

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

希望对你有帮助！