Question

我目前对根应用程序级别上 react-router链接导航和 shouldComponentUpdate（）的正确组合实现存在疑问。

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

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

所以，我想出了类似的东西 - 注意到我正在使用lo-dash：

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

有了这个，该组件正确地忽略了有关最新注册的无关回复。

现在，当我必须进行路由时会出现问题。为了澄清之前，这是 render（）：

的结构

注意：_routerTransitionKey只是一个助手，当我浏览内部视图状态并且它正常工作时我不能进行转换。

<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组件之前创建另一个包装组件来处理路由...

Answer 1

所以，在来自@WayneC的提示之后，即使反应路由器没有将道具直接注入反应组件道具，也有可能受这种方法启发的方式。

我通过使用 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的范围位于较高级别，我会在每个渲染（）上对其进行修改，以便我对其进行跟踪以供日后比较。

而且......就是这样。

React.js shouldComponentUpdate（）和react-router Link

1 个答案: