React Academy · Lekcja

Podnoszenie stanu: zasady i przykłady

Przenoś współdzielony stan do najbliższego wspólnego przodka i przekazuj go przez propsy

Podnoszenie stanu: zasady i przykłady to bezpłatna lekcja React Academy na CoddyKit. To lekcja 1 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 wzorzec podnoszenia stanu — przenoszenie współdzielonego stanu do najbliższego wspólnego przodka, aby komponenty będące rodzeństwem mogły pozostać zsynchronizowane.

Problem: niesynchronizowane komponenty

Gdy dwa komponenty będące rodzeństwem potrzebują tych samych danych, przechowywanie osobnego stanu w każdym z nich prowadzi do błędów synchronizacji. Rozwiązaniem jest przeniesienie stanu do ich wspólnego komponentu nadrzędnego.

Wskazywanie wspólnego przodka

Należy znaleźć najbliższy komponent, który jest rodzicem **obu** komponentów potrzebujących współdzielonych danych. Następnie trzeba przenieść tam stan i przekazywać go w dół jako props.

function Parent() {
  const [value, setValue] = useState('');
  return (
    <>
      <InputA value={value} onChange={setValue} />
      <PreviewB value={value} />
    </>
  );
}

Przykład podnoszenia stanu licznika

Załóżmy, że dwa komponenty wyświetlają ten sam licznik. Zamiast zarządzać wartością count w każdym z nich, należy przenieść ją do komponentu nadrzędnego. Oba komponenty otrzymują count jako props i wywołują funkcję zwrotną onChange, aby ją aktualizować.

function App() {
  const [count, setCount] = useState(0);
  return (
    <>
      <CounterDisplay count={count} />
      <CounterControl count={count} onIncrement={() => setCount(c => c + 1)} />
    </>
  );
}

Właściwości z funkcjami zwrotnymi do aktualizacji

Dzieci nie mogą bezpośrednio modyfikować stanu komponentu nadrzędnego. Komponent nadrzędny przekazuje funkcję zwrotną, taką jak `onChange`, jako props. Dzieci wywołują tę funkcję, gdy chcą zażądać zmiany stanu.

Komponent kontrolowany a niekontrolowany po podniesieniu stanu

Po podniesieniu stanu dziecko, które wcześniej było właścicielem stanu, staje się **komponentem kontrolowanym** — otrzymuje bieżącą wartość i onChange od komponentu nadrzędnego. Komponent nadrzędny jest jednym źródłem prawdy.

Podnoszenie stanu przez wiele poziomów

Czasami trzeba podnieść stan o kilka poziomów w górę drzewa. Jeśli stan musi zostać przekazany przez wiele komponentów pośrednich, warto rozważyć Context, aby uniknąć przekazywania props przez kolejne poziomy.

Korzyści z podnoszenia stanu

Podnoszenie stanu zapewnia jedno źródło prawdy, sprawia, że przepływ danych jest przewidywalny (zawsze z góry na dół), upraszcza debugowanie i ułatwia późniejsze dodawanie kolejnych komponentów korzystających z tego samego stanu.

Stan pochodny ze stanu podniesionego

Należy obliczać wartości pochodne na podstawie podniesionego stanu wewnątrz komponentu nadrzędnego i przekazywać je jako dodatkowe props. Nie należy duplikować stanu — trzeba wyprowadzać wartości pochodne.

const [items, setItems] = useState([]);
const filteredItems = items.filter(i => i.done); // derived, not separate state

Gdy podnoszenie stanu staje się przesadne

Jeśli stan trzeba podnosić przez co najmniej 4 poziomy, struktura drzewa komponentów może być nieprawidłowa albo nadszedł czas na użycie Context lub biblioteki do zarządzania stanem.

Szybkie sprawdzenie

Jakie jest prawidłowe podejście, gdy dwa komponenty będące rodzeństwem muszą współdzielić ten sam fragment stanu?

Podsumowanie

Gdy komponenty będące rodzeństwem muszą współdzielić stan, należy podnieść go do najbliższego wspólnego przodka. Bieżącą wartość należy przekazywać w dół, a funkcje zwrotne do jej zmiany — w górę. Zamiast duplikować stan, należy wyprowadzać z niego wartości pochodne.

Następnie

Następna lekcja: **Prop drilling: kiedy szkodzi, a kiedy jest w porządku** — nauczą się Państwo rozpoznawać problematyczne łańcuchy przekazywania propsów i oceniać, kiedy wymagają one rozwiązania.

Często zadawane pytania

Czy lekcja „Podnoszenie stanu: zasady i przykłady” jest bezpłatna?

Tak — pełny tekst „Podnoszenie stanu: zasady i przykłady” 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 „Podnoszenie stanu: zasady i przykłady”?

Przenoś współdzielony stan do najbliższego wspólnego przodka i przekazuj go przez propsy Ć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 1 z 4.

Ile czasu zajmuje lekcja „Podnoszenie stanu: zasady i przykłady”?

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

Podnoszenie stanu: zasady i przykłady
Prop drilling: kiedy szkodzi, a kiedy jest w porządku
Wzorce komunikacji między komponentami siostrzanymi
Wybór właściwego miejsca przechowywania stanu

← Powrót do React Academy