• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Poprawne aktualizowanie stanu React - class component. (która wersja poprawna)

VPS Starter Arubacloud
+1 głos
339 wizyt
pytanie zadane 17 września 2022 w JavaScript przez castor_fiber Użytkownik (800 p.)

Cześć, moje pytanie brzmi, jaka jest najlepsza praktyka kiedy używam setState?

//Przykładowy stan:
    this.state = {
      selectedCategory: "",
      overlayVisible: false,
    };

//Wersja 1:

setSelectedCategory = (category) => this.setState({ selectedCategory: category })
setOverlayVisible = () => this.setState((prevState) => ({ overlayVisible: !prevState.overlayVisible,}));

//Wersja 2:

  setSelectedCategory = (category) => this.setState((prevState) => ({
    ...prevState,
    selectedCategory: category,
  }));

  setOverlayVisible = () => this.setState((prevState) => ({
    ...prevState,
    overlayVisible: !prevState.overlayVisible,
  }));

Wiem że powinno się korzystać z poprzedniego stanu przy wszelakich licznikach.

Chodzi mi o najlepszą praktykę. Zawsze używać poprzedniego stanu?

1 odpowiedź

+1 głos
odpowiedź 17 września 2022 przez Comandeer Guru (599,730 p.)
edycja 18 września 2022 przez Comandeer

Edit: moja odpowiedź dotyczy komponentów funkcyjnych. Jeśli chodzi o klasowe, to w komentarzu nieco piszę, jak to widzę.

Jeśli trzymasz w stanie dwie niezależne od siebie rzeczy, to nieużywanie poprzedniego stanu sprawi, że możesz utracić jedną z tych informacji. Zauważ, że w Twojej 1. wersji ustawienie selectedCategory oznacza automatycznie usunięcie overlayVisible. W chwili, gdy kopiujesz stary stan do nowego i jedynie nadpisujesz jego część (czyli 2. wersja) problem nie istnieje.

Więc tak, w większości przypadków należy się opierać na starym stanie.

1
komentarz 18 września 2022 przez ScriptyChris Mędrzec (190,190 p.)

Tylko że w komponentach klasowych Reacta aktualizacje stanu są mergowane, więc przekazanie samego selectedCategory do this.setState( .. ) powinno zachować również overlayVisible. Tego brakuje natomiast w aktualizacji stanu opartego o hook useState - tam merge stanu trzeba robić ręcznie (jeśli jest taka potrzeba).

Note

Unlike the setState method found in class components, useState does not automatically merge update objects.

1
komentarz 18 września 2022 przez Comandeer Guru (599,730 p.)
Hm, dziwne, że nigdy tego nie ujednolicili, tbh.

Rzekłbym, że zachowanie, w którym nie dochodzi do merge'owania, jest zdecydowanie bardziej zrozumiałe. No i spójność między komponentami klasowymi a funkcyjnymi też jest argumentem za rozszerzaniem starego stanu. Zwłaszcza, jeśli kiedyś w przyszłości chcielibyśmy migrować.
1
komentarz 18 września 2022 przez rafal.budzis Szeryf (85,260 p.)
Komponenty funkcyjne z założenia mają wiele stanów. W klasowych to jeden obiekt stąd różnice.

Przy migrowaniu na funkcyjne i tak wypadało by rozbić stan więc nie myślał bym w tych kategoriach.
1
komentarz 18 września 2022 przez ScriptyChris Mędrzec (190,190 p.)

Komponenty funkcyjne z założenia mają wiele stanów.

W jakim sensie? Można przecież mieć jeden stan w komponencie, np. jakiś licznik.

https://beta.reactjs.org/apis/react/useState#examples-basic

Przy migrowaniu na funkcyjne i tak wypadało by rozbić stan więc nie myślał bym w tych kategoriach.

Można skorzystać z reducera, żeby nie musieć rozbijać stanu - zwłaszcza jeśli jego kształt jest kontekstowo spójny.

1
komentarz 18 września 2022 przez rafal.budzis Szeryf (85,260 p.)

Z wieloma stanami chodziło mi o to że lepiej zrobić kilka useState niż jeden useState z dużym obiektem. Może powinienem to poprawić. Komponenty funkcyjne z założenia mają wiele stanów atomowe stany. (Teraz będzie pasować nawet w przypadku jednego stanu wink )

Można skorzystać z reducera, żeby nie musieć rozbijać stanu - zwłaszcza jeśli jego kształt jest kontekstowo spójny.


Można też używać useState z dużym obiektem. Jednak w obrębie klasowego komponentu zakładałbym że jednak niektóre z stanów nie są powiązane z innymi. Więc lepiej je separować co da możliwość w przyszłości na wyciągniecie części logiki do custom hooka ;) 

komentarz 18 września 2022 przez Comandeer Guru (599,730 p.)
Dobrze, że React jest wewnętrznie spójnym frameworkiem, który nie zmienia znaczenia słów w zależności od kontekstu… ;)

Podobne pytania

0 głosów
1 odpowiedź 277 wizyt
pytanie zadane 29 stycznia 2021 w JavaScript przez sKodowany Obywatel (1,150 p.)
0 głosów
0 odpowiedzi 192 wizyt
0 głosów
0 odpowiedzi 83 wizyt
pytanie zadane 2 sierpnia 2020 w JavaScript przez rob Bywalec (2,440 p.)

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...