当路线改变时，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状态（NavBar包裹@ observer + @ inject only）
标题只是一个无状态的组件。

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

如何防止NavBar和Header从路径位置更改重新渲染？仅在mobx状态更新时允许重新渲染。

Answer 1

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

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