ReactJS: dlaczego przekazanie stanu początkowego komponentu jest rekwizytem anty-wzorcem?

Question

ReactJS: dlaczego przekazanie stanu początkowego komponentu jest rekwizytem anty-wzorcem?

Stworzyłem Mały Pulpit Nawigacyjny ReactJS za pomocą SocketIO do aktualizacji na żywo. Mimo że mam aktualizację Pulpitu nawigacyjnego, denerwuje mnie to, że nie jestem pewien, czy zrobiłem to poprawnie.

Najbardziej mnie wkurza rekwizyty w getinitalstate jako anty-pattern post. Stworzyłem pulpit nawigacyjny, który pobiera aktualizacje na żywo z serwera, nie wymagając interakcji użytkownika poza ładowaniem strony. Z tego co czytałem, this.state powinny zawierać rzeczy, które zadecydują, czy komponent powinien być ponownie renderowany, oraz this.props.... Jeszcze nie wiem.

Jednak, kiedy początkowo wywołujesz React.render(<MyComponent />, ...), możesz przekazać tylko rekwizyty. W moim przypadku pobieram wszystkie dane z serwera, więc początkowe rekwizyty i tak kończą się this.state. Więc wszystkie moje komponenty mają coś takiego:

getInitialState: function() {
    return {
        progress: this.props.progress,
        latest_update: this.props.latest_update,
        nearest_center: this.props.nearest_center
    }
}

Co, o ile nie źle zinterpretowałem wyżej wymienionego posta na blogu, jest anty-wzorcem. Ale nie widzę innego sposobu na wstrzyknięcie stanu do komponentu i nie rozumiem, dlaczego jest to anty-pattern chyba, że zamienię wszystkie moje rekwizyty na prepend initial na nich. Jeśli już, czuję, że to jest anty-wzorzec, ponieważ teraz muszę śledzić więcej zmiennych niż wcześniej (te poprzedzone initial i te bez).

71

reactjs

Author: André Pena, 2015-02-28

Source

1 answers

score 87 · Accepted Answer

Disclaimer: kiedy odpowiedziałem na to pytanie, uczyłem się / próbowałem zaimplementuj vanilla Flux I byłem trochę sceptyczny. Później I przeniosłem wszystko do Redux. Więc rada: po prostu idź z Reduxem lub MobX. Są szanse, że nie będziesz nawet potrzebować odpowiedzi na to pytanie już (poza nauką).

Przekazanie stanu intialnego do komponentu jako prop jest anty-wzorcem, ponieważ metoda getInitialState jest wywoływana tylko po raz pierwszy renderowanie komponentów. Nigdy więcej. Oznacza to, że jeśli ponownie wyrenderujesz ten komponent przekazując inną wartość jako prop, komponent nie zareaguje odpowiednio, ponieważ zachowa stan od pierwszego renderowania. Jest bardzo podatny na błędy.

A oto co powinieneś zrobić:

Postaraj się, aby Twoje komponenty były jak najbardziej bezpaństwowe. Komponenty bezstanowe są łatwiejsze do przetestowania, ponieważ renderują wyjściena podstawie wejścia. To takie proste.

Ale hej.. moje dane o składnikach się zmieniają.. Nie mogę uczynić ich bezpaństwowcami

Tak, możesz, dla większości z nich. W tym celu należy wybrać element zewnętrzny, który ma być posiadaczem Państwa. Korzystając z przykładu, możesz utworzyć komponent Dashboard zawierający dane oraz komponent Widget całkowicie bezstanowy. Dashboard jest odpowiedzialny za uzyskanie wszystkich danych, a następnie renderowanie wielu Widgets, które otrzymują wszystko, czego potrzebują Przez props.

Ale moje widgety mają jakiś stan.. użytkownik może je skonfigurować. Jak sprawić, by stały się bezpaństwowcami?

Twój Widget może ujawnić zdarzenia, które po obsłużeniu powodują zmianę stanu zawartego w Dashboard, powodując ponowne odtworzenie każdego Widget. Tworzysz "zdarzenia" w swoim Widget poprzez props, które otrzymują funkcję.

Ok, więc teraz Dashboard zachowuje stan, ale jak przekazać stan początkowy do niego?

Masz dwie opcje. Najbardziej polecane, jest to, że wykonujesz połączenie Ajax w Dashboard getInitialState metoda uzyskania stanu początkowego z serwera. Możesz również użyć Flux , który jest bardziej wyrafinowanym sposobem zarządzania danymi. Flux jest bardziej wzorem, niż implementacją. Możesz użyć pure Flux z implementacją Dispatcher Facebook ' a, ale możesz użyć implementacji innych firm, takich jak Redux, Alt lub Fluxxor.

Alternatywnie, można przekazać ten początkowy stan jako prop do Dashboard, wyraźnie oświadczając, że jest to tylko stan początkowy.. na przykład initialData. Jeśli jednak wybierzesz tę ścieżkę, nie możesz przekazać jej innego stanu początkowego, ponieważ stan ten "zapamięta" po pierwszym renderowaniu.

OBS

Nie masz racji w swoich definicjach.

Stan jest używany do przechowywania zmiennych danych, czyli danych, które ulegną zmianie w trakcie cyklu życia komponentu. Zmiany w stan powinien być wykonany metodą setState i spowoduje ponowne renderowanie komponentu.

Właściwości są używane do przekazywania danych imutable do komponentów. Nie powinny się one zmieniać podczas cyklu życia komponentu. Komponenty, które używają tylko rekwizytów, są bezpaństwowe.

To {[56] } jest odpowiednim źródłem "jak przekazać stan początkowy komponentom".