0Pricing
React Academy · Lekcja

Wybór właściwego miejsca przechowywania stanu

Stosuj schemat decyzyjny: stan lokalny, podniesiony lub globalny

Wybór właściwego miejsca przechowywania stanu to bezpłatna lekcja React Academy na CoddyKit. To lekcja 4 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej React Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs React Academy zawiera 4 lekcji w sumie.

Wprowadzenie

W tej lekcji poznają Państwo praktyczny schemat podejmowania decyzji o tym, czy stan powinien znajdować się w pojedynczym komponencie, wspólnym przodku, Context Reacta czy globalnej bibliotece do zarządzania stanem.

Krok 1: Kto korzysta z tego stanu

Najpierw należy zadać pytanie: które komponenty renderują się na podstawie tego stanu? Należy je wypisać. Jeśli korzysta z niego tylko jeden komponent, stan powinien pozostać lokalny w tym komponencie.

Stan lokalny

Stan używany dokładnie przez jeden komponent znajduje się w tym komponencie i jest obsługiwany za pomocą useState. Przykłady: informacja o tym, czy lista rozwijana jest otwarta, bieżąca wartość kontrolowanego pola lub informacja o widoczności podpowiedzi.
function Toggle() {
  const [on, setOn] = useState(false);
  return <button onClick={() => setOn(!on)}>{on ? 'On' : 'Off'}</button>;
}

Krok 2: Znajdź wspólnego przodka

Jeśli stan jest potrzebny wielu komponentom, należy znaleźć ich najbliższego wspólnego przodka w drzewie komponentów. Następnie należy przenieść stan do tego komponentu i przekazywać go w dół jako propsy.

Podniesiony stan (2–3 poziomy)

Stan współdzielony przez 2–3 komponenty znajdujące się na podobnym poziomie zagnieżdżenia jest dobrym kandydatem do podniesienia. Wspólny rodzic przechowuje ten stan i przekazuje go dalej za pomocą propsów.

Krok 3: Czy prop drilling jest zbyt głęboki

Jeśli wspólny przodek znajduje się co najmniej 4 poziomy nad komponentami korzystającymi ze stanu, przekazywanie propsów przez komponenty pośrednie powoduje zbędny szum. Należy rozważyć użycie Contextu.

Stan w Context

Context należy stosować do przekrojowych zagadnień, z których potrzebuje korzystać wiele komponentów w różnych częściach drzewa: bieżącego uwierzytelnionego użytkownika, aktywnego motywu czy wybranych ustawień regionalnych. Takie dane rzadko się zmieniają i mają wielu odbiorców.

Krok 4: Czy stan jest złożony lub współdzielony między stronami

Jeśli stan ma złożoną logikę aktualizacji, wymaga funkcji cofania i ponawiania, musi zachowywać się podczas nawigacji albo jest używany w całkowicie odrębnych drzewach komponentów, należy użyć dedykowanej biblioteki do zarządzania stanem (Zustand, Redux).

Stan serwera jest czymś innym

Dane pobierane z serwera to *stan serwera*, a nie stan interfejsu użytkownika. Nie należy przechowywać ich w useState ani w globalnym magazynie stanu — należy użyć React Query, SWR lub RTK Query, które automatycznie obsługują buforowanie, ponowne pobieranie i stany błędów.

Schemat podejmowania decyzji

1 odbiorca → lokalny useState. 2–3 odbiorców na podobnej głębokości → podniesienie stanu do rodzica. Prop drilling przez co najmniej 4 poziomy → Context. Złożona logika lub odrębne drzewa → Zustand/Redux. Dane serwera → React Query/SWR.

Szybkie sprawdzenie

Które miejsce przechowywania stanu jest najbardziej odpowiednie dla bieżącego uwierzytelnionego użytkownika, do którego wiele komponentów w dużej aplikacji musi mieć dostęp?

Podsumowanie

Miejsce przechowywania stanu należy dopasować do odbiorców: lokalny stan dla jednego odbiorcy, podniesiony stan dla kilku pobliskich odbiorców, Context dla wielu odbiorców na różnych poziomach, biblioteka do zarządzania stanem dla złożonego stanu lub odrębnych drzew oraz React Query dla danych serwera.

Kurs ukończony

Gratulacje! Ukończyli Państwo kurs **Podnoszenie stanu i rozwiązania problemu prop drilllingu**. Mają już Państwo jasny schemat decydowania o tym, gdzie powinien znajdować się stan i jak prawidłowo go współdzielić.

Często zadawane pytania

Czy lekcja „Wybór właściwego miejsca przechowywania stanu” jest bezpłatna?

Tak — pełny tekst „Wybór właściwego miejsca przechowywania stanu” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu React Academy, przejdź na CoddyKit PRO. Kurs React Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Wybór właściwego miejsca przechowywania stanu”?

Stosuj schemat decyzyjny: stan lokalny, podniesiony lub globalny Ćwiczysz React Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć React Academy?

Nie wymagamy żadnego doświadczenia. React Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 4 z 4.

Ile czasu zajmuje lekcja „Wybór właściwego miejsca przechowywania stanu”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji React Academy?

Tak. Każda lekcja React Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Podnoszenie stanu: zasady i przykłady
  2. Prop drilling: kiedy szkodzi, a kiedy jest w porządku
  3. Wzorce komunikacji między komponentami siostrzanymi
  4. Wybór właściwego miejsca przechowywania stanu
← Powrót do React Academy