javascript - 如何防止withRouter导致PureComponent重新渲染？

Question

我可以通过 history.push("/path") 调用一个链接。要访问 history，我必须使用 withRouter 将多个 Prop 传递给组件。 withRouter 传递的match 即使路径不变也是不同的。这会导致 PureComponent 重新呈现。有办法解决这个问题吗？

例子:

class HomeButton extends PureComponent {
  onClick = () => {
    const { history } = this.props;
    history.push("/");
  }

  render() {
    return <Button onClick={this.onClick}/>
  }
}

export default withRouter(HomeButton);

我用了shallowEqualExplain检查导致更新的 Prop 。

Answer 1

如果您不想更新 Button，我建议您使用 Component 而不是 PureComponent。

React.PureComponent’s shouldComponentUpdate() only shallowly compares the objects. If these contain complex data structures, it may produce false-negatives for deeper differences.

引用:https://reactjs.org/docs/react-api.html#reactpurecomponent