reactjs - React.js shouldComponentUpdate() 和 React-router 链接

Question

我目前对根应用程序级别上 react-router Link navigation 和 shouldComponentUpdate() 的正确组合实现存在疑问。

也就是说，我有一个名为 App.jsx 的根组件，它包含一个带有页眉、页脚、侧边栏等的全局组件，并且该组件有一个>ajax long-poll 检索系统中的新注册并在新用户注册时更新状态。

由于我不想在没有更新的 ajax 响应上将重新渲染推送到组件(因此它的所有子组件)，我决定使用可爱的 <强>shouldComponentUpdate()方法。

所以，我想出了这样的东西 - 注意到我正在使用 lo-dash:

shouldComponentUpdate (/*prevProps*/, prevState) {
  return !_.isEqual(this.state,prevState);
}

通过此组件，组件可以正确忽略有关最新注册的不相关响应。

现在，当我必须进行路由时，问题就出现了。之前澄清一下，这是 render() 的结构:

注意:_routerTransitionKey 只是一个助手，当我导航内部 View 状态并且它正常工作时，我不必进行转换。

<Grid key='app' id="wrapper" className="no-padding">
  <Header user={this.state.user} allRegistrations={this.state.allRegistrations}/>
  <section id="page-wrapper">
    <NotificationArea key='internalNotification' />
    <RouteHandler key={_routerTransitionKey} user={this.state.user} allRegistrations={this.state.allRegistrations}/>
  </section>
</Grid>

因为我在这个全局组件中有 RouteHandler，所以我遇到了一个问题，即它完全忽略了路由的更改，因为应用程序状态本身没有更改。这会导致组件永远不会在导航时触发 render()，因此永远不会更新 RouteHandler。

我需要的是这样的:

 shouldComponentUpdate (/*prevProps*/, prevState) {
   return !_.isEqual(this.state,prevState) || ROUTE_CHANGED ;
 }

我的问题是:有人知道解决这个问题的聪明方法吗？我试图避免在路由到达我当前拥有的这个应用程序组件之前创建另一个包装组件来处理路由...

Answer 1

因此，在 @WayneC 的提示之后，即使 react 路由器不会将 Prop 直接注入(inject) react 组件 Prop 中，也有一种受该方法启发的可能方法。

我通过不使用 this.props 而是使用 this.context.router.getCurrentPath()

进行轻微更改来实现我想要的目标

现在解决方案如下所示:

shouldComponentUpdate (/*nextProps*/, nextState) {
  return !_.isEqual(this.state,nextState) || this.context.router.getCurrentPath() !== _routerTransitionKey;
}

为了更清楚地说明，我的 _routerTransitionKey 从导入的 Util 中获取其值，该 Util 看起来大致如下:

var Utils = {
  Router: {
    TransitionKey: {
      get: function(){
        return Router.HistoryLocation.getCurrentPath();
      }
    }
  }
}

_routerTransitionKey = Utils.Router.TransitionKey.get();

此 _routerTransitionKey 的范围位于上层，我在每次 render() 上修改它，以便我跟踪它以供以后比较。

然后...就是这样。