类组件中的 React.useMemo

Question

有没有办法在类组件的情况下使用这个钩子或它的一些类似 React API 的东西？

我想知道，我应该在类组件的情况下使用一些第三方备忘录助手（例如lodash memo、memoizeOne等），还是存在一些用于类组件的官方反应 API 方式。

谢谢你的帮助。

聚苯乙烯

我想在改变孩子的情况下生成 uuid。

使用 SFC 组件我可以像这样使用 useMemo

const keyValue = useMemo(() => uuid()(), [children])

但是如何在没有任何第三方等的情况下为基于类的组件实现相同的效果。
PPS 我没有使用 Redux 等，仅使用纯 React.js

Answer 1

根据React 文档：

如果您只想在 prop 更改时重新计算某些数据，请使用 memoization helper。

文档memoizeOne用作库，因此这将是一个不错的选择。您还可以keyValue作为副作用的一部分进行更改componentDidUpdate：

componentDidMount() {
  this.keyValue = uuid()()
}

componentDidUpdate(prevProps) {
  if (this.props.children !== prevProps.children) {
    this.keyValue = uuid()()
    // alternative: store keyValue as state to trigger re-render
  }
}

getDerivedStateFromProps可以是极少数情况下的替代方案，通常首选其他选项。

为什么useMemo不是一个好的选择uuid()

您可以依赖 useMemo 作为性能优化，而不是语义保证。将来，React 可能会选择“忘记”一些先前记忆的值并在下一次渲染时重新计算它们，例如为屏幕外组件释放内存。（文档）

const keyValue = useMemo(() => uuid()(), [children])尽管children在 React 未来中记忆值相同，但可能会重新计算。这种情况可能会导致不一致，如果uuid()返回一个新的 id，但children没有改变。

对于功能部件的另一种方法是useRef用useEffect取决于你的使用情况。