React.useMemo in class component

Question

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

我想知道，在类组件的情况下，我是否应该使用一些第三方备忘录助手(例如。洛达什备忘录、记忆一等(或者存在一些官方的类组件反应 API 方式。

感谢您的任何帮助。

附言

我想在更改子项的情况下生成 uuid。

使用SFC组件，我可以像这样使用备忘录

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

但是如何在没有任何第三方等的情况下为基于类的组件实现相同的目标
P.P.S.我不是在使用Redux等，只是纯粹的React.js

Answer 1

根据 React 文档：

如果只想在道具更改时重新计算某些数据，请使用记忆助手。

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

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。

Answer 2

使用 getDerivedStateFromProps。官方 React 文档在这里提到了这种技术。

从版本 16.3 开始，更新状态以响应 props 更改的推荐方法是使用新的静态 getDerivedStateFromProps 生命周期。

class MyComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
values: props.values,
childrenIds: []
};
}
static getDerivedStateFromProps(props, state) {
if (props.values !== state.values) {
return {
values: props.values,
childrenIds: generateIds(props.values)
};
}
return null;
}
render() {
return JSON.stringify(this.state.childrenIds);
}
}