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

Question

这是一个有点愚蠢的问题，但我可以在 React 类(或等效的解决方案(中使用 useCallback 和 useMemo 吗？这是一种好的做法吗？

我发现的解决方法是使用名为 Memoizee： https://www.npmjs.com/package/memoizee 的包。但是，这是第三个包(有没有 React 内置解决方案？

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

Answer 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 的_.memoize.

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