也许我误解了一些东西,但是每次重新渲染发生时 useCallback Hook 都会运行。
我传递了输入 - 作为 useCallback 的第二个参数 - 不可更改的常量 - 但返回的记忆回调仍然在每次渲染时运行我的昂贵计算(我很确定 - 你可以在下面的代码片段中自己检查)。
我已将 useCallback 更改为 useMemo - useMemo 按预期工作 - 在传递的输入更改时运行。并真正记住昂贵的计算。
现场示例:
'use strict';
const { useState, useCallback, useMemo } = React;
const neverChange = 'I never change';
const oneSecond = 1000;
function App() {
const [second, setSecond] = useState(0);
// This expensive function executes everytime when render happens:
const calcCallback = useCallback(() => expensiveCalc('useCallback'), [neverChange]);
const computedCallback = calcCallback();
// This executes once
const computedMemo = …Run Code Online (Sandbox Code Playgroud)