MobX + React Router 4 + @withRouter 总是在路由改变时重新渲染

Question

我正在使用 MobX @observer 和 @withRouter (react-router-v4) 像这样包装页面组件

@withRouter
@inject('stores')
@observer
class Page extends Component {
  render() {
    return (
      <div>
        <NavBar />
        <Header title={this.props.stores.UIStore.title} />
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/about" component={AboutPage} />
          <Route component={NotFound} />
        </Switch>
      </div>
    )
  }

问题
当路由位置更改时，NavBar 和 Header 组件总是使用相同的道具重新渲染（没有任何状态更新）。 react-perf 在路由更改时显示许多浪费的渲染（没有道具/状态更新）。

NavBar 包括 Link 和一些 MobX 状态（仅使用 @observer+@inject 包装的 NavBar）
Header 只是一个无状态的组件。

页面组件需要@withRouter 导致@observer (MobX) 中断react-router (https://github.com/mobxjs/mobx-react/issues/210)

如何防止 NavBar 和 Header 因路由位置更改而重新渲染？仅当 mobx 状态更新时才允许重新渲染。

Answer 1

我知道这已经很老了，但这就是我在项目中解决相同问题的方法：

1. 不要同时使用 withRouter 和 observer。如果位置或匹配对象更改，则 shouldComponentUpdate 的观察者实现将返回 true。
2. 当您只需要历史记录或位置对象时，请使用 mobx-react-router (https://github.com/alisd23/mobx-react-router) 中的 routerStore
3. 当您需要匹配时（通常是因为参数），制作一个使用 withRouter 的非观察者组件并将必要的参数传递给较低级别​​的层次结构。