Где должна быть строка для разделения компонента состояния и состояния без атак в React?

Question

Реагировать encourages как можно больше использования компонентов без состояния и иметь компонент управления состоянием, управляющий ими. Я понимаю, что это может сделать компоненты без гражданства более многоразовыми и простыми в управлении. Однако, насколько это возможно, мы всегда можем поставить состояние на компонент верхнего уровня, например App.js, и передавать информацию и обратные вызовы через длинную сеть реквизита. И если вы используете Flux, действия всегда могут быть отправлены и в него (выполняется через обратные вызовы).

Так что мне интересно, какая строка для разделения компонентов состояния и состояния без гражданства? А если использовать Flux, где должны быть отправлены действия?

--- Добавить пример ---

Скажем, у меня есть Google Docs, как веб-приложения, которые имеют панель инструментов и отображается содержимое. Я предполагаю, что у нас будет структура компонентов.

<App> 
    <Toolbar /> 
    <Content /> 
</App> 

На панели инструментов есть кнопки, которые будут влиять на содержимое экрана, например, жирным шрифтом.

Так должно ли приложение проходить вниз на ButtonPressed реквизиты обратного вызова на панель инструментов и отправлять действия сами по себе или должны позволить панели инструментов делать это самостоятельно?

Должно ли приложение передавать контент ContentString в контент, или позволить самому Content List сохранять изменения Store?

Спасибо!

Answer 1

С моей точки зрения, это простое приложение может использовать шаблон непостоянства таким образом:

1. Дети испускают действия.
2. Приложение прослушивает хранение и распространение обработанных данных своим детям.

При таком подходе у вас есть компонент без гражданства, но с хорошей организацией кода без реквизита обратного вызова. Но оба ваших предложения также верны, это решение, которое вы принимаете в отношении размера и потребностей вашего приложения.

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

Answer 2

Это хороший вопрос, и он решается по-разному даже между различными реализациями Flux.

Я предпочитаю иметь свое состояние в одном компоненте высокого уровня, который видит «большой picrure», и распространяет данные, используя реквизиты для всех низкоуровневых. В хорошем приложении React большинство компонентов не должны «заботиться» о том, откуда поступают данные. Имея одну хорошую структурированную модель вместо нескольких фрагментированных, также оказывается полезной до сих пор. (кстати, это может быть достигнуто даже при использовании нескольких магазинов, компонент высокого уровня может прослушивать их все и фактически «удерживать» эту большую модель).

Что касается действий - я предпочитаю, чтобы все мои «немые» компоненты визуализации/ui/display работали с реквизитами обратного вызова. Таким образом, их легче использовать повторно, и это хорошее разделение проблем. В более богатых компонентах, которые содержат немного бизнес-логики, я вызываю действия Reflux напрямую. Обычно они также являются компонентами контейнера для вышеупомянутых «немых» контроллеров ui.

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

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

Надеюсь, что это поможет. Вся вещь Flux все еще находится в разработке ...