useRef() hook | Cách sử dụng useRef() hook
Вставка
- Опубліковано 26 жов 2021
- 👉 Xem Lộ Trình Học: fullstack.edu.vn/learning-paths
👉 Đăng Ký Học Offline Tại F8: short.f8team.dev/dang-ky-hoc-...
Video này chúng ta sẽ tìm hiểu về về một hook mới đó là useRef() hook | Cách sử dụng useRef() hook
#hoclaptrinh #hoclaptrinhmienphi #javascript #reactjs #frontend #backend #devops #f8
-------
☻ Phần mềm sử dụng trong video:
Công cụ dịch Tiếng Anh: bit.ly/2Wsuhet
Công cụ đo đạc giao diện web: s.net.vn/D8kL
Công cụ viết CV xin việc chuyên nghiệp: mycv.vn
--------------
☻ Khóa học lập trình web MIỄN PHÍ:
Kiến thức nhập môn: fullstack.edu.vn/courses/less...
Xây dựng giao diện với HTML, CSS: fullstack.edu.vn/courses/html...
Xây dựng web responsive: fullstack.edu.vn/courses/resp...
Lập trình Javascript cơ bản: fullstack.edu.vn/courses/java...
Lập trình Javascript nâng cao: fullstack.edu.vn/courses/java...
Làm việc với Terminal & Ubuntu: fullstack.edu.vn/courses/wind...
Xây Dựng Website với ReactJS: fullstack.edu.vn/courses/reactjs
Xây dựng web với Node & Express: fullstack.edu.vn/courses/nodejs
HTML, CSS tips: fullstack.edu.vn/courses/html...
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu.vn/courses/tool...
Xem thêm tại: fullstack.edu.vn/courses
-------------------------------------
F8 Official
(c) Sơn Đặng
Website: fullstack.edu.vn
Facebook cá nhân: / sondnf8
Nhóm Học Lập Trình Web: / f8official
Email: contact@fullstack.edu.vn
© Bản quyền thuộc về Channel F8 Official ☞ Do not Reup
© Nghiêm cấm sử dụng video nhằm mục đích thương mại dưới mọi hình thức. - Наука та технологія
Rất hay và sâu sắc luôn ạ, cám ơn a Sơn 😍
Cảm ơn anh nhiều ạ! Xem rất dễ hiểu và đầy đủ
cái quan trọng không phải là useRef sẽ đc call ở mounted, nó sẽ được call ở lần đầu render component. và mỗi khi setState qua useState sẽ dẫn đến rerender component, nhưng set giá trị cho ref thì không.
việc dùng useRef thay vì move biến ra ngoài component(tạo closure) là bởi do logic sẽ cần phải duy trì trong vòng đời của component, nếu move ra closure thì sinh ra nhiều instances của component đó sẽ dùng cùng 1 data(semi global), nó sẽ phù hợp với các chức năng cần thế, ví dụ tạo unique ID cho mỗi component chẳng hạn.
Cảm ơn bạn về góp ý cực kì chính xác và hữu ích với mình nhé. Thật sự lúc quay video mình không có nghĩ tới semi global luôn ý. Cảm ơn bạn nhiều nhé 😍😍
Ơ anh Tiệp ạ, bấm vô kênh em mới nhận ra. Hâm mộ anh đã lâu ạ, đúng expert comment chỉ có chuẩn. Em học hỏi nhiều được từ comment của anh, hi vọng sẽ có thêm nhiều góp ý của anh hơn. Sáng ra được idol comment chắc vui cả ngày 😍😍
@@F8VNOfficial bữa nào rảnh anh nói sâu thêm vụ này cho mấy bạn hiểu nha. thanks anh.
@@F8VNOfficial anh cho em hỏi tạo sao tạo unique ID cho mỗi component lại move biến ra ngoài component
@@atnguyentien7770 tại vì cơ chế hoạt động của React và Javascript là khi 1 hàm (ở đây function component cx là 1 hàm, như video đã đề cập), khi render thì function component sẽ chạy lại, và khi chạy lại thì giá trị của cai unique ID sẽ được set lại chứ không còn giữ giá trị khi bạn đã setInterval nữa. Nói chung vde này liên quan đến scope của biến đó
Anh Sơn Mãi Đỉnh !!!!
Hay quá, coi 3 lần rồi, càng xem càng thấy hay
Click button Start thì count sẽ đếm ngược 1 đơn vị. nhưng nếu click "Start" nhiều lần thì count đếm ngược loạn xạ lên thầy ạ. phần này fix như nào vậy Thầy
tuyệt vời anh :3
Hay quá anh ơi
useRef thì nên so sánh với property trong class chứ so sánh với 1 biến global bên ngoài vậy k đúng. Khi sinh ra nhiều instance của component đó thì sẽ ntn?
sao trên web f8 chưa có vậy ạ
hay quá đi anh
Hay anh ơi
cam on ban toi da dat diem 10
hay qua anh oi
setState được thực thi sau khi state được gọi
Nếu muốn lấy 1 thánh phần trong React
thì nên dùng document.queryselector() hay dùng ref gắn cho element vậy mọi người ?
Theo mình là dùng useRef, vì component chạy code từ trên xuống và add phần return vào DOM gần như sau cùng(hiện tại mình chỉ biết useEffect/useLayoutEffect chạy sau cùng) thế nên nếu dùng document.queryselector ngoài useEffect thì lúc đó trong DOM thật chưa có gì cả, nên không thể get Element được
anh Sơn ơi nếu như em nhấn start nhiều lần là nó sẽ chạy càng nhanh hơn á anh. Anh xem có cách ào fix lại không anh
mình fix được rồi, đây là code cho bạn nào cần.
const handleStart = () => {
if (timerID.current) {
} else {
timerID.current = setInterval(() => {
setShow((prev) => prev - 1);
}, 1000);
}
};
const handleStop = () => {
clearInterval(timerID.current);
timerID.current = false;
};
Khi em bấm vào chữ start nhiều lần nhiều setInterval sẽ bị gọi nhiều lần, số cũng bị giảm nhanh không ấn stop được. Nên em fix bằng cách cho thêm dòng này vào đầu hàm handleStart() :
timerId.current && clearInterval(timerId.current);
chỉ cần clearInterval(timerId.current) để khi component render lại nó xóa timerId cũ rồi gán lại timerId mới là được rồi ấy
chào anh Sơn, em muốn làm 1 timer như trên nhưng không có nút 'dừng lại', khi em bấm vào nút 'bắt đầu' thì đồng thời nó vừa đếm ngược và vừa ẩn cái nút 'bắt đầu' đi, anh có thể chỉ em cách làm được không? Rất mong anh trả lời comment của em, cảm ơn anh! :D
cái này bạn cho nó một cái cờ true/false => đầu tiên vào cho nó bằng true->hiện
sau khi onClick set nó lại false->ẩn
dung boolean classname theo 1 state di la duoc ban a
a sơn ơi, vd mình muốn lấy nhìu element thì mình phải dùng nhìu useRef đúng hk a, hay là mình chỉ lấy 1 element cha r mình query tới mấy child bên trong vậy ạ. e cảm ơn
Đúng rồi, làm như code thuần thôi bạn. Nhưng cái này ít dùng khi làm với React, vì hầu hết mọi bài toán phổ thông sẽ có cách giải quyết bằng React (dùng state để thay đổi elements). Trong một số bài toán đặc thù hơn, cần can thiệp trực tiếp vào DOM elements mà không qua React elements thì mới phải dùng thuần bạn nhé
dạ em cảm ơn a Sơn rất nhiều ạ
Hay
thay vì dùng một useRef() để gán giá trị thì có thể dùng state để thay thế ko a.
Được em nhé, nhưng sai mục đích của khái niệm được sinh ra. Em ko re-render thì ko cần xài state
bài này nếu tình huống user nhấn start liên tục thì hàm setInterval sẽ được gọi lại nhiều lần và leak memory đúng k ạ ?
chuẩn chuẩn, mình có code ra như này nè
const handleStart = () => {
if (timeOut.current) {
clearInterval(timeOut.current);
}
timeOut.current = setInterval(() => {
setCount((prevState) => prevState - 1);
}, 1000);
};
const handleStop = () => {
if (timeOut.current) {
clearInterval(timeOut.current);
timeOut.current = null;
}
};
bạn tham khảo nha
Cảm ơn bạn. Bài học rất hay.. Hiện tại mình có đang gặp một vấn đề khi re-render lại dữ liệu ở 2 commponent vd: làm sao để cập nhật thông tin user trên Nav khi mình cập nhật thông tin ở component User ( cả 2 thằng này cùng cấp chỉ nhận App làm cha) Rất mong bạn giải đáp giúp mình. Thanks!!!
Dùng context API của react hoặc thư viện redux ấy b
9:50 kích liên tục vào nút Start, sẽ thấy số giây đêm nhanh chậm lung tung, console.log ra thì thấy số nhảy tưng tưng, là sao vậy các bạn?
vì chưa clear các interval cũ đấy bạn, sẽ có nhiều interval chạy song song, các interval đó dùng hàm setState, mà hàm này chạy bất đồng bộ nên các kết quả bị lung tung
Bạn dùng useEffect rồi cleanup function vào ấy bạn
Chỗ handleStart lúc đầu có setState đc để clearInterval ko a nhỉ :v
Cần clearInterval đi không nếu bấm liên lục Start thì nó cứ setInterval liên tục time chạy max nhanh, khỏi Stop luôn. Mà hình như bên ngoài cũng cần 1 cái clearInterval không lúc đang chạy mà Toggle cái là lỗi tràn bộ nhớ ngay
Mình nghĩa gán setInterval váo 1 biến rồi dùng useEffect clear luôn cho nhanh bác
😍😍😍 quá hay
a nói về redux đi ạ
tại sao lại dùng ref mà không dùng getElementByID ạ?
vì mình đang học react chứ ko phải học js
E hay dùng ref này cho audio với video 😄
Dùng với audio, video cũng tương tự như với các thẻ khác đó em. Đều là tham chiếu tới DOM element đó
Anh Sơn ơi, tai sao em ấn start 3 lần sau đó ấn stop lại không dừng được. anh có thể giải thích giúp em không
const handleStart = () => {
if(timeid.current){
}else{
timeid.current = setInterval(() => {
setCountDown(prev => prev - 1)
console.log('start' )
}, 100)
}
};
const handleStop = () => {
clearInterval(timeid.current)
timeid.current = ''
console.log('stop')
};
e tự fix đc r heehe. cho b nào cùng thắc mắc
Em nhìn vào con số đếp ngược em lại sợ . Vì em sợ thời gian trôi nhanh
e nghĩ a nên có thêm video về class component nữa a ạ. trc e có chợt thấy component life cycle nên muốn học, nhỡ có lúc cần dùng thì sao. e nghĩ những bạn mới học fw fe chắc chưa biết đến life cycle nhiều nên có video sẽ tốt hơn ạ
Anh sẽ cố gắng em ơi, class trông thế mà đi làm thực tế nhiều khi phải maintain dự án cũ vẫn dùng class component em ơi
@@F8VNOfficial ít có channel nào dạy hay như anh nên em chẳng muốn xem ở đâu nữa, chỉ muốn xem a dạy thôi 😂
11:40 preState , State
mình sinh viên năm nhất đang học c++ thì dùng ứng dụng gì thực hành cho dễ vậy ạ, mình có tải cái visual studio mà nó k chạy đc, ai biết trả lời giúp mình với
code block hoặc dev C nha
có thể dùng visual code
5:30 nếu viết ra ngoài thì mất chất react kk
9:
Anh Sơn ơi tại sao console.log(h1Ref.current) lại cần cho vào trong useEffect ạ? em log ở ngoài nó undifi
Vì callback trong useEffect nó được gọi sau khi elements đc mounted vào DOM. Em xem kỹ lại bài useEffect em nhé