javascript - 在PureComponent上专门化了shouldComponentUpdate

我正在尝试创建一个组件，该组件在某个属性为true时不应该，但是应该执行浅表比较(PureComponent的默认值)。

我尝试过以下行为:

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

  render() {
  }
}

但是，没有定义super.shouldComponentUpdate。有没有办法在不编写我自己的内容的情况下“挖掘” PureComponent的浅表比较？

最佳答案

使用shouldComponentUpdate扩展组件时，不应实现PureComponent。但是，如果要使用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

关于javascript - 在PureComponent上专门化了shouldComponentUpdate，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48792262/