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

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

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

由于我不想在没有更新的 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 ;
 }

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

最佳答案

因此，在@WayneC 的提示之后，即使 react-router 没有将 props 直接注入(inject)到 react 组件 props 中，也有一种可能的方法受到这种方法的启发。

我通过不使用 this.props 而是使用 this.context.router.getCurrentPath() 进行了轻微更改来实现了我想要的

所以现在的解决方案是这样的:

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

为了更清楚，我的 _routerTransitionKey 从一个导入的 Util 中获取它的值，它看起来主要是这样的:

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

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

这个 _routerTransitionKey 范围在上层，我在每个 render() 上修改它，以便我跟踪它以供以后比较。

而且……就是这样。

关于reactjs - React.js shouldComponentUpdate() 和 react-router 链接，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30078260/