React.js shouldComponentUpdate() и реагировать-маршрутизатор Link

Question

настоящего времени у меня сомнение по поводу правильного комбинированного осуществления реагировать маршрутизаторы Link навигации и shouldComponentUpdate() на уровне корневого приложения.

То есть, у меня есть корневой компонент, называемый App.jsx, который содержит глобальный компонент с верхнего колонтитула, боковая панель и т.д., и это тот же компонент имеет АЯКС длинный-опрос который отыскивает новые регистраций система и обновляет состояние при регистрации новых пользователей.

Поскольку я не хочу, чтобы подтолкнуть пересборку к компоненту (и, следовательно, все это дети) на АЯКС ответов, которые не имеют обновления, я решил воспользоваться прекрасной shouldComponentUpdate() метод.

Итак, я придумал что-то вроде этого - отметив, что я используя ЛИ-тир:

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

С этим компонентом правильно игнорирует нерелевантные ответы о последних регистрациях.

Теперь проблема возникает, когда я должен выполнить маршрутизацию. Для того, чтобы уточнить, прежде чем, это вид структуры визуализации():

Примечания: _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 внутри этого глобального компонента, у меня есть вопрос о том, что изменение маршрута полностью игнорировали ею, , так как государство само приложение не изменится. Это заставляет компонент никогда не запускать визуализацию () при навигации, и поэтому никогда не обновляет RouteHandler.

Что мне нужно было бы что-то вроде:

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

Мой вопрос: Кто-нибудь там знает умного подхода к этому вопросу? Я пытаюсь избежать создания еще одного компонента упаковки для обработки Маршрутов, прежде чем они достигнут этого компонента приложения, который у меня есть в настоящее время ...

Answer 1

Итак, после подсказки от @WayneC, даже если реактивный маршрутизатор не работает, t вводить реквизит непосредственно в реквизит реагирующих компонентов, есть возможный способ, вдохновленный этим подходом.

Я достиг чего-то, чего хотел, сделав небольшое изменение, используя не 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(), так что я отслеживаю его для последующего сравнения.

И ... все.