ZROZUMIEĆ REACT CONTEXT API - Zarządzanie stanem w ReactJS ?
Vložit
- čas přidán 15. 02. 2021
- Chcę zrozumieć react context api. Złapałem się ostatnio na tym, że nie rozumiem tej części reacta. Założyłem kanał, by wspomagać mój proces nauki programowania. W filmie staram się wyjaśnić swoimi słowami czym jest react context api. Do czego jest nam potrzebne i jakie problemy rozwiązuje.
Kilka przydatnych linków:
pl.reactjs.org/docs/context.html
www.smashingmagazine.com/2020...
www.toptal.com/react/react-co...
/ you-might-not-need-redux
FB: / programistafrontend-10...
🎯: www.programistafrontend.pl/
IG: / programistafrontend
📧: daniel@programistafrontend.pl
-
-
Świetnie tłumaczysz! Od razu można załapać i fajne przykłady. 😃 dzięki 😉
Cześć Ewelina dziękuję za miły komentarz :) owocnej nauki 👍
Świetna metodyka nauczania:) Bardzo dobrze się Ciebie słucha, pzdr
Hej Zbigniew
Dziękuję Ci za mily komentarz. Mam nadziejeu ze to zgadnienie jest dla Ciebie prostsze :) powodzenia ✋🔥
Dzięki, za wytłumaczenie, przyda się!
Hej Rafał
Dzięki za komentarz. Powodzenia w nauce 👍
Ciekawe wprowadzenie do tematu Context API. Materiał dobrze przygotowany i solidnie przekazany. Dobra robota. Tak trzymać
Hej Naxov Sec
Dzięki za komentarz 💪🚀
Fajny materiał, zostaje na dłużej. Sub 👍
Dzięki ✋
Dzięki za wyjaśnienie!!😀
Proszę i dziękuję za komentarz 👍
Bardzo ciekawa forma poszerzania wlasnej wiedzy, chodzi mi o zalozenie kanalu. Osobiscie zaczalem sie uczyc Javascript i React.js, na razie prowadze jedynie dziennki programowania, ale moze kiedys przyjdzie rowniez czas na kanal. Dzieki za tutorial i pozdrawiam.
Mi pozwala utrwalać wiedzę jak najbardziej polecam ! :) Dzięki za feedback ✋
Doczekaliśmy się nowych póz do miniaturek. Yay
+Black :D nie wiem na jak długo :) dzieki za komentarz ! ✋
Dziekuje ze material!
Ja dziękuję za komentarz :)
Hej :) Fajny materiał. Może o tym wspomniałeś i tego nie wychwyciłem ale w przypadku prop drillingu dość sporym problemem jest re-renderowanie się komponentów-dzieci. Tego zazwyczaj chcemy uniknąć - zwłaszcza jeśli dany komponent nie jest zainteresowany konkretną wartością z propa i trzyma ją tylko po to aby przekazać niżej :)
Fajnie, że wspomniałeś o tym, że często kompozycja komponentów jest w stanie pozwolić nam uniknąć problemu prop drillingu. Dzięki temu być może nie będziemy musieli korzystać z Contextu.
Hint: Jeśli brakuje Ci jakiejś zmiennej w pliku w VSC to możesz ją łatwo zaimportować umieszczając kursor za brakują zmienną i korzystając ze skrótu ctrl + spacja :)
w końcu dobre wyjaśnienie. Wydaje mi się że większość problemów ze zrozumieniem Context API wynika z nazwy propsa "value" w Context Providerze. Gdyby ten props nazywał się np. valuesToPass czy coś takiego to by ludziom zdecydowanie łatwiej zaskakiwało o co chodzi.
Zdecydowanie tak :) ja też myślę ze to było kluczowe dla mnie w tym ze tak ciężko to wchodziło do glowy :) dzieki za komentarz !
Na co dzień korzystam z reduxa w wersji ze sliceami. Fajne było sobie przypomnieć jak Context API działa.
Cześć Daniel, kiedy w swojej nauce Java Scriptu zacząłeś uczyć się programowania obiektowego? Chodzi mi między innymi po jakim czasie i co już umiałeś. Czy możesz polecić jakiś kurs na temat programowania obiektowego albo może masz jakieś rady jak się go uczyć. Będę bardzo wdzięczny za odpowiedź. Dzięki za dotychczasowe filmy i wykonaną pracę.
Hej Gm
Dzięki za komentarz i za to, że oglądasz moje filmy :)
Ja sam jestem owocem kursów Samuraja i Colta Steela głównie. Do tego pomoc mojego przyjaciela Kamila też była nieodzowna. Szczerze Ci powiem, że programowanie obiektowe ciągle jest moją kulą u nogi. Sam ciągle się tego uczę. Ale robiłem odcinek o wszystkich kursach, które przerobiłem przed zdobyciem swojej pierwszej pracy link poniżej:
czcams.com/video/HJp28etcsKY/video.html
Mam nadzieję, że jakoś pomogłem. Jak po obejrzeniu filmu powyżej będą jeszcze jakieś pytania pisz śmiało 🖐
Czemu w 11:50 mówisz, że tak nie możesz przekazać tego propa `theme` do `Article`? AFAIK, to w Twoim przykładzie możesz tak zrobić.
Zgadza się mialem bardziej na mysli pokazanie zagnieżdżonych komponentów. Masz rację w tym wypadku jak najbardziej moglem przekazać propsem w dół. 👍 Dzieki za komentarz ✋
@@danielnoworyta Spoko, tak myślałem. Tylko dla osób wchodzących w świat React'a może to być odrobinę mylące :(
Daniel nie myślałeś o stworzeniu jakiś kursów np. z Reacta ? Jeżeli jeszcze nie masz tego w planach, to jako odbiorca uważam, że przekaz informacji masz bardzo dobry. To kiedy premiera ? :)
Maciek dzięki za fajny komentarz. Poki co jak najlepiej chcę stworzyć trzy serie na moim kanale zrozumieć html zrozumieć css i zrozumieć JavaScript :)
@@danielnoworyta Jasne również je śledzę, lecz tu miałem na myśli projekt raczej dostępny odpłatnie w formie kursu poruszający poszczególne aspekty danej technologii. Dzięki
@@maciejmikoajczak9850 być może kiedyś :)
Zastanawia mnie jedynie czy nie lepszej możliwości podania obiektu theme w zależności od isDarkMode. Czy nie da się tego warunku ustawić w jednym miejscu w App coś w stylu value={isDarkMode ? themeDark : themeLight} zamiast powielać tę logikę w każdym dziecku?
myślę, że da się coś takiego zrobić. Tylko wtedy pamiętaj, że rerenderujesz wszystkie komponenty zagnieżdżone w tym providerze. Przy theme ma to jak najbardziej sens ale jakbyś miał context związany z bardziej lokalną funkcjonalnością aplikacji, może być to zachowanie nieporządane. Styled components rozwiązuje to przez przekazywanie propsów do styli.
@@danielnoworyta A czasem wciąż jakakolwiek zmiana w Contex'cie nie powoduja rerenderu wszystkich dzieci Provider'a?
@@GrazikPL zgadza sie dlatego o tym napisalem wszystkie komponenty zagnieżdżone w providerze beda rerenderowane przy zmianie contextu
Załóżmy, że mamy rozbudowaną aplikację, w której jedną z części jest rozbudowany komponent tabeli z różnymi możliwościami edycji, filtrowania, sortowania, zaznaczania wierszy itp (coś typu komponent GridData z biblioteki MUI). Czy w przypadku takiego komponentu tabeli context api będzie dobrym rozwiązaniem dla przechowywania np. tablicy z zaznaczonymi rekordami czy też stanem filtrów lub "sorterów"?
Nie sądzę ze bedzie potrzebny do tego context. Zwykły state powinien wystarczyć do zaznaczania selekcji itp.
A czym w takim razie jest sens używania Conext'u do stylowania elementów? Co z Global Styles/ThemeProvider ze Styled Components?
Nie zrozumiałem pytania. Przeważnie theme providers pod spodem używają context api do dostarczenia informacji o aktualnie uzywanym theme w aplikacji.
No dobra wrzuciłeś stany do Providera a jeśli będę chciał gdzieś w children zmienić stan? Jak przekazać setCoś tam niżej?
Jako props niżej ?:) Tzn eksponujesz settery tak samo jak stany
Ja taki mały offtop. Niedawno w jakimś komentarzu natknąłem się na pewną pozycję, którą polecałeś jaką najlepszą ever dla UI/UX (książka lub kurs). Chciałem polecić ją znajomej osobie, która zaczyna działać w tym temacie, ale gdzieś mi to umknęło.. byłbyś w stanie napisać o co wtedy mogło chodzić? :D Jeśli znasz więcej takich źródeł to byłbym wdzięczny, bo z tego co udało mi się dowiedzieć to w UI/UX dużo trudniej o dobry praktyczny kurs, książkę, która prowadzi "za rękę" jak na front-endzie.
Hej dzieki za komentarz ✋
Tak polecam jak najbardziej designingui.com/
Książka mistrzostwo świata jeżeli chodzi o praktyczne podejscie do uiux designu. Do tego polecam kanal Michala Malewicza na polskim CZcams :) @Malewicz
Czy obecnie (początek 2024 roku) context api jest w daalszym ciągu używane i optymalne?
Wiele bibliotek korzysta pod spodem z context api więc znajomość jak dla.mnie to must have dla react deva.
A co to znaczy "rozsmarować w stylach" ?
Spread operator . . . Jakoś tak potocznie mi się przyjelo. Używając tego operatora trzech kropek niejako rozsmarowujemy obiekt tak by móc dodawać kolejne wlasciwosci w tym przypadku styli.
Polecam poczytać o spread syntax w jsie.
"Zrozumienie Context API pozwoli wam lepiej używać Reduxa" .... wszystko super ale po co używać Reduxa skoro się umie Context API ?
To właśnie Context API wyparło Reduxa, który generuje mnóstwo niepotrzebnego kodu i już umarł właściwe albo dogorywa sobie gdzieś z boku.
Reduxa dzisiaj używa się tylko jak idziesz do projektu gdzie on jest i nie ma czasu na refaktor
Na pierwszy rzut pewnie ze powinnismy uzyc contextapi. Przy sytuacjach typu zmiana theme, logowanie uzytkownika czy zmiana w lokalnych plikach context api bedzie wystarczajace. Ale przy większy ch aplikacjach, gdzie drzewko komponentów nie wyglada prosto i jest duzo zagnieżdżen zmuszanie reacta do przeliczania i szukana zmian w stanie komponentów zagniezdzonych w api moze byc kosztowne. Wtedy warto sięgnąć po reduxa. Takie mam odczucia :) ale oczywiscie dzieki za opinie :) ✋👍
@@danielnoworyta Korzystam z Context APi w sporych projektach i nie ma z tym żadnego problemu jeśli się dobrze przemyśli strukturę. No i hooki są tu mega pomocne i rozwiązują problemy o których piszesz.
@@benekex2 To zależy co masz namyśli mówiąc "sporych" 😏
Lepiej byłoby pokazać tylko trzymanie stejtu bo myślę że mało kto używa tego do stylów
Zgadza się Kacper ale chciałem pokazać na szerszej perspektywie co można zrobić z tym API