ReactJS: Component life cycles qua ví dụ thực tế 🎉 (2020)
ฝัง
- เผยแพร่เมื่อ 13 ต.ค. 2024
- Một trong những bâng khuâng cho những bạn mới học ReactJS đó là có quá nhiều component life cycle, vậy sử dụng cái nào, sử dụng khi nào và có lưu ý gì khi sử dụng hay không?
Cùng mình xem hết video để giải đáp:
✅Bạn nên dùng component life cycle nào?
✅Mỗi life cycle sử dụng cho mục đích gì?
✅Nên né cái life cycle nào ra?
✅Lỗi nào thường gặp và cách fix?
Hi vọng những chia sẻ của mình từ video này sẽ giúp bạn code ReactJS tốt hơn. 😍
#reactjs #componentlifecycle #easyfrontend
Link tham khảo:
Tài liệu trong video: drive.google.c...
Component life cycle: reactjs.org/do...
Cái diagram về life cycle: projects.wojtek...
-----
💻 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: / nvhauesmn
💻Github: github.com/pau...
💼 LinkedIn: / haunguyenmn
Cảm ơn các bạn đã xem video của mình 😍
Bạn nào hiểu component life cycle rồi thì LIKE 👍
Thấy video hãy thì ❤️cho mình nhé!
Bạn học được gì sau video, bình luận bên dưới nhé!
anh ơi anh nói thêm về mấy cái lẻ như getderivedStateFromProps và getsnapshotbeforeupdate được không
Thanh Tùng hi Tùng ơi, hiện mình hk khuyến khích dùng những life cycle này nè, và rất hiếm use case sử dụng nó, ngay cả trang chính thống cũng khuyên hạn chế dùng nè. Nên không biết bạn có đang dùng mấy cycle này hk? 🙂
học react tốt nên học từ bản chất class đi lên thấy dễ tiếp cận vs functional hẳn. nắm rõ cấu trúc re-render các thứ. mấy bạn đừng bỏ qua class nha.
Anh dạy rất bình dân, dễ hiểu. Cảm giác như anh hiểu rõ người mới học có những thắc mắc ở điểm nào, thật là gãi đúng chỗ ngứa haha.
hahaa cảm ơn em nhiều nhiều nhé Vỹ =))) tại mấy cái anh đã bị nên share lại thôi nè hehe
Triệu like cho video của a này...về mặt nghe nhìn thì khỏi phải bàn cãi..điểm 10 cho chất lượng...
hehee cảm ơn em nhiều nhé Tài 😍
Trời đệt đi làm gần nữa năm rồi. Vô đây xem có mấy cái mình hiểu sai vãi lun. Cảm ơn anh nhiều nha.
😅 cảm ơn Minh nha, nếu có gì còn chưa rõ thì trao đổi thêm với mình nha hehee
Cảm ơn anh Hậu nhiều ạ. Em đang học React mà cứ lung bung. Nghe xong vid của anh mới vỡ ra. Chúc anh sức khoẻ và ra thêm nhiều vid bổ ích nữa ạ!
yeah cảm ơn em nhiều nhé, chúc em nhiều sức khỏe và học tốt nhen 😊
e xem video từ lúc public mà lúc đấy chưa đụng đến life cycle nên chưa thấm. giờ mới đụng nên xem lại là thấm rồi a. video a đầu tư và nói dễ hiểu lắm a. Thanks a lot!
yeahhh cuối cùng cũng thấm, ngon lành bauer ơi hehee 😉
Anh chia sẻ về component life cycle của React dễ hiếu thật! Chúc kênh ngày càng thành công và phát triển
Bất đồng bộ luôn anh ei
haha okie a ghi nhận rồi nhé, cảm ơn Kiệt nha!
React update DOM and refs anh có thể giải thích rõ hơn về cách dùng của nó được không
cái compdidmount có lần dùng thư viện cdn bên nó chỉ dùng dom thôi nên phải dùng sau khi đã render ra dom ấy
à cảm ơn bạn nhen, biết thêm vụ này hihi 😊
Anh nói về Double Mounting dùng useEffect trong React 18 đi ạ
hi em, hk biết có phải em đang muốn nói về cái này hk hen?
stackoverflow.com/questions/72238175/why-useeffect-running-twice-and-how-to-handle-it-well-in-react
cảm ơn a, bài giảng hay quá, toàn lỗi mà mình hay mắc phải. Mong a ra nhiều video thêm
hihi cảm ơn em nhiều nhé Tien ơi 😍
7:54 Đoạn này anh nói là ===, theo em nhớ shouldComponentUpdate sử dụng shallow comparison ==, còn deep compare mới là === đúng không anh.
à ko em nhen Khánh, vụ so sánh 2 với 3 dấu, nó khác với shallow/deep compare em nhen.
stackoverflow.com/questions/16633947/in-javascript-is-it-better-to-use-two-equal-signs-or-three-when-comparing-varia
Em tham khảo cái thread này nhen 😉
@@EasyFrontend dạ em cảm ơn anh Hậu
Cám ơn anh nhiều, loạt video của anh rất thực tế ( vì hay đụng phải trong lúc làm dự án ) nên rất hữu ích ạ.
Anh cho e hỏi ở [16:00] anh dùng giải pháp:
B1: Khởi tạo biến isComponentMounted = false trong constructor();
B2: Set lại biến isComponentMounted = true trong componentDidMount để đủ điều kiện setState();
B3: Set lại biến isComponentMounted = false khi chuyển qua route khác.
Vậy tại sao ở B1 mình không thiết lập giá trị ban đầu của isComponentMounted = true luôn , như thế sang B2 mình đỡ phải mắc công set lại giá trị = true cho nó ?
cảm ơn câu hỏi của bạn nhé.
Ở đây cái biến isComponentMounted mang ý nghĩa là component ready nên nếu set ngay từ đầu bằng true thì nó không có đúng với ý nghĩa của nó nè.
Nên mình dùng ở componentDidMount để bật nó lên true thì sẽ đúng hơn nhé! 🙂
Cảm ơn vì đã phản hồi cho mình biết video hữu ích với bạn nha ❤️
@@EasyFrontend nhưng mà dù sao e thấy nó đã chạy vào hàm constructor() rồi thì đồng nghĩa với việc component lúc đó chắc chắn đã được mounted rồi chứ anh.
Cám ơn anh đã phản hồi lại comment của e ạ !
Juhand Van. Chào bạn, bạn xem lại quá trình mounting trên cái diagram nhen.
Nó sẽ chạy từ
constructor()
render()
Mount vào DOM: ở đây nó mới mount nè bạn
componentDidMount()
Nên việc bạn bật nó true ngay từ đầu là chưa hợp lý nhen 😉
@@EasyFrontend ok anh, e đã clear. Cám ơn anh nhiều nghen :))
Juhand Van. Yeah cool em! Cảm ơn em đã đặt câu hỏi nhé 😉
làm thêm clip hướng dẫn về bất đồng bộ đi a.
à cái này em tham khảo trong khoá javascript của anh nhé Quốc hihi
Cảm ơn anh, nhưng e có 1 ý kiến, là nếu được a đặt tên các video của mình theo số thứ tự và có luôn tên channel a ở trên title. Để khi cần search lại ví dụ ( Easy Frontend bài 5 life cycle) là sẽ ra video của anh ngay mà ko trùng keyword với mấy kênh khác. Em rất cảm ơn với sự chia sẻ của a và chúc a thật nhiều sức khỏe ạ.
Wow tips hữu ích, cảm ơn bạn Vinh nhiều nhé!
Mình đã update lại title của tất cả videos có chữ Easy Frontend nhé.
Còn stt cho bài, do mình đang làm video lẻ nên hk có cái này nè.
Ít bữa mình làm theo từng dự án, sẽ add stt nha.
Cảm ơn bạn nhiều nhé Vinh! 🙂
Anh này dạy dễ hiểu quá,
hehe cảm ơn em nhiều nhé 😍
anh giảng dễ hiểu quá ạ ! thank youuu
công nhận anh diễn đạt rất dễ hiểu
hihi cảm ơn em nhiều nhé Nhân 😍
Ví dụ em gọi dữ api từ redux và khi đó phải sử dụng ComponentDidUpdate để so sánh props cũ với props mới khi redux chờ lấy dữ liệu từ sever về. Khi đó thì mới có thể có dữ liệu để set vào state. Như anh nói hạn chế dùng ComponentDidUpdate thế còn cách nào khác không ạ?
à khi em dùng redux, em có thể check bên reducer, nếu khác thì set state mới, ko thì return state cũ em nhen, đừng làm bên phía component em nhé 😉
series của anh giải thích dễ hiểu lắm ạ, chúc anh thành công
Nguyễn Tùng hihi cảm ơn em nhiều nhé Tùng ơi! Nếu em quan tâm hãy làm theo anh series này để hiểu và thực hành đc hooks nhen 🙂
@@EasyFrontend anh ơi anh làm thêm vid về async await, hoisting cũng như xử lí bất đồng bộ đi ạ, cách giảng của anh dễ hiểu lắm ạ
Nguyễn Tùng cảm ơn e nha Tùng 😍, a có dự định sẽ làm một vài videos về bất đồng bộ trong js nhé! Mà sau cái react hooks nha hêhhee
anh có thể làm video về bất đồng bộ trong React js được ko ạ, có thể là bất đồng bộ trong lúc connect vs api server ạ
hi Nam, ý em là chỉ đơn giản là gọi API lên server và lấy dữ liệu trả về render lên UI thôi đúng hk Nam? 🙂
Nếu là vậy thì trong series về hooks, Nam sẽ thấy nhen 😉
anh ơi anh làm clip giải thích giúp em bất đồng bộ và cách sử dụng cookies từ page login cho page home với ạ
hi em, em có thể nói rõ hơn một tí hk? Cái em đang muốn làm là gì và đang gặp vấn đề gì nè? 🙂
Em đang làm page login em muốn lưu lại data (email, password) khi đăng nhập bằng cookies. Sau khi đăng nhập xong thì page chuyển qua page trang chủ ( home ) ở home này em có 1 avatar user bên cạnh user này sẽ hiện email lấy từ cookies. ( rõ hơn là em đang muốn setCookies nhưng mà chưa biết cách làm đó anh) mà e đang học thằng react hook nên nhờ a làm clip hoặc đã thông não làm sao giúp em với ạ
@@tungnguyenthanh1866 ý trời, em làm như vậy là sai nha. KO BAO GIỜ lưu tài khoản, mật khẩu người dùng nha, dính lỗi bảo mật nghiêm trọng em nha. Cái này là cái flow authorization, em nên trao đổi với team y nha, a giải thích ở đây hơi dài 😉
Em nói nhầm sorry anh nha. Ý là đó đi theo cái flow của email để lên page home changedPassword á anh. Mà em đọc documents về cookies thì ko hiểu lắm mà thấy trong source cũ thì thấy có withCookies đồ tùm lum em ko hiểu lắm. Do em sinh viên mới ra trường mà trong trường không có dạy cookies á anh. Mong anh sớm ra clip về cookies trong react hook để em cày tiếp kkk. Do em đang học react hook của anh thấy hay lắm, do có chỉ rõ trong code. Nên em thấy hay vô cùng.
Anh ơi, vậy trường hợp khi ta muốn props có sự thay đổi thì sẽ update lại component thì sao ạ?
Ví dụ như em có chức năng sign up user (có dùng redux). Thì sau khi ấn nút submit form, em muốn hiện lên 1 popup, trong popup đó có 1 nút confirm. Nếu user ấn vào confirm thì mới call api để sign up user (component modal là 1 component riêng). Thì tức là khi ấn confirm thì sẽ thực thi 1 action để thay đổi 1 biến isConfirm trên store. Sao đó trong component Sign Up form em muốn kiểm tra khi nào biến isConfirm đó === true thì mới call api.
Vậy TH này thì sẽ xử lý bằng các Lyfecycle method ntn ạ?
hi Duy ơi, ca này bắt đầu phức tạp, a muốn biết thêm một vài thông tin. Em ping qua Facebook để trao đổi thêm nha Duy 🙂Thông thường những dạng logic thế này, em nên đặt vào chung một component để xử lý cho dễ, không nhất thiết phải đẩy lên redux nè. 🙂
@@EasyFrontend dạ vâng. Thực ra em.muốn dùng cái alert ấy kiểu common ấy ạ, nên mới viết riêng ra 1 component, để lúc nào cần ở component nào thì gọi vào cho dễ. 😁.
Vậy nếu thông thường xử lý luồng mà mình phải cập nhật biến trên store, dẫn đến props truyền về component thay đổi, thì trong component nhận props ấy mình sẽ xử lý như nào vậy anh? Nhất là mấy biến kiểu boolean ấy. Anh mô tảqua cho em quy trình chung chung cg dc ạ, chi tiết em có thể tự mò dc . Cảm ơn anh
Trc kia em hay xử lý cái đó trong componentWillReceiveProps. Giờ cái đó k dc recommend nữa r. Em lại đưa nó vào trong componentDidUpdate , thì nó hay bị lỗi như trên clip anh có nói 😂
Cám on tác giả
hóng video bất đồng bộ của anh :))
Anh cho em hỏi này với ạ Vd . Em có một state list (length =3) trong component cha,
mỗi phần tử trong list tương ứng một component con. Khi setState tăng lên 1 phần tử (length = 4 ) thì ba phần tử cũ có tính là unmout hay chỉ render lại thôi ạ.
hi em, nó chỉ re-render lại thôi em nhen 😉
còn mà nó bị mount/unmount thì em check lại key set có đúng chưa nhen
@@EasyFrontend em cảm ơn ạ. Cmt nào anh cũng rep thích ghê ❤️
a ơi giờ e thấy ngta dùng Hooks nhiều, a có thể làm video về react Hooks đc ko a?
Trung Duy Nguyễn À video về Hooks thì tuần sau có nha Duy 😉
function và class component đều có lifecycle đúng ko a?
yeah đúng òi nhé Quốc, cái nào cũng có 3 giai đoạn chính
- mount
- update
- unmount
mỗi bên đều có cách để handle cho mỗi giai đoạn này em nhen 😉
video hay quá ạ
Okie em nha Sáng ơi, anh đang măm me làm một series về bất đồng bộ hehe
@@EasyFrontend vâng ạ ^^
Em chỉ mới đang học ReactJS nên nhiều chỗ khó hiểu ạ. Video anh giảng hay và dễ hiểu quá ạ.
rất thực tế và hay quá anh ơi!
hihi cảm ơn em nhiều nhé Tín ơi 😍
8:40 cái super đó e cũng ko biết bỏ nó vào làm j nữa, chỉ biết bỏ vào là props nó mới dùng đc =)))
hi em, cái này kiến thức bên OOP nhen, em đọc phần kế thừa bên OOP là sẽ hiểu nha 😉
Chào anh, em mới học react , em đang dùng redux thunk để gọi sử lý bất đồng bộ , nếu không sử dụng componentWIllRecievePróp thì làm sao phát hiện được props thay đổi vậy anh
Chào Huỳnh, để giải quyết cái này, mình cần biết cái code hiện tại xử lý trong phần componentWillReceiveProps nó làm gì nè, bạn có share cho mình cái link demo cho code đó hk?
Và bạn cũng kiểm tra lại cách tổ chức component hiện tại của bạn luôn nha, mình có làm video gợi ý ở đây: th-cam.com/video/7zHaB7V5_pc/w-d-xo.html Bạn tham khảo xem sao hen. 🙂
@@EasyFrontend ví dụ em muốn get danh sách sản phẩm từ api. Em sẽ dispatch 1 cái action call api rồi lưu kết quả,error,loading trong redux lun. Dùng redux thunk, rồi container mới lấy từ redux về dùng
Trong component Will receive props sẽ kiểm tra xem prop đó có thay đổi hay không r xử lý
@@haihuynh3539 Bạn có thể sử dụng shouldComponentUpdated(prevProp, nextProp) để check nhé
@@manhcuong1788 Bạn ơi. Mình hỏi 1 chút. Nếu trong props trả về từ store ấy, mình có 1 biến dạng boolean , mình muốn kiểm tra nếu biến đó = false thì sẽ setState cho 1 biến khác để hiển thị alert message. Vậy thì sử dụng Lifecycle Method trong trường hợp này như nào ?
Mình làm cái đó trong comoonentDidUpdate mà nó báo lỗi, kiểu dùng setState trong đó nên nó cứ gọi nhiều lần ấy
a có thể làm 1 video riêng để nó về lỗi khi dùng componentDidUpdate hk anh? anh nói là hạn chế dùng nhưng hk có ví dụ cụ thể tại sao hạn chế nên cũng hơi khó hình dung anh ạ? Thanks anh nhiều!
à hình như anh có giải thích đâu đó thì phải.
nó dễ gây ra inf loop em nhé.
Ví dụ đơn giản: trong component did update em có setState() --> trigger update --> did update --> set state --> lặp lại hoài luôn
nên nếu trong componentDidUpdate của em làm ko khéo thì rất dễ bị inf loop, là vòng lặp vô tận.
nếu logic đơn giản thì may ra em còn control đc, nhưng nó mà phức tạp thì em sẽ mất kiểm soát, và thỉnh thoảng gây ra inf loop, ko biết đường nào mà lần.
--> tốt nhất là ko dùng did update em hen. Với giờ mình chuyển sang hooks hết òi, ko dùng class nữa, nên em có thể nhẹ đầu hơn tí về vụ này hehee
@@EasyFrontend dạ thanks anh nhìu, có dịp làm thêm video về HOC nữa nha a, hihi
@@sometimesalways1259 yeah mà tại giờ ít dùng nên a cũng hk có định làm á hehe
@@EasyFrontend năng nỉ a lun á, hihi, hk thì làm về react lazy và suspense cũng dx ạ, hihi
@@sometimesalways1259 à mấy cái đó thì a sẽ làm trong khoá học reactjs em nhen. A chuẩn bị update thêm nội dung cho khoá đó đây hehe
7:10 pureComponent
Hi vọng anh có thêm video để em học hỏi. SUb anh ủng hộ.
hihi cảm ơn em nhiều nhé ❤️Cho a xin hỏi thêm tí, em có học được gì mới từ video hk Shen?
Anh cho em hỏi là ở trên thì hạn chế dùng componentDidUpdate nhưng em thấy khi dùng react hook thì phần did update lại được dùng nhiều v anh?
hi Tân, anh chưa hiểu ý em lắm.
cơ mà mình cần làm rõ chỗ componentDidUpdate một tí
mình hạn chế sử dụng nó vì nó có khả năng xảy ra INF-LOOP
kiểu did update --> set state mới --> did update --> set state mới --> .... lặp lại hoài luôn
nếu em sử dụng mà control và chắc chắn nó ko xảy ra tình huống này thì okie em nhen
cơ mà thật ra rất khó để kiểm soát tất cả trường hợp, đặc biệt là khi em dùng cái này tùm lum nơi, lúc đó kiểm soát mệt nghỉ luôn hihi
video hay quá a ơi :33
Cảm ơn tác giả !
mình mới học reactjs, đã có đọc qua tài liệu reactjs trên trang chủ (bản mới nhất - react function), ở react class thì mình thấy họ có rất nhiều function life cycle (có 1 vài cycle họ khuyên là không nên dùng), qua react function(hook) thì họ chỉ còn hỗ trợ và tóm gọn lại 3 cycle chính là (ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount), có 1 cycle phụ nữa là shouldComponentUpdate, cho mình hỏi là tại sao lại như vậy nhỉ ? mấy cycle kia ko cần thiết hay sao, mình tính theo react function(hook) thì với 4 life cycle này là đủ hay sao ?
hi em, anh có một số ý cho em tham khảo nha.
1. Mình có thể code reactjs component bằng 2 cách: class component hoặc functional component (hooks)
2. Trong một dự án có thể có:
- Chỉ toàn class component
- Vừa class component + vừa functional component
- Chỉ toàn functional component
Nó đều tương thích và chạy đc với nhau, ko vấn đề gì nha.
3. Hiện nay, các dự án mới đều dùng react hooks bởi sự tiện nghi của nó, code gọn hơn, dễ quản lý hơn. Còn các dự án cũ, thì họ sẽ viết code mới bằng hooks, còn cũ thì vẫn giữ nguyên như vậy.
4. Còn về life cycles, do opensource nên họ open hết tất cả các life cycles họ có. Tuy nhiên trong ứng dụng chỉ có một vài cái mình dùng thôi, còn mấy cái kia hầu như ko cần thiết nè. Thực tế em chỉ cần dùng như trong video a nói là đủ rồi đó hehe
Hi vọng giải đáp đc thắc mắc của em 😉
@@EasyFrontend e cảm ơn a nhé ko phải là e ko biết mà là có đọc qua rồi, có những life cycle họ open nhưng họ có thêm chữ UNSAFE thì hiểu là họ muốn bỏ trong tương lai nhưng có vài life cycle họ ko có chữ UNSAFE nên e thắc mắc thôi.
anh cho em hỏi. khi gọi api lấy dữ liệu trong hàm componentDidMount() thì dữ liệu đó k được hiển thị trên trình duyệt hay như thế nào ạ. vì react nó render() trước xong mới đến componentDidMount(). tks anh!
hi Hoàng, nó vẫn hiển thị dữ liệu lên được nhé.
Vì khi em fetch xong dữ liệu ở CDM, em sẽ update state.
Khi state thay đổi, component sẽ được re-render lại với state mới, từ đó mà dữ liệu mới sẽ được hiển thị lên nha 😉
hay lắm a ơi ! hóng tiếp cái bất đồng bộ js
hihi okie a ghi nhận rồi nhé, cảm ơn Tùng nhiều nha! 🙂
Chào bác lại là e, e cũng đang xài componentWIllRecieveProps trong REACT NATIVE cũng hay bị thông báo warning không biết bao giờ sẽ loại bỏ hẵn, do là mình có dispatch một action từ component con để thay đổi state của container component, nhưng mình chỉ muốn animation lại container component chứ không muốn render lại toàn bộ, phải chăng trường hợp này vứt hết mấy đoạn xử lí trong componentWIllRecieveProps vào shouldComponentUpdate ?
Hi Vũ, bạn có thể share cụ thể hơn là chính xác bạn làm gì trong componentWill...Props hk?
1. Thường những thứ bạn làm trong will receive props có thể biến nó thành controlled component, đẩy các thay đổi đó lên thằng cha quản lý hết.
2. Mình cũng hạn chế dùng shoudComponentUpdate() nè, chỉ dùng nếu thực sự cần thiết.
3. Về re-render, bản chất ReactJS sẽ ko render lại DOM nếu ko có props hay state change, nên bạn inspect xem có render hay ko nha? Nếu ko bị render lại thì ko sao nha.
Bên trên là một vài gợi ý cho Vũ, bạn tham khảo thử hen.
Nếu Vũ có thể share cụ thể Vũ làm gì trong componentWIllRecieveProps() thì mình sẽ trao đổi thêm hen 🙂
@@EasyFrontend à trong componentWIllRecieveProps mình có nhận vài props từ redux, mình muốn control scroll từ ref của nó , và dĩ nhiên là mình có viết luôn shouldComponentUpdate để không nhận sự thay đổi của props trên, ý mình là componentWIllRecieveProps có vẻ hơi thừa, mà mình có thể gom cả 2 vào shouldComponentUpdate đúng không bác .
I'm VuCms Hi Vũ, mình nghĩ trường hợp của Vũ có thể apply controlled component. Vũ tìm hiểu về cái này chưa?
@@EasyFrontend Giờ mình mới nghe, mình sẽ tìm hiểu thử. Cảm ơn bác đã chia sẻ. !!!
A chia sẽ 1 vài cách để hạn chế render khi không cần thiết đi a
Scotlrip B ồ một ý hay nè, okie bạn nhé, mình ghi nhận nha 😉
Phước Khánh Nguyễn đúng rồi Khánh ơi, nhưng hạn chế dùng shouldCompnentUpdate() nhé. Thật ra tối ưu nhất là phải kiểm tra lại cái flow dữ liệu của app bạn đang dùng, việc tổ chức hk tốt sẽ dẫn tới nhiều lần re-render mà mình hk để ý. Khánh có thấy như vậy hk?
@@EasyFrontend đúng r đó a. ý e là cách design component ntn để hạn chế việc render ă. còn trg hợp bất khả kháng thì dùng memo với Pure Component
@@scotlripb8731 mình dùng useEffect() cũng được phải không ạ ?
Khi nào thì anh ra video bất đồng bộ trong javascript ạ
VoDucThang hi Thắng, hiện thì a chưa biết sẽ khi nào ra nè, trước mắt a đang hoàn thành cái series redux project, xong cái đó a sẽ xem xét để làm cái này nhen Thắng 😉
@@EasyFrontend dạ vâng anh
hay quá anh ơi.
hehe thank you em 😍
Em chào anh ạ.em có câu hỏi ạ.em chưa dùng setInterval trong componentDidMount bao giờ.theo em hiểu componentDidMount chỉ gọi một lần duy nhất khi hàm render được chạy.vậy anh cho em hỏi khi mà cứ trong 1s mình setState nhưng lúc đấy componentDidMount đã dừng lại thì có set lại state không và data trên trình duyệt có được cập nhật luôn sau 1s không ạ hay phải reload lại trình duyệt ạ.em không biết cách nói như nào cho dễ hiểu hơn.em đang đi làm thêm em không có máy tính để test.không hỏi thì lại ngứa ngáy trong người quá anh ạ.
hi Dũng, cảm ơn em đã đặt anh câu hỏi cho anh nha.
- Cái interval, em khai báo một lần là nó sẽ chạy hoài luôn nha, cho đến khi em clear interval.
- Nên việc componentDidMount() kết thúc rồi thì cái interval() nó vẫn tiếp tục chạy nhé.
- Trong interval, nó có setState(), nên nó sẽ trigger re-render luôn nha Dũng.
- Em không cần phải reload browser nha.
- Khi em reload browser thì đồng nghĩa với việc reload cả nguyên cái app, và nó sẽ phải chạy lại từ đầu nha Dũng.
Hi vọng a trả lời được câu hỏi của em 🙂
@@EasyFrontend dạ.em cám ơn anh nhé.hay quá anh ạ.cám ơn anh ạ.
Anh ơi nếu e chuyển component cũ là class component sang function component thì mình xử lý cái life circle như thế nào ạ.
Em cảm ơn anh
Em có thể tham khảo link bên dưới nhen Thái hehe
Cơ mà anh khuyến khích em nên hiểu logic rồi viết lại theo hướng của hooks, thay vì map 1-1 cố định theo một quy tắc nào đó nhé Thái hehe
blog.carbonfive.com/replacing-component-lifecycle-methods-with-react-hooks/
wavez.github.io/react-hooks-lifecycle/
Lót dép hóng hihi
Tuyệt quá a Hậu ơi
hehe cảm ơn em nhiều nhiều nhé 😍
Ớ em dùng === để render ra điều kiều kiện đó nhưng nó toàn nhảy trang là sao vậy a
Highlights Gaming LOL hi em, anh chưa hiểu ý em lắm nè? 🙂
Khoảng gần cuối video tầm 16:00 trở đi cái lỗi đó anh, nếu mình sử dụng Hooks thì fix làm sao ạ?
hi Kiên, cái này khi qua hooks mình sẽ dựa vào cái useEffect clean up để detect nha Kiên. Chắc video tiếp theo a có đề cập tới cái này. Có gì e đợi rồi tham khảo nha hehe
@@EasyFrontend hehe tks a. Tiện a làm cái video về bất đồng bộ từ cơ bản tới nâng cao nha a. Dài xíu cũng được. ^^
Kiên Đặng haha okie Kiên nhé, mình sẽ coi soạn tài liệu về phần này và làm videos trong tương lai nhen 😉
Thanks!
wow cảm ơn bạn WisenVN nhiều nhiều nhé ❤️
á há, thanks a nhe. Hổm giờ em bị Life Cycle dzật, sợ quá nên toàn né k dám nhìn mặt xD
EleCtrO WizArD haha sau video này em có tự tin chạm mặt nó lại chưa? hehee
Anh làm video về Javascript callstack, event loop, message queue, timer được ko a, e thấy nó lằng nhằng và khó hiểu quá :((
Thank a
Yay cái phần này là kiến thức nền tảng của JS, a đã note lại, a sẽ làm 1 video về chủ đề này nhé Tú hihi
e chưa học reactjs mà học react hooks lun ổn k a
à hooks là một phần của reactjs nè, nên em cứ học ko sao nghen, nếu em chưa có cơ bản, có thể tham khảo khoá reactjs của anh trên udemy để hiểu về cách mình tổ chức và làm việc với dự án reactja nha Tiến 😉
hay quá anh ơi :)
hehe cảm ơn em nhé Hiếu 😉
bất đồng bộ với đồng bộ anh ơii, hay quá
Hòa Nguyễn hehee cảm ơn em nhiều nha Hoà, hôm giờ nhiều bạn request cái bất đồng bộ này quá, chắc a sẽ sắp xếp làm quá 👍 Cảm ơn em đã phản hồi cho anh nha hehe
Easy Frontend dứt liền a ơi
@@EasyFrontend làm gấp cái bất đồng bộ nha a :D
hóng từ chiều trên group rồi :D
Elrics Edward hahaa cảm ơn bạn, cho mình xin hỏi tí, bạn xem xong có học được gì mới hk? 🙂 Có nắm được khi nào dùng life cycle nào hk?
@@EasyFrontend thật sự em chỉ dùng componentWillMount thôi ạ :D cảm ơn anh đã chia sẻ
Anh làm video bất đồng bộ đi anh ơi.
hehee okie em nha, mà sau series Redux Saga và NextJS em nhé hehe
@@EasyFrontend dạ okii anh 😍
thanks a, bai giang rat hay!
hihi cảm ơn Hùng nhiều nhé! ❤️
a giải thích redux dc ko ạ, e học chả hiểu gì ấy phần stateToProps() ấy a :))
react-redux có hof connect() kết nối component với redux.
connect(mapStateToProps,mapDispatchToProps)(Component);
Hiểu đơn giản là mapStateToProps: chuyển đổi state của redux thành props cho components.
mapDispatchToProps chuyển đổi dispatch của redux thành props.
cảm ơn bạn Trọng đã giúp mình giải thích nhé.
Bạn FREE SOFTWARE hiểu vấn đề chưa nè?
e vẫn chưa hiểu lắm a ạ
FREE SOFTWARE bạn chưa hiểu vấn đề gì vậy? Có thể hỏi thêm mình ở đây nha.
e ko hiểu chỗ khi thực thiện 1 action thì payload: trong action nó lưa trữ gì ạ và lấy dữ liệu đó ở đâu ạ,
e nghĩ vậy ko biết đúng ko ạ
Anh giới thiệu về redux đi anh ! Cảm ơn anh ❤
Vi vu duc hihi mình ghi nhận ý kiến của bạn nhé, hiện mình đang làm cho react hooks, xong có gì sau đó mình xem xét và làm thêm phần này nhen 😉
Anh ra chuỗi video về Redux đi anh ^^
Thien Duc Hi Đức ơi, anh ghi nhận nhé, mà cho a hỏi em đang gặp khó khăn gì khi làm với redux nhỉ? 🙂
@@EasyFrontend em đang muốn tìm hiểu về umijs và dvajs nhưng cần có kiến thức về redux và router anh ạ. Nên em mới có ý kiến vậy ạ
đúng rồi redux củng giống life cycles vậy đọc document khó hiểu vô cùng
Shaper VT hehe okie em, sắp tới sẽ có mấy videos về redux nè hehe 😉
hóng vid bất đồng bộ của a
hihi cảm ơn bạn nhiều nha, chắc phải 1, 2 tuần nữa mới tới nỗi bất đồng bộ nè, tại mình đang làm cái series react hooks 🙂 Nếu bạn quan tâm thì check trên channel tham khảo thêm nha hihi
em ms học nên ko bt analytics là gì ah ơi
hi Hoàng, phần analytics là mấy cái tracking của Google Analytics nè, Facebook Pixel nè, nó thống kê lượt truy cập, truy cập trang nào, ở website bao lâu, ... đại loại là hành vi người dùng trên website của mình để mục đích cải thiện UI/UX cho nó tốt á Hoàng hehe
đồng bộ và bất đồng bộ đi a ơi
haha ngon lành, topic hót hòn họt là đây, mn yêu cầu hơi bị nhiều hihi, hi vọng sẽ ra sớm em nó cho mn tham khảo hihi 😉
@@EasyFrontend yêu a nhiều
Hello sir,
em bắt đầu học về React, đợt tới em thi lý thuyết lái xe đang có dự định làm cái app nho nhỏ để thực hành. Em có xem một vài tut làm Quiz sau đó có một vài vấn đề cần hỏi pro:
- Giả sử bộ lý thuyết khoảng 600 câu, em muốn load ra 15 câu/ 1 quiz/ và có thể random() 15 câu đó. (Data là một file *json chứa 600 câu gồm câu hỏi và trả lời)
- Trong file json có một url image, có cách nào lưu trong local và lấy ra được không anh?
- Vì thời gian học còn lâu mà thi thì gần tới nơi rồi nên mới hỏi anh trước về giải pháp cho mấy vấn đề trên.
Và đây là link tutorial: github.com/barman47/quiz-app
hi Sơn,
1. Về vấn đề random 15 / 600 câu hỏi thì có nhiều cách làm lắm nè, ví dụ một cách sau:
- Đầu tiên đọc 600 câu hỏi lên.
- Chia ra thành 15 nhóm, tức mỗi nhóm 40 items.
- Loop qua 15 nhóm đó, mỗi nhóm pick random một item.
--> Cuối cùng có được 15 câu hỏi random 🙂
2. Về việc câu hỏi có hình ảnh:
- Để hình ảnh trong project, rồi trong file json là đường dẫn tới cái hình là okie.
- Tải hình ảnh lên CDN nào đó ví dụ cloudinary, rồi gán đường dẫn vào json file.
Lúc render lên câu hỏi thì set cái đường dẫn vào src của thẻ img là xong.
🙂
@@EasyFrontend Cảm ơn vì đã phản hồi. Em cũng đã load được random 15/600 câu. nhưng lại dính vấn đề là khi previous step thì nó lại gọi random() chưa giải quyết được.
(src image là em cho nó vào trong Json:
../asset/img/images)
Về phần Image từ file Json đã load ra được dạng : localhost://3000/assets/img/image nhưng ảnh không thể hiển thị/nếu import một ảnh từ static file thì lại được nhưng nó lại dưới dạng /static/image....
chắc không thể vì kiếm trên mạng hoài không có giải pháp nên mới hỏi. hoặc vẫn còn kém chưa đủ trình
chắc phải lưu trên sever nào đó rồi get về
@@EasyFrontend Xem về cấu trúc bài giảng thì rất thích. Việt nam cần những người như anh.Em bỏ code chục năm rồi giờ học lại nhiều cái mới quá. Nếu không biết gì xin phép hỏi anh.
Sơn Nguyễn Yeah thoải mái nhé Sơn ơi, mình ngưỡng mộ bạn vì bỏ thời gian rồi mà vẫn còn quay lại đc vs code nè 😍
bất đồng bộ đi anh ơi
stackblitz.com/edit/clickeditoutside
handle việc click outside để turn off dropdown .
nhưng viết như vầy kiểu tác động đến DOM không biết nên khắc phục như nào ấy a.
a có thể xem qua giúp em 1 lát với
hi em, về vấn đề này, theo anh nên xử theo 1 trong 2 cách sau:
1. Em dùng built-in dropdown của thư viện UI, nó thường có làm sẵn việc này, mình không cần handle nữa.
2. Nếu em muốn tự làm thì không nên handle event click của windows như vậy, thay vào đó em nên làm dạng như modal. Có một overlay vô hình full màn hình. Add sự kiện click cho nó, nếu click lên thì sẽ ẩn dropdown.
Okie hk Doshi?
@@EasyFrontend dạ e hiểu ý a . như kiểu lúc muốn ON thì click bth . còn khi ON rồi mình click outside thì chạm vào modal state off phải k a
i'm Doshi Yesss, nó đó em heheee
HD 1 project thực tế cho người mới đi bạn
hi bạn ơi, mình có đang làm rồi đó hihi, bạn check cái project photo app + redux nhé 😉
@@EasyFrontend bạn đẩy code link git đi, để giành thời gian xem hiểu hết các concept của nó, tiết kiệm thời gian gõ code. course về reacjs nhiều nhưng toàn version cũ người mới sẽ khó học, nhiều bug, chưa rõ, hope bạn ra các nhanh nhiều bài về reacjs, nhanh thần tốc trong1 tháng. thank
like trc tính sau :))
hahaaa cảm ơn bạn ơiiiiiii =))))
lamf bat dong do di anh oi
hihi hi Hùng ơi, hôm giờ a sml quá, để ít bữa có time a sẽ cố gắng sắp xếp để chia sẻ với mn về topic này nghen hehee 😉
vote bất đồng bộ a ơi
hihi okie em Phúc 😉
Hay quá a
hihi cảm ơn Trọng nhiều nha 😍