在 React 应用程序中导入和使用 nano-memoize？答案

【问题标题】：Import and use nano-memoize in react application?在 React 应用程序中导入和使用 nano-memoize？
【发布时间】：2019-09-01 18:17:38
【问题描述】：

我正在尝试在基于 React 的 Web 应用程序中使用 Nano-memoize，该应用程序也使用 Typescript 和 Webpack。

我已按照以下步骤操作：

npm install nano-memoize
已将import * as nanomemoize from 'nano-memoize' 添加到我的源文件中。
记忆了一个类似const memoizedFunc = nanomemoize(myFunc)的函数

myFunc 接受两个参数 - 一个字符串和一个字符串[]。

但是，我没有看到记忆化发生，因为 myFunc 中的调试语句正在为相同的参数打印。
这应该如何以正确的方式完成？

【问题讨论】：

我猜传递给 memoizedFunc 的参数发生了变化。请注意{hi:1}!=={hi:1} 和x=>x!==x=>x。因此，如果您像memoizedFunc({name,id}) 一样调用 memoizedFunc，那么您最好不要使用它。如果您使用的是 redux，那么您应该查看 reselect 或查看 useMemo 和 useCallback 钩子。
“但是，我没有看到记忆化发生。”是什么让你这么说？你如何检查记忆是否“发生”？
@Peter “myFunc”中的调试语句正在打印相同的参数。

标签： javascript reactjs webpack memoization

【解决方案1】：

Nano-memoize 不会对参数进行深度等于比较。传递给myFunct 的字符串[] 参数每次都是不同的对象，因此记忆化不起作用。

为了解决这个问题，我不得不在 nano-memoize 中使用 lodast.isquals 作为选项

const memoizedFunc = nanomemoize(myFunc, {
    // deep equals required since one of the parameter is a string array
    equals : (x, y) => isequal(x, y),
});

【讨论】：