Gdzie powinien znajdować się wiersz, w którym można oddzielić element stanowy i bezpaństwowy w React?

Question

React encourages o wykorzystaniu komponentów bezpaństwowców jak najwięcej i mieć Stateful składnikiem dominującym zarządzania nimi. Rozumiem, że dzięki temu bezpaństwowe komponenty mogą być wielokrotnie ponownie używane i łatwiejsze w zarządzaniu. Jednak, do skrajności, zawsze możemy umieścić stan na najwyższym komponencie, takim jak App.js, i przekazywać informacje i wywołania zwrotne przez długi łańcuch rekwizytów. A jeśli używasz Flux, akcje mogą być zawsze wywoływane w nim również (wykonywane przez wywołania zwrotne).

Więc zastanawiam się, co jest wiersz do oddzielenia składników stanowe i bezpaństwowców? A jeśli korzystasz z Flux, gdzie powinny być wysłane Akcje?

--- Dodaj przykładowe ---

że mam google docs jak web app, które mają pasek narzędzi i wyświetlanych treści. Wyobrażam sobie, że będziemy mieli strukturę komponentów.

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

Pasek narzędzi zawiera przyciski, które wpływają na zawartość wyświetlacza, powiedz pogrubiony przycisk tekstowy.

Tak powinno App przechodzą w dół onButtonPressed rekwizyty zwrotnych na pasku narzędzi i wysyłka Działania w sobie, czy też pozwolić Toolbar to zrobić sam?

Czy aplikacja powinna przekazywać treści do Treści contentString, czy pozwolić samej treści na odczytywanie zmian w Sklepie?

Dzięki!

Answer 1

Z mojego punktu widzenia, to prosta aplikacja może wykorzystać wzór Flux w ten sposób:

1. Dzieci emitować akcje.
2. Aplikacja słucha sklepach i propaguje przetworzone dane do swoich dzieci.

Dzięki temu podejściu masz element bezstanowy, ale z dobrą organizacją kodu bez rekwizytów wywołania zwrotnego. Ale obie twoje propozycje są również poprawne, to decyzja, którą podejmujesz w odniesieniu do wielkości i potrzeb twojej aplikacji.

Jeśli komponent, który tworzysz, będzie używany poza aplikacją, nie używaj strumienia tak bardzo, jak to możliwe i pozwól programistom wybrać pożądane podejście do jego potrzeb.

Answer 2

To dobre pytanie, i to jest rozwiązane inaczej nawet pomiędzy różnymi implementacjami Flux.

Wolę mój stan posiadania w jednym składniku wysokiego szczebla, który widzi „wielki picrure” i propagować danych przy użyciu rekwizytów do wszystkich tych z niskiego poziomu. W dobrej aplikacji React większość komponentów nie powinna "obchodzić", skąd pochodzą dane. Posiadanie jednego dobrego modelu strukturalnego zamiast kilku fragmentarycznych również okazuje się być jak dotąd korzystnym. (przy okazji, można to osiągnąć nawet przy użyciu kilku sklepów, komponent wysokiego poziomu mógł ich wszystkich słuchać i praktycznie "trzymać" ten duży model).

Jeśli chodzi o działania - wolę, aby wszystkie moje "nieme" elementy wizualizacji/interfejsu użytkownika/ekranu działały z rekwizytami wywołania zwrotnego. W ten sposób łatwiej je ponownie wykorzystać i jest to dobry rozdział obaw. W bogatszych komponentach, które zawierają trochę logiki biznesowej, wywołuję działania Reflux bezpośrednio. Zwykle są to również same elementy kontenerowe do wspomnianych "głupich" kontrolerów.

Tak więc dolna linia - dane powinny płynąć z tak wysokiego poziomu, jak to możliwe, działania mogą być uruchamiane z niższych komponentów, ale zawsze sprawdź, czy możesz osiągnąć ten sam efekt z rekwizytami wywołania zwrotnego.

Na Twoje pytanie - pasek narzędzi Toolbar jest wystarczająco złożonym komponentem, aby samodzielnie mieć własne atrybuty Toolbar i wywoływać je bezpośrednio. Jednak komponent Treść powinien zdecydowanie uzyskać dane z góry. Łatwiej jest też uzasadnić przepływ danych w ten sposób, gdy aplikacja staje się skomplikowana.

Nadzieję, że pomaga. Cała rzecz Flux wciąż jest sztuką w toku ...