记忆回调函数

Question

我正在尝试这个备忘录

function getData(n, m, callback){
    callback(n+m);
};
let memoizedData = memoize(getData);
console.log(memoizedData(5, 4, (result)=>{})) // 9;

我想缓存结果，即 9，所以每当下次调用发生时，它都会从缓存中获取。 如果 getData 将返回 n+m 而不是放入回调，我理解记忆。 任何帮助将不胜感激。

编辑：想通过 vanillaJs 来实现。 为更清楚起见，编辑了上述问题

function getData(n, m, callback){
    callback(n+m);
};
let memoizedData = memoize(getData);
memoizedData(5, 4, (result)=>{console.log(result)}) // 9;
memoizedData(5, 4, (result)=>{console.log(result)}) // 9 - returned from cache

Answer 1

如果我理解正确，您要求的是memoize 的实现。至于你的console.log：这很奇怪，因为结果不是返回，而是作为参数传递给回调。因此，您实际上应该在该回调中进行打印。你甚至可以通过console.log 作为回调。

对于memoize的实现，我假设要记忆的函数总是有一个回调作为最后一个参数。

首先，memoize 应该返回一个函数，该函数接受与被记忆的函数相同的参数。

这个想法是维护一个 Map，由传递给函数的参数（不包括回调参数）和相应的结果作为键。构建密钥的一种方法是形成参数的 JSON 表示。

当memoize 被调用，并且参数形成一个已经存在于映射中的键时，然后使用映射中的相应值调用回调。如果不存在，则使用相同的参数集调用函数，回调除外。让回调是一个将结果存储在地图中的函数，然后将结果传递给传递给memoize的回调。

你可以这样写：

function memoize(func) {
    let map = new Map; // for memoization
    return function(...args) {
        let callback = args.pop(); // last argument must be a function
        let key = JSON.stringify(args);
        let result = map.get(key);
        if (result !== undefined) {
            console.log(`getting result from map.get('${key}')`);
            return callback(result);
        }
        console.log(`calling ${func.name}(${args.join(", ")}, callback)`);
        func(...args, result => {
            console.log(`writing result with map.set('${key}', ${result})`);
            map.set(key, result);
            callback(result);
        });
    }
}

function getData(n, m, callback){
    callback(n+m);
}
let memoizedData = memoize(getData);


memoizedData(5, 4, console.log) // 9 calling getData;
memoizedData(5, 4, console.log) // 9 from memory;

请注意：

memoizedData(5, 4, console.log)

...只是“短”：

memoizedData(5, 4, (result) => console.log(result))

唯一的区别是console.log 周围有一个额外的包装函数，但实际上并没有真正的区别。

Answer 2

如果你问如何实现 memoization，你可以这样实现

import { useMemo, useCallback } from 'react';

export default function Index() {
  const getData = useCallback((n, m, callback) => callback(n + m), []);

  let memoizedData = useMemo(() => getData(5, 4, (result) => result), [
    getData,
  ]);
  console.log(memoizedData);
  return null;
}