14

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

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

谢谢你的帮助。

附言

我想在更改儿童的情况下生成 uuid。

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

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

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

4

2 回答 2

14

根据反应文档：

如果您只想在 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 可能会选择“忘记”一些先前记忆的值并在下一次渲染时重新计算它们，例如为屏幕外组件释放内存。（文档）

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

对于功能组件，可以根据您的用例使用useRef替代方法。useEffect

于 2020-05-21T10:52:52.360 回答
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);
  }
}
于 2020-05-21T09:27:08.977 回答