React Hooks:为什么 exhaustive-deps linter 规则需要在依赖列表中使用 useMemo

Question

如果我在传递给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(？

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]);

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

我希望这有所帮助！