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包含链接和某些MobX状态（仅使用@ observer + @ inject进行的NavBar包装）标头只是一个无状态的组件。

页面组件需要@withRouter导致@observer（MobX）中断react-router（https://github.com/mobxjs/mobx-react/issues/210）的原因

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

Answer 1

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

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