Reactjs - Как сделать компоненты осведомленными о текущем состоянии представления?

Question

Инструменты, которыми я пользуюсь: Reactjs 0.14.7, реактивный маршрутизатор 2.0.0 (шаблон потока)

Примечание: Я отметил Redux, просто потому, что у меня есть подозрение (я его не использовал), что то, что я Возможно, это может быть одной из причин, по которым люди бредит этим.

---

Я понимаю, что реагировать-маршрутизатор уже управляет, какие части дерева компонентов в настоящее время в поле зрения и представляет компоненты, основанные на состоянии текущего вида дерева.

Вопрос:

Но что, если на основе компонентов с учетом, один компонент должен знать, что другие компоненты также в поле зрения и ведут себя по-разному в зависимости от того, что других компонентов с точкой зрения (мнение государство)? Какую стратегию вы бы предложили, чтобы компоненты знали о других компонентах?

мое текущее решение:

В настоящее время я пытаюсь использовать URL, чтобы вывести это глобальное состояние, и даже разбор его и положить его в магазин для того, чтобы компоненты, чтобы быть в курсе состояния представления прослушивая изменения из этого магазина.

Моя проблема с этим решением:

В двух словах хозяйствования, которые рассматривают состояние с магазином становится очень запутанным процессом с дополнительными действиями кропили по всему коду.

1) Действия должны быть вызваны для любого пользовательского события, которое изменит маршрут.

2) Действие необходимо уволят при плавании за пределами компонентов (я думаю, что его намного чище, чтобы сохранить действие стрельбы в компонентах (не стесняйтесь обсуждать, что один).

3) Вы должны также рассмотреть кнопку назад (в настоящее время используется реакция-маршрутизатор onEnterHooks, чтобы поймать, когда это произойдет).

Однако мне очень нравится концепция инкапсуляции состояния представления, потому что я могу представить, что она создает приятную ментальную модель, а также более умные компоненты, , а просто анализирует текущий URL-адрес и использует файл утилиты для определения текущего состояния представления, когда необходимо, как намного более простое/чистое решение для управления, а затем хранилищем, которое содержит текущее состояние представления.

Answer 1

Компоненты должны never Необходимо знать, какие другие компоненты визуализируются, это одна из фундаментальных концепций Реагента. Вы пытаетесь извлечь «состояние просмотра» из своего дерева компонентов, когда ваше дерево компонентов должно быть определено вашим состоянием. Если вы уже используете Flux, вам нужно сохранить эту информацию в магазине, где она станет доступной для любого компонента, который подписывается.

Flux не делает процесс разработки более простым или быстрым для отдельного человека, а именно о том, чтобы упростить практику умственной модели того, что делает приложение. Это может произойти за счет некоторой простоты.

Redux - это усовершенствование Flux, которое объединяет несколько магазинов, которые могут быть подписаны индивидуально с помощью одного большого дерева состояний, с различными частями дерева, созданными различными «редукторами» - функциями, которые принимают состояние и действие и вернуть новое состояние. Это точно «хранилище, которое содержит текущее состояние просмотра». То, что вы описываете, также является довольно хорошим описанием типа разработки, распространенного в взломанных jQuery-приложениях, тип разработки React стремится избежать.

Answer 2

Я думаю, что ядро ​​вашего недоразумения связано с тем, как компоненты React должны быть слоистыми. Это сложная тема, и повторное выравнивание вашего процесса мышления, чтобы точно понять, что такое состояние против prop в вашей модели, - это уникальная задача.

Но решение этой проблемы, с которой вы сталкиваетесь, - это просто упорядочить ваши компоненты более «правильно».

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

Как простой, но практичный пример;

var Parent = React.createClass({ 
    funcA: function(){ 
     this.setState({propB: 'something new!'}); 
    }, 
    render: function(){ 
     return (
     <div> 
      <ChildA propA={this.state.propA} funcA={this.funcA} /> 
      <ChildB propB={this.state.propB} /> 
     </div> 
     ); 
    } 
}); 

С этой компоновкой проблем, childâ способен обрабатывать ввод данных пользователя, передавая его funcA который затем воздействия ChildB. Но все это происходит без компонентов Ребенок, зная что-нибудь о другом.