reactjs - 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 组件始终使用相同的 Prop 重新渲染(无任何状态更新)。 react-perf 在路由更改时显示许多浪费的渲染(没有 Prop /状态更新)。

NavBar 包括 Link 和一些 MobX 状态(NavBar 只用 @observer+@inject 包装)
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 中的 routerStore (https://github.com/alisd23/mobx-react-router)
3. 当您需要匹配时(通常是因为参数)，制作一个使用 withRouter 的非观察者组件，并将必要的参数传递给较低级别​​的层次结构。