một người thầy dạy có tâm và có tầm, thế hệ của tụi em rất ngưỡng mộ anh, chúc anh và gia đình có nhiều sức khoẻ và kênh ngày càng thành công hơn nữa!!! 😊😊
1. Lắng nghe DOM event từ react: - Sử dụng js thuần để listen DOM event (window.addEventListener('eventName', callback) - Khi eventlistener được kích hoạt, nó được lắng nghe từ đối tượng window nên chỉ khi nào close tab, hoặc browser thì mới kết thúc. Component unmount thì evenListener vẫn hoạt động. Khi mount lại thì sinh ra 1 eventlistener mới => dẫn đến tình trạng memory leak, khi component được mount lại thì eventlistener cũ vẫn đang lắng nghe từ component cũ => sử dụng cleanup funtion, dùng để sử lý khi component bị unmount (áp dụng cho cả 3 trường hợp của useEffect) => return ra 1 function trong useEffect
anh cho e hỏi 11:50 : tại sao return () => { unmouting ...} lại được gọi lúc component unmount ? theo e hiểu ở dạng useEffect(Callback, [ ]) thì Callback phải được thực hiện hết, nhưng khi chưa unmount thì return chạy( dòng 65 vẫn chạy ) E đoán là return của Callback chỉ được thực hiện khi component unmount?
anh ơi có cái đoạn cuộn xuống chưa > 300 px mà nó vẫn re render là sao ạ.Nếu em state em khởi tạo là true mà em setState là true thì nó có rerender k hả anh
anh Sơn ơi, anh có bài nào dạy tạo virtual scrollbar không anh, nếu có anh cho em link của bài đó đi, còn không có thì mong anh ra seri tạo virtual scrollbar
cb khi removeEventListener thì sẽ đc gọi lại khi remove phải không anh, vậy ở ví dụ này chắc mình đâu cần truyền cb cho removeEventListener đúng không ạ?
anh cho em hỏi là bản reactjs 18 em cũng làm cái sự kiện window như anh mà không cần remove nó cũng không báo lỗi gì ạ , à do bản 18 update lên không bị hay là do trình duyệt không thông báo
Thật ra nó chỉ có 1 log do function nó rerender thôi, 1 dòng là do thằng strict mode của react nó có sẵn á. Nên nó sẽ hiện 2 dòng log nhe, theo mình hiểu là vậy không biết đúng k :))
anh cho e hỏi 07:50 : a đang dùng dạng useEffect(Callback, [ ]), nó chỉ gọi Callback 1 lần khi component mount xong. Nhưng khi scroll thì nó lại gọi Callback liên tục ( console.log(' set state ') bắn ra liên tục).? E đoán là "scroll " được coi là 1 deps nên khi scroll thay đổi, Callback sẽ được gọi. Nếu viết đầy đủ ở đây phải là useEffect(Callback, [ scroll ]). mong anh trả lời =))))
Nhầm rồi ông ơi , nếu ông hiểu ra r thì thôi tui cmt cho mấy ông xem sau nha :D nó gọi 1 lần để addEventListener , và để hiểu rõ hơn thì các ông console ở handleScroll , Callback , Cleanup là biết nó sẽ chỉ gọi console ở handleScroll vì eventlistener đã đc add ấy
anh ơi em làm như vầy ko thấy nó báo Memory leak, như vầy ko biết có sao không anh?? window.onscroll = function() { if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) { setGoTop(true) } else { setGoTop(false) }; }
Cái bạn làm là "attachEvent" cái này có từ thời IE8 nhưng có nhiều nhược điểm- rồi sau này nó có "addEventLisener" được khuyến khích hơn. Với lại React ko báo vậy thôi chứ event listener cũ vẫn còn nằm trong memory đó, ở chrome console chạy "getEventListeners(window)" sẽ thấy.
@@F8VNOfficial dạ cảm ơn a, nhưng cho e thắc mắc cái nguyên lý nó hoạt động của nó (setShowGoTotop) nó làm sao hiện đc ạ, giả như mình thêm kiểu dữ liệu khác trong state nó có hiện đc ko ạ. E xin lỗi vì làm phiền anh. Hỏi :)
mọi người cho em hỏi với ạ, nay em sử dụng nextJS thì screen hay window API đều bị "is not defined", cả reactJS cx thế ạ, em có mò google thì nhiều trang bảo là nhưng cái API này chỉ dùng đc trên browser chứ ko chạy đc trên nodeJS env, em thấy cx hợp lý nhưng em thấy anh Sơn dùng rất thoải mái mà ko bị lỗi gì, mong mọi người và anh Sơn giải đáp giúp, em cám ơn
@@F8VNOfficial dạ thưa, em cám ơn anh đã trả lời, em dùng nextJS và render trên browser, mấy hôm nay dùng react thì ổn nhưng sang next dùng window thì vẫn lỗi ạ =))
Hic không phải em ơi. Em thử ôn chắc lại JS em sẽ tự hiểu là làm sao nó tự huỷ được khi em listen event ở đối tượng thuộc phạm vi window như vậy đc em. Nó ko báo warning ra thôi.
@@toanhuynh7078 React 18 bỏ warning đó rồi nhưng thực chất nó vẫn chạy ngầm ở dướ nha. Trong vd này của a Sơn bạn có thể mount/unmount vài lần rồi console chạy "getEventListeners(window)" vào trình duyệt sẽ thấy nó ngầm tạo thêm event ở dưới
cách 2: trong trường hợp ta không muốn dùng đến hàm cleanup useEffect(() => { window.onscroll = (e) => { if (window.scrollY >= 200) { setScrollToTop(true); } else { setScrollToTop(false); } } }, [])
Không báo lỗi thì nó tuỳ vào cơ chế của phiên bản React. Những kiến thức cơ bản về Javascript cho ta biết memory leak sẽ xảy ra ở đó em, em console thử trong event handler là biết đó.
một người thầy dạy có tâm và có tầm, thế hệ của tụi em rất ngưỡng mộ anh, chúc anh và gia đình có nhiều sức khoẻ và kênh ngày càng thành công hơn nữa!!! 😊😊
1. Lắng nghe DOM event từ react:
- Sử dụng js thuần để listen DOM event (window.addEventListener('eventName', callback)
- Khi eventlistener được kích hoạt, nó được lắng nghe từ đối tượng window nên chỉ khi nào close tab, hoặc browser thì mới kết thúc. Component unmount thì evenListener vẫn hoạt động. Khi mount lại thì sinh ra 1 eventlistener mới
=> dẫn đến tình trạng memory leak, khi component được mount lại thì eventlistener cũ vẫn đang lắng nghe từ component cũ
=> sử dụng cleanup funtion, dùng để sử lý khi component bị unmount (áp dụng cho cả 3 trường hợp của useEffect)
=> return ra 1 function trong useEffect
Học qua khái niệm này rồi em công nhận a dạy kĩ thật xem lại quả ko phí t/g :D
ngồi hóng miết nới thấy anh ra video , huy vọng mai anh ra thêm video cho tụi em ạ , thanks anh nhiều
Em học Spring boot backend xong qua học react bên fe thấy khá là thú vị về cách code
Chờ mãi cũng có video tiếp theo rồi :D
anh vừa dạy vưa thực hành tâm huyết quá
anh cho e hỏi 11:50 : tại sao return () => { unmouting ...} lại được gọi lúc component unmount ?
theo e hiểu ở dạng useEffect(Callback, [ ]) thì Callback phải được thực hiện hết,
nhưng khi chưa unmount thì return chạy( dòng 65 vẫn chạy )
E đoán là return của Callback chỉ được thực hiện khi component unmount?
Cam on anh rat nhieu ve nhung bai giang hay a
Đọc document của react mãi chẳng hiểu.. xem video của anh một lần hiểu luôn..
thask anh ạ...
Em mạnh dạn đoán video sau là gọi API xong trong khi chờ API về thì unmount component.
hay qá a.Mong a ra nhiều video bổ ích nữa ạ!
Hay quá thầy ơi, em cảm ơn thầy nhiều
anh ơi có cái đoạn cuộn xuống chưa > 300 px mà nó vẫn re render là sao ạ.Nếu em state em khởi tạo là true mà em setState là true thì nó có rerender k hả anh
anh Sơn ơi, anh có bài nào dạy tạo virtual scrollbar không anh, nếu có anh cho em link của bài đó đi, còn không có thì mong anh ra seri tạo virtual scrollbar
nếu truyền [] chỉ chạy 1 lần sau mỗi lần render sao cuộn lên cuộn xuống nó vẫn thay đổi được ạ
Vì listener đã được add rồi em, khi event được dispatch thì function handler sẽ được gọi. Em nên học chắc JS một chút nha em
cb khi removeEventListener thì sẽ đc gọi lại khi remove phải không anh, vậy ở ví dụ này chắc mình đâu cần truyền cb cho removeEventListener đúng không ạ?
Tại sao mình làm giống vậy, nó lại ko đưa ra warning rò rỉ bộ nhớ giống vậy ta??? Chỗ mục console.log của mình vẫn em ru. Why???
react 18 không đưa ra warning nữa , nhưng thật ra vẫn bị rỏ rỉ , vẫn phải fix . đọc cmt a Son bảo vậy :))
Có ai làm video editor thì hỗ trợ anh Sơn khoảng dựng clip đi. Chứ 1m anh vừa lên content rồi quay dựng nữa không xuể
anh cho em hỏi là bản reactjs 18 em cũng làm cái sự kiện window như anh mà không cần remove nó cũng không báo lỗi gì ạ , à do bản 18 update lên không bị hay là do trình duyệt không thông báo
Tại sao ở 7:48 a Sơn đã xoá 2 lần re-render rồi mà lúc này lại còn bắn ra 2 lần re-render nữa trước khi vào set state vậy?
Thật ra nó chỉ có 1 log do function nó rerender thôi, 1 dòng là do thằng strict mode của react nó có sẵn á. Nên nó sẽ hiện 2 dòng log nhe, theo mình hiểu là vậy không biết đúng k :))
anh cho e hỏi 07:50 : a đang dùng dạng useEffect(Callback, [ ]), nó chỉ gọi Callback 1 lần khi component mount xong.
Nhưng khi scroll thì nó lại gọi Callback liên tục ( console.log(' set state ') bắn ra liên tục).?
E đoán là "scroll " được coi là 1 deps nên khi scroll thay đổi, Callback sẽ được gọi.
Nếu viết đầy đủ ở đây phải là useEffect(Callback, [ scroll ]).
mong anh trả lời =))))
Nhầm rồi ông ơi , nếu ông hiểu ra r thì thôi tui cmt cho mấy ông xem sau nha :D
nó gọi 1 lần để addEventListener , và để hiểu rõ hơn thì các ông console ở handleScroll , Callback , Cleanup là biết nó sẽ chỉ gọi console ở handleScroll vì eventlistener đã đc add ấy
@@NhatNguyen-zg6il Đúng rồi cái log đấy trong event mà
Callback nó đâu được gọi đâu bạn, mà là HandleScroll được gọi chứ, bạn thử console log ở ngoài HandleScroll nhưng vẫn trong callback là hiểu
anh ơi em làm như vầy ko thấy nó báo Memory leak, như vầy ko biết có sao không anh??
window.onscroll = function() {
if (document.body.scrollTop > 40 || document.documentElement.scrollTop > 40) {
setGoTop(true)
} else {
setGoTop(false)
};
}
Cái bạn làm là "attachEvent" cái này có từ thời IE8 nhưng có nhiều nhược điểm- rồi sau này nó có "addEventLisener" được khuyến khích hơn. Với lại React ko báo vậy thôi chứ event listener cũ vẫn còn nằm trong memory đó, ở chrome console chạy "getEventListeners(window)" sẽ thấy.
Rất thích những bài giảng của thầy. Thầy có dạy react native k ạ
Cái này tương lai xa xa mới làm tới em ơiii
5:50 Cho em hỏi tại sao lại có dấu ngoặc tròn bọc thằng button lại v ạ? E cám ơn.
Bọc vào cho code nó dễ đọc hơn thôi bạn chứ bạn không bọc thì giả sử nó nhiều html trông nó khó nhìn
A cho e hỏi, vấn đề ẩn hiện trong ReactJS luôn là state kiểu dữ liệu boolean quyết định hả anh. Cảm ơn a!
Ko em, do biểu thức điều kiện quyết định em nhé
@@F8VNOfficial dạ cảm ơn a, nhưng cho e thắc mắc cái nguyên lý nó hoạt động của nó (setShowGoTotop) nó làm sao hiện đc ạ, giả như mình thêm kiểu dữ liệu khác trong state nó có hiện đc ko ạ. E xin lỗi vì làm phiền anh. Hỏi :)
anh cho em hỏi khi thay đổi key khi render ra thì chuyện gì sẽ sảy ra ạ
Đợi mãi.thank anh
mọi người cho em hỏi với ạ, nay em sử dụng nextJS thì screen hay window API đều bị "is not defined", cả reactJS cx thế ạ, em có mò google thì nhiều trang bảo là nhưng cái API này chỉ dùng đc trên browser chứ ko chạy đc trên nodeJS env, em thấy cx hợp lý nhưng em thấy anh Sơn dùng rất thoải mái mà ko bị lỗi gì, mong mọi người và anh Sơn giải đáp giúp, em cám ơn
A dùng React chạy ở browser em ơi, em dùng next nếu code react đó được render trên server thì không có window đâu em nha
@@F8VNOfficial dạ thưa, em cám ơn anh đã trả lời, em dùng nextJS và render trên browser, mấy hôm nay dùng react thì ổn nhưng sang next dùng window thì vẫn lỗi ạ =))
phiên bản mới hình như ko cần remove eventlistener nữa
Hình như em thấy react 18 fix cái việc rò rĩ bộ nhớ rồi thì phải,
nếu như vậy thì có cần phải viết hàm clean không ạ?
Cái đó ko tự fix đc đâu em, coder phải tự biết vấn đề mà xử lý em ạ. Chỉ là 18 nó ko warning thôi ý
Cảm ơn anh nhiều!
anh ơi , hình như là từ phiên bản React 17 trở đi useEffect nó tự huỷ DOM Event khi unmounting, hì phải
Hic không phải em ơi. Em thử ôn chắc lại JS em sẽ tự hiểu là làm sao nó tự huỷ được khi em listen event ở đối tượng thuộc phạm vi window như vậy đc em. Nó ko báo warning ra thôi.
dạ anh, em hiểu rồi ạ, em thử console ra thì khi unmounting nó vẫn còn DOM even đó·@@F8VNOfficial
hình như anh quên làm cái video note lại những điều cần lưu ý cho useEfftect()
CHỜ MÃI ĐẠI CA ƠI HUHUU , SAO NGỈ GẦN 1 TUẦN VẬY XẾP , LÀM EM HÓNG MUỐN GÃY CÁI DÉP LUÔN :((((((((((
Tại anh edit cái video review đồ đạc mất 3-4 ngày, xong cũng mệt quá nên mãi mới quay thêm đc 😥
1,7,16,37,79,173,...
4 số tiếp theo ae
cleanup chạy cả khi re-render chứ nhỉ
Tuyệt vời!
Em vẫn làm như anh nhưng không rõ tại sao nó khộng hiện warning memory leak .
fix được chưa bạn.
mình cũng bị vấn đề này
@@NamNguyenacPhuong chưa ban
@@toanhuynh7078 React 18 bỏ warning đó rồi nhưng thực chất nó vẫn chạy ngầm ở dướ nha. Trong vd này của a Sơn bạn có thể mount/unmount vài lần rồi console chạy "getEventListeners(window)" vào trình duyệt sẽ thấy nó ngầm tạo thêm event ở dưới
Hay quá anh ơi ♥
Quá đẹp trai lun a ơi
Hay quá anh, nhưng anh ra video đều hơn dc k ạ
Ông học cho chắc vào chứ anh Sơn ra nhanh ông cũng phải học lại vài lần mới nhớ được
anh dùng theme gì vậy ạ
Tuyệt vời
Hay quá a ơi
hay qua anh oiii
Ủa mà hình như bấm Button nó ko chạy lên top nhỉ :v
Cái đó tự làm thôi em, học React lại bắt anh nói lại JS à 🤣🤣
Hay qúa!
Xịn quá
mấy thằng hooks này em học thấy hơi loạn ta :v
hay bài sau anh giảng kĩ hơn nha anh
Kỹ hơn ở điều gì em ơi? Video sau anh nói về trường hợp khác thôi em
em chưa hiểu lắm về useeffect
@@NamangMinh1 em học kỹ lại kiến thức cần có anh nói trong bài 1 đi em
@@F8VNOfficial vâng ạ.thì ra là thế ...
bạn xem k hiểu thì xem kĩ lại từng video nha, anh Sơn dạy tới đâu là chắc kiến thức phần đó ý
cho anh 1 tym
Cmt đầu
cách 2: trong trường hợp ta không muốn dùng đến hàm cleanup
useEffect(() => {
window.onscroll = (e) => {
if (window.scrollY >= 200) {
setScrollToTop(true);
} else {
setScrollToTop(false);
}
}
}, [])
em làm y như này bên typescript nhưng kh cleanup khi unmount, sau đó mount lại và resize thì nó không báo lỗi như a là sao v ạ
Không báo lỗi thì nó tuỳ vào cơ chế của phiên bản React. Những kiến thức cơ bản về Javascript cho ta biết memory leak sẽ xảy ra ở đó em, em console thử trong event handler là biết đó.
@@F8VNOfficial dạ em cảm ơn a
Cmt đầu