也许我误会了一些东西,但是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 = useMemo(() => expensiveCalc('useMemo'), [neverChange]);
setTimeout(() => setSecond(second + 1), oneSecond);
return `
useCallback: ${computedCallback} times |
useMemo: ${computedMemo} |
App …Run Code Online (Sandbox Code Playgroud)reactjs ×1