javascript - 专门针对 PureComponent 的 shouldComponentUpdate

Question

我正在尝试创建一个组件，当某个属性为真时，它不应该执行，但应该执行浅比较(PureComponent 的默认设置)。

我尝试过以下行为:

export default class ContentsListView extends PureComponent<Props> {
  shouldComponentUpdate(props: Props) {
    if (props.selecting) {
      return false;
    }
    return super.shouldComponentUpdate(props);
  }

  render() {
  }
}

但是，super.shouldComponentUpdate 没有定义。有什么方法可以在不编写自己的情况下“利用”PureComponent 的浅层比较吗？

Answer 1

当您使用 PureComponent 扩展您的组件时，您不应该实现 shouldComponentUpdate。但是，如果您想使用 shouldComponentUpdate 功能，您可以简单地围绕原始组件编写一个包装器组件，或者使用 HOC 来实现您的自定义 shouldComponentUpdate 并呈现 PureComponent

示例代码

class ContentsListView extends PureComponent {
  render() {
    console.log("render list");
    return (
      ...
    );
  }
}

export default class Wrapper extends React.Component {
  shouldComponentUpdate(props) {
    if (props.selecting) {
      return false;
    }
    return true;
  }
  render() {
    return <ContentsListView {...this.props} />;
  }
}

您可以在 codesandbox here 上看到一个工作演示