ReactJS: Props, State hay Global State? ❓🤔 (2020)
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- Có bao nhiêu dữ liệu đẩy lên redux hết 😱Bạn đang làm sai rồi đó! Cùng mình tìm hiểu để biết khi nào dùng props, state và global state trong ReactJS nha. Xem hết video nhé! 😍
Link code trong video: github.com/pau...
Props: reactjs.org/do...
State: reactjs.org/do...
#reactjs #PropsAndState #easyfrontend
-----
💻 Easy Frontend 🎉
Nơi kiến thức lập trình web frontend (html/css/javascript/reactjs) được chia sẻ một cách đơn giản, dễ hiểu mà đặc biệt là vui 😊 Với những tài liệu (tutorial) được biên soạn một cách kĩ lưỡng để giúp các bạn developer mới có thể nắm bắt vấn đề một cách nhanh chóng và hiệu quả. Từ đó nâng dần khả năng coding của các bạn lên theo thời gian.
❤️ Ủng hộ mình làm videos thì góp 5k tại đây nhé:
Ủng hộ tôi: unghotoi.com/e...
MoMo/ZaloPay: 0901 309 729
Kết nối với mình:
🎉Facebook: / learn.easyfrontend
💻Github: github.com/pau...
💼 LinkedIn: / haunguyenmn
Cảm ơn các bạn đã xem video của mình nhaaaaaa 😍. Bạn nào đã vô tình đẩy hết dữ liệu lên redux, điểm danh cái nào? 🤣
Easy Frontend em😂
@@edmgame6327 =))) may quá giờ biết rồi nhớ nè nhé bạn hehee
e chưa học đến redux :v
Cao Xuân Sang haha ít bữa em sẽ đụng tới nó, vậy chắc phải tranh thủ ra videos về redux quá 🤣
Em mới học tới đây ^^
Anh làm nguyên khoá reactJS luôn nha a....anh chuyền đạt rất dễ hiểu ❤️😁😁
hihi cảm ơn bạn nhiều nhaaaa, rất vui vì bạn hiểu được ý của mình 😍
Mình sẽ làm ở những khúc rối rôi chứ hk làm full từ a -> z nhen hehe
Bạn cứ subscribe rồi khi nào có video mới thì bạn check nhé 😉
Easy Frontend a hướng dẫn cách viết một project như thế nào là đúng đi a
EDM Game à mn cũng quan tâm cái này hở? Mình tưởng mn biết rồi nên hk làm mấy cái này nữa nè hihi để mình xem nếu mn vote nhiều thì mình sẽ làm hen 😍
@@EasyFrontend vem quan tâm =))
Tôi có thắc mắc là, để dựng cấu trúc folder cho reactjs, thì có nên group by File Type không?
Lần đầu xem kênh của anh. Xem video của anh e cảm thấy nhiều năng lượng thật, vui vẻ. Cá nhân e khi tiếp nhận kiến thức cũng dễ dàng hơn. Chúc kênh a ngày càng lớn mạnh
Yeah cảm ơn em nhiều nhé Công. Rất vui vì video hữu ích với em nè. Nếu có chưa rõ, thì cứ thoải mái trao đổi với anh nha 🙂
rất hay và dễ hiểu, chúc a có thật nhiều sức khỏe để ra thêm nhiều video hay cho mọi người xem
yeah cảm ơn em nhiều nhé 😊
em thấy rất vui vì được anh chỉ dạy những điều hay như này
Quá hay, quá dễ hiểu!☺
Cảm ơn nhiều rất rõ ràng dễ hiểu. Props được định nghĩa từ App()..ok còn State, là khi component có giá trị bên trong thay đổi như :second: 30,29,28.... còn useState và (name)State mình còn lơ mơ lắm bạn có clip nào đã giảng kỹ về phần này cho mình xin link. Mình cũng mới bắt đầu học Reactjs
hi Song ơi, mình có nguyên một series về react hooks, thumbnail nó màu xám đen, bạn xem trên kênh của mình sẽ có nhé hihi, chúc bạn học tập vui vẻ nhen 🥰
Cơ bản useState() nó là hook, và nó dùng cho functional component nè hehe
Hướng dẫn có tâm quá. Ra nhiều video nữa nha a
yeah cảm ơn em nhiều nhé Toàn 😊
Em coi rất nhiều bài giảng Props, State, và đây là bài giảng hay nhất
yeahhhh cảm ơn em nhiều nhé Hoàng! ❤️ Rất vui vì video hữu ích cho em nè, em học reactjs lâu chưa Hoàng? 🙂
những video của bạn rất dễ hiểu, và giải thích chuyên nghiệp, cảm ơn bạn rất nhiều!
yeahhh cảm ơn Đạt nhiều nhiều nhen, kênh mình đang có nhiều series hay, bạn có thể xem thêm tham khảo nhé.
Vào kênh --> playlist nhen hihi 😍
@@EasyFrontend nhất định rồi, chúc kênh sẽ phát triển thật nhiều!
em cũng đang mới học ReactJS ạ, thấy video của anh rất hay, anh có thể ra 1 seri dạy ReactJS từ căn bản luôn nha anh. Thank you so much
hi Quân, cảm ơn em nhiều nhiều hihi
anh thì có khóa học reactjs trên udemy từ năm 2020 òi nè
hiện anh đang làm thêm phần react typescript 2022 trong khóa đó luôn
link ở đây, em có thể tham khảo nhen
course.ezfrontend.com/reactjs
@@EasyFrontend em cám ơn anh nhiều
@@EasyFrontend dạ em cám ơn anh nhiều
C ơn a! Video a truyền đạt rất dễ hiểu ạ! Mong a ra những series tips or tricks về react and js ntn ạ! Thank you a!
hihi cảm ơn Nam nhiều nhé 😍 Mình vẫn đang tiếp tục làm videos để share cho mn nhé, bạn nhớ theo dõi kênh và share cho bạn bè cùng xem với nhé ❤️
Cám ơn anh ạ.trước em học react cũng đúng như anh nói.đóng mở form cũng chuyền props qua mấy cấp.
Hi vọng video sau anh làm video về BEM.em thấy hôm nay anh nhắc đến scss.😁😁😁
Phạm Dũng hahaa cảm ơn e nhiều Dũng ơi. Theo kế hoạch sẽ có một video về BEM chia sẻ với mn nhen hihi 😍
hôm nay mới tìm được kênh giảng vè React rất hay
Yeahhhhhhh cảm ơn Song nhiều nhiều nhé 😍
Việc cho hết tất cả state vào Global State để quản lý cũng có điểm lợi "Nếu" sau này Component đó cần mở rộng hay phát triển sâu thêm. Mình không thể không tính đến chuyện đó, vì nếu nó xảy ra mình cũng phải mất kha khá thời gian cấu trúc lại thay vì chỉ cần tạo các component mới và tới store lấy state.
hi Triết, cảm ơn bạn đã đóng góp thêm ý nha.
Cho mình xin hỏi thêm, bạn có thể ví dụ cụ thể một trường hợp để mn cùng lưu ý việc này đc hk? 🙂
Ví dụ thì mình nghĩ là mình có một Component chỉ dùng để nhập liệu và gửi lên server. Sau này thì khách hàng đòi trước khi gửi thì phải qua một Component xác thực với dữ liệu cũ hoặc là nhập xong nó sẽ tạo một status có thể chỉnh sửa và khi một người có chức vụ cao hơn chấp thuận thì cái status chứa dữ liệu nhập mới được gửi lên server. Thật ra mình cũng chưa gặp trường hợp kiểu này bao giờ :3
Mình có video nào nói về cấu trúc thư mục của một dự án React thực tế (bao gồm redux, redux saga...) chưa anh? nếu chưa mong anh làm một video về nó. Cám ơn anh vì những video hữu ích :)
Thương Hoài hi Thương, em check video Tổ chức files trong series redux project nhé, a có nói về cái đó á, mà ko bao gồm redux-saga nè hihi
@@EasyFrontend Cám ơn anh nhiều :)
Cảm ơn anh, Video dạy thì rất nhiều người chia sẻ còn video kinh nghiệm như vậy thì rất ít
hihi cảm ơn bạn nhiều nha 🥰 rất vui vì bạn thích video như thế này, mình sẽ sắp xếp làm thêm cho mn hen 😉
Cảm ơn vì chia sẻ của anh.
Rất dễ hiểu ạ
video rất bổ ích, cám ơn bạn
Yeah cảm ơn Quang nhé ❤️
bữa nào làm 1 video về function với class trong react đi anh ơi, video hay lại dễ hiểu :D
Khải Lâm baha cảm ơn Lâm nha. Tuần sau a có nói về React Hooks, a sẽ đề cập tới vấn đề này nha 🙂
@@EasyFrontend mà anh ơi cho em hỏi xí là bên class App () thì dùng user : " " trong constructor, nếu qua function thì sẽ thay nó bằng gì :D
Khải Lâm Ý Lâm ơi, a chưa hiểu ý em lắm? E copy đoạn code trong constructor a xem thử đc hk?
a nói về High Order Component đi a
hihi cảm ơn bạn đã góp ý cho mình nha 😍
Mình đã ghi nhận lại và sẽ sắp xếp làm một video về chủ đề này nha 😉
người thầy đỉnh cao quá dễ hiểu
hihi cảm ơn em nhiều nhé Tài 😉
anh ơi có phải input nên tách riêng component cha và dùng state riêng của nó onChange đúng không anh ? em đang làm app chat mà ô input cứ bị lag, em tạm thời tách riêng ra và onChange state của nó xong onBlur hoặc setTimeOut như bài search debounce anh dạy để cập nhật state cha nó không biết ổn không anh ?
à việc đầu tiên em cần tìm ra lý do bị lag trước em nha, rồi mới có giải pháp tương ứng.
Còn ô input của chat thì state nên để dưới thằng con, chứ đừng đem lên thằng cha em nha, khi nào submit thì mới báo lên thằng cha cho nó gọi API gửi tin nhắn đi là đc òi :)
@@EasyFrontend em hiểu rồi, cảm ơn anh
anh ơi sắp có video mới về react không ạ? anh dạy hay quá anh ạ, e muốn học tiếp nữa
hihi hi Phúc, sáng nay có thêm 1 video mới về Authentication nè, còn reactjs thì chưa có Phúc ơi. Anh đang dự định làm full khoá reactjs cho mn tham khảo luôn á Phúc hihi
hay quá a ơi, khi nào a làm về redux để mọi người hiểu đi làm thì sẽ bố trí như nào đi a
cao trần hi Cao, okie em nhé! Hẹn e ở một series về redux nhen 😉
Thế Redux form chỉ sử dụng cho 1 component nhưng nó vẫn đẩy lên Redux, trường hợp này thì sẽ như thế nào anh nhỉ, xin chút ý kiến từ anh
Nunchaku B theo anh thì trường hợp này nó hơi ko cần thiết thôi, vì cơ bản ko có share data mà bỏ lên redux thì hơi phí nè. Nhưng nó lại có tác dụng tốt nếu em làm multi-steps form. Nó giúp em persist data giữa các bước dễ dàng hehe 😉
@@EasyFrontend Thông tin rất hữu ít, Thanks anh. Anh có thể làm video sharing về Server Side Rendering hoặc PWA được không nhỉ, thân!
Cảm ơn anh. Anh chỉ em cấu hình scss trong react với. Nếu app có cả HomePage và AdminPage thì cấu hình scss như thế nào ạ?
hi Hoàng ơi, về việc cấu hình scss, a chưa hiểu ý em lắm.
Còn nếu dự án vừa làm cho KH, vừa làm cho admin thì a nghĩ em nên tách ra 2 dự án khác nhau, 2 cái website khác nhau luôn cho tiện quản lý em hen hihi
Anh Hậu ơi cho em hỏi là học code như thế nào là hiệu quả. Xem clip anh rồi code theo thì có hiệu quả không anh?
hi Toàn ơi, cái này chắc mỗi cá nhân mỗi kiểu. Mà theo a thì nên xem 1 lần trọn vẹn để hiểu vấn đề, xong coi lại lần 2 để code theo 😉
@@EasyFrontend Dạ. Cám ơn lời khuyên của. Em sẽ làm theo ngay và luôn 😁
mới học react đang ngu phần này may quá xem đc video của xếp
hehe cảm ơn em nhiều nhé 😊
@@EasyFrontend a làm thêm những project mini bằng react js đi a
Cho mình hỏi lúc get data từ api thì "thói quen" thường là nên lưu data redux rồi truyền xuống component UI hay là gọi ngay trong component đó luôn ?
à cái đó tuỳ trường hợp bạn nhen.
Nếu state đó chỉ dùng cho trang đó thì nên gọi từ component.
Nếu state đó cần dùng cho nhiều trang, nhiều nơi khác nhau thì mình mới dispatch action lên redux để thực hiện gọi API xong cập nhật state luôn nhen.
Bạn đọc thêm cái topic, khi nào sử dụng redux nhen.
redux.js.org/faq/general#when-should-i-learn-redux
@@EasyFrontend Ok tks b nhen
Cho em hỏi là nếu component con cần comunicate vs component cha thường thì em sẽ xài call back function thì ở đây mình có thể dùng global state không anh ơi
hi Trúc ơi, mình luôn ưu tiên component props và component state nhé. Hạn chế global state nè hehe
Nên trong case của em, là dùng dạng callback props nhé 😉
trong ham coundown thì có độ trễ ko anh ? nó có thể chạy lâu hơn 1s rồi ms render
hi Vinh, chắc chắn là có em nha, nó ko đảm bảo chính xác 100% nhé, tuỳ vào callstack của em có bận rộn ko nha, nhưng độ trễ ko nhiều 😉
Cảm ơn tác giả !
quả nhạc này tương lai sẽ ám ảnh não em :D
i'm Doshi =))) đoạn nhạc huyền thoại hahaa bạn có prefer đổi nhạc hk? =))
@@EasyFrontend em vẫn rất thích nó :D
Cảm ơn nhiều nhé.
làm video hướng dẫn về redux đi anh
hihi cảm ơn em nhiều nhé Diện, sắp tới a sẽ làm về redux nhen 😉
Hi anh. Cho em hỏi cái này: Mình có thể thay đổi state mà ko thông qua hàm setState có đc ko? Và tại sao?
hi Cường, một câu hỏi hay nè.
1. Thứ nhất, cách duy nhất thay đổi state là phải thông qua hàm setState() nhé.
2. Lý do nó đảm bảo được tính nhất quát của các giá trị giữa những lần renders, còn em thay đổi trực tiếp thì rất khó quản lý nó nằm ở lần renders nào.
Đây là câu hỏi được trả lời trên trang chính thức của ReactJS
reactjs.org/docs/faq-state.html#why-doesnt-react-update-thisstate-synchronously
Và có luôn một ví dụ chi tiết về cái này github.com/facebook/react/issues/11527#issuecomment-360199710
Em đọc thêm để hiểu rõ nhé Cường 🙂
@@EasyFrontend cái này nghe giống pure function vậy ta
@@NhatCuongVip Yay, cơ chế immutable đó Cường, đảm bảo việc thay đổi, cập nhật luôn được control, chứ hk thôi cho mutable là tạch 🙂
anh ơi cho e hỏi phút 11:11 anh viết kiểu gì ra được 3 dấu gạch trong vòng if vậy ạ
hi Tú, đó là font Fira Code đó em hehe, em coi link này để cài vào VSCode nhen 😉 github.com/tonsky/FiraCode
@@EasyFrontenddạ thanks anh ạ.
cám ơn anh nhiều
Yeah cảm ơn e nhé Brian :)
thank you!
anh ơi, cho em hỏi, em dùng Axios get data từ API về, trên desktop dùng oke mà trên mobile lại báo lỗi Network Error ạ :'(
Nhat Nguyen hmm cái này hơi lạ, e debug ra chưa Nhật nhỉ? a thì hk chắc issue này có root cause là gì nè 🙂
Easy Frontend cảm ơn anh đã rep ☺️☺️
Em fix đc r ạ :))
Hay
Cảm ơn a
hihi cảm ơn bạn nhiều nhé Tài 🙂
Có khoa FE kh ad ơi
hihi cảm ơn bạn đã quan tâm nhé 🙂
Mình hiện thì đang giảng dạy tại Nordic Coder khoá Frontend for beginner trong 4 tháng dạy từ HTML/CSS tới JS rồi qua ReactJS luôn nè.
Mỗi khoá nhỏ có một đồ án riêng để làm 🙂
Nếu bạn quan tâm học offline với mình thì có thể liên hệ với Nordic Coder để được tư vấn nhé.
Cảm ơn bạn nhiều nhen ❤️
làm về redux đi anh
KanBa Studio Okie bạn nhé, mình ghi nhận rồi nha 😍 Mình đang làm series React Hooks cơ bản, xong mình sẽ chuyển sang nói về vấn đề này nhé 😉
Easy Frontend cám ơn anh. Có gì thắc mắc em ib qua fb được k anh
KanBa Studio à cái này thì hoàn toàn đc nhé! Nhưng nhớ xem video mình hướng dẫn cách hỏi trước là được nè 😉
hay a
Toàn Nguyễn Cảm ơn em nha Toàn 🙂
Anh có thể nói to hơn dc k ạ :(
hihi hi em, này là video lâu lắm òi nên chắc lúc đó âm thanh chưa tốt, sr em nhé 😉 còn mấy videos sau này thì âm thanh khắc phục òi em hehe
hihi cảm ơn bạn nhiều nhé 😍
ko hiểu gì luôn
hi em, video này cần em có một chút cơ bản về reactjs, nếu em ko hiểu gì thì có thể ngâm cứu kiến thức cơ bản của reactjs một xíu rồi quay lại coi sau nhé 😉