Question

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

示例：

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

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

export default withRouter(HomeButton);

我使用shallowEqualExplain检查是哪个道具导致了更新。

Answer 1

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

React.PureComponent的shouldComponentUpdate（）仅浅浅地比较对象。如果这些数据包含复杂的数据结构，则可能会产生假阴性，从而产生更大的差异。

参考：https://reactjs.org/docs/react-api.html#reactpurecomponent

Answer 2

我遇到了同样的问题。使用shouldComponentUpdate会产生最严重的问题，并会增加示例代码。另外，文档认为应该不惜一切代价避免这种情况。

相反，我使用了Link包中的react-router-dom组件。

CSS

.HomeButton {
  text-decoration: unset;
  color: unset;
}

JS

function HomeButton() {
  return (
    <Link className='HomeButton' to="/"> 
      <Button />
    </Link>
  )
}

export default HomeButton;

注意：由于withRouter，您的组件不纯。如果删除withRouter，则它是纯文本。当然，那您将不得不使用Link，因为此时您将无法访问history。

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

2 个答案: