Question

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

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

由于我的旧组件是React类，因此将其转换为React Hooks将花费相当多的时间

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's _.memoize。

只需突出显示：useMemo钩子是为了保留引用相等性（例如，如果某个函数返回数组或对象，则在每个渲染器上调用该函数将在每次运行< / em>）。因此，作为备忘的替代方法，您可以仅检查componentDidUpdate中的某些依赖项是否已更改，一旦更改，就可以计算一些新数据，例如，将其写入state或直接写入this （例如，如果这是从setTimeouer返回的定时ID）

我如何在React Class中记住函数，值

1 个答案: