如何在 React 类中记忆函数、值答案

【问题标题】：How can I memoize functions, values in React Class如何在 React 类中记忆函数、值
【发布时间】：2020-04-07 20:30:16
【问题描述】：

这是一个有点傻的问题，但我可以在 React 类（或等效解决方案）中使用 useCallback 和 useMemo 吗？这是一个好习惯吗？

我找到的解决方法是使用一个名为 Memoizee 的包：https://www.npmjs.com/package/memoizee。但是，这是第 3 个包（有没有 React 内置解决方案？）

由于我的旧组件是 React 类，因此将其转换为 React Hooks 需要相当长的时间

【问题讨论】：

@ori-drori 不，这不是重复的，我的问题是如何在 React 类中记忆值（或函数）？网上所有的文章都是关于 React Hooks 中的 memoizing
您的措辞明确表示useCallback 和useMemo，所以有点误导。您应该更改问题，并添加一些您尝试过的代码。除非您想被否决，并且由于其他原因而关闭问题。但是，周围的反应问题/答案中有很多无钩的记忆。
我换个标题，我觉得现在已经够清楚了

标签： javascript reactjs react-hooks

【解决方案1】：

对于useCallback，很容易获得。使用类属性语法（在渲染之间存储值）和箭头函数表达式（绑定this），您可以这样做：

 onClick = (e) => { this.setState({ clicked: true }); }
...
 render() {
   ...
   <button onClick={this.onClick}

当然，如果不想包含 babel 插件来支持类属性，您可以在构造函数中执行此操作：

 constructor() {
   this.onClick = this.onClick.bind(this);
 }

 onClick(e) {
   this.setState({ clicked: true });
 }

至于useMemo，您可以使用任何现有的软件包，比如lodash's _.memoize。

只是强调一下：useMemo 钩子是为了保持引用相等性（例如，如果某个函数返回一个数组或一个对象，而不是在每次渲染时调用该函数将在 每次运行时提供不同的引用结果)。因此，作为记忆的替代方法，您可以只检查componentDidUpdate 中的某些依赖项是否已更改，一旦更改-计算一些新数据，例如，将其写入state 或直接写入this（比如说，如果那是定时的从setTimeouer返回的ID）

【讨论】：

很有帮助