Học useRef - React Hooks (2021)
Вставка
- Опубліковано 8 лют 2025
- Học useRef - Series React Hooks 2021
React Hooks là một tính năng mới được thêm vào React từ phiên bản 16.8 giúp chúng ta có thể sử dụng các tính năng của React như life cycle, quản lý state trong functional components.
Nếu như các bạn đã biết về React Hooks nhưng chưa thực sự hiểu rõ về nó, cũng như thắc mắc lý do vì sao chúng ta phải sử dụng React Hooks hay nếu như các bạn chưa biết gì về React Hooks thì ở trong series này mình sẽ giải đáp các thắc mắc đó và giới thiệu cho các bạn các React Hooks phổ biến mà bạn nên biết thông qua các ví dụ đơn giản để từ đó các bạn có thể áp dụng ngay vào trong dự án của mình sau khi hoàn thành xong series này.
📕Resources
Học useState: • Học useState - React H...
Học useEffect: • Học useState - React H...
Học useMemo: • Học useMemo - React Ho...
Học useCallback: • Học useCallback - Reac...
Học React JS cơ bản trong 30 phút: • Học React JS cơ bản tr...
Fake data: reqres.in/
💻 Thông số PC & Gears của mình (Affiliate Links):
Máy ảnh Canon EOS M50 + Kit 15-45mm - shorten.asia/b... (TIKI)
Microphones Elgato Microphone Wave 3 - shorten.asia/j... (TIKI)
Micro Rode Videomic Go - shorten.asia/w... (TIKI)
Màn hình Dell S2421HN 23.8Inch IPS - shorten.asia/7... (TIKI)
Màn hình MSI OPTIX G27C4 27 VA 165Hz - shorten.asia/w... (TIKI)
Tai Nghe Gaming SteelSeries Arctis 7 DTS.X 7.1 - shorten.asia/E... (TIKI)
Chuột SteelSeries Rival 310 - shorten.asia/A... (TIKI)
Ổ cứng HDD Western Digital BLUE 6TB - shorten.asia/Q... (TIKI)
CPU Intel Core i5-10400 - shorten.asia/y... (TIKI)
Mainboard ASRock B460M - shorten.asia/G... (TIKI)
📢 Liên hệ với mình tại:
Facebook: /
Instagram: / holetex
Github: github.com/hol...
Facebook cá nhân: / minhtung09
Email: holetex@outlook.com
#reacthooks #reactjs #react #hooks #holetex #useRef
Nếu các bạn muốn biết kĩ hơn về tham chiếu và tham trị thì thảm khảo ở video về useCallback nhé
Học useCallback - React Hooks (2021)
ua-cam.com/video/cgXtak3_O3E/v-deo.html
giọng hay, giải thích thẳng vào vấn đề, ko lòng vòng, dễ hiểu mà vẫn đầy đủ kiến thức, chúc anh sớm đạt được nút bạc :33
cảm ơn em nhiều nhé
Vào thẳng vấn đề, không lòng vòng mà vẫn dễ hiểu và đầy đủ kiến thức. Mong anh ra nhiều video hơn nữa!!
Thẳng vào vấn đề, ko lòng vòng :3
Cám ơn Hotex nhé
Cảm ơn anh vì những video rất hay và tận tâm! Chúc anh thật nhiều sức khỏe và niềm vui trong cuộc sống ạ!
Cảm ơn các bài học của anh. Rất hữu ích cho người mới làm quen với React js
Mong anh ra video về async và await ạ ☺️☺️☺️
giải thích để đưa ra sự khác biệt rất hay.
thanks a, xem vid xong clear hẳn về useRef luôn ạ😁😁😁
a giảng hay và dễ hiểu quá
ngắn gọn dễ hiểu cảm ơn a vì video
tuyệt vời anh ơi!
hay lắm luôn nha anh
Rất đầy đủ. Thank you!
hay quá anh ạ. Mong anh làm nhiều video về hook
Cảm ơn em
khi nào làm redux với redux toolkit lun a :D thương a
Hay quá anh ơi
cam on anh, anh giang rat de hieu
Vẫn đang hóng saga
Cmt đầu chúc anh sức khoẻ ạ
Cảm ơn em
hay qua a
Cảm ơn em zai
@@holetex a acp fb e nha. kkk
@@Danginh5784 fb em tên gì nhỉ
cảm ơn anh
Hay qá
cám ơn anh :3
Cảm ơn em
Anh ơi, anh có thể làm video về nodejs express không ạ? Em cảm ơn ạ
Qúa hay
Hóng usecustom
5:47 đoạn này em thấy phải là dùng useState để tính số lần re-render lại component chứ a?
hello a. E bị bắn 2 lần console liên tục ạ nghĩa là 1 lần nó sẽ nhảy ra {countRef: 1} {countRef: 2} sau đó là 3 4 rồi 5 6 ạ. e gõ y chang mà k biết sao nó bị như z
7:15 a ơi cho e hỏi sao a console.log( { count } ) mà không console.log(count) luôn ạ ?
Làm vậy để khi em làm app thực tế sẽ có nhiều chỗ console log sẽ dễ debug hơn, biết được đó là giá trị của biến nào
cái .current là làm cái gì vậy anh
React nó quy định vậy em
useRef nhiều tính năng tốt hơn state tại sao k thay thế useRef luôn ạ useRef có nhược điểm gì thế a
như trong video có đề cập việc re-render của useState đôi khi là ưu k bị delay ui
ủa nếu bỏ useState, chứ giờ muốn cập nhật UI thì làm thế nào ?
Anh cho e hỏi 3:45 anh bảo thằng useRef trả về object trước đó còn obj thuần thì không. Vậy tại sao thằng countRef lại thay đổi giá trị
Trả về object đó có nghĩa là object đó nó ko bị khởi tạo lại. Ví dụ như em thay đổi countRef.curent thành 1 thì ở lần render tiếp theo, countRef nó vẫn tham chiếu tới object này và giá trị của field current vẫn là 1. Và lúc này em tăng giá trị lên thành 2. Tương tự cho các lần render tiếp theo.
Nhưng đối với obj thuần thì sau mỗi lần re-render nó sẽ bị khởi tạo lại nghĩa là giá trị của nó sau mỗi lần re-render luôn là { current: 0} nó không giữ được giá trị ở lần mình tăng lên 1 ở trong hàm handleClick vì mỗi lần re-render nó bị gán lại 1 object mới ko còn là object trước đó.
Em tham khảo lại video useCallback anh giải thích chi tiết hơn về tham chiếu và tham trị
@@holetex ok tks anh giải thích
Video hay lắm ạ
Hay quá anh ơi