useImperativeHandle() hook | React JS

👉 Xem Lộ Trình Học: fullstack.edu....
👉 Đăng Ký Học Offline Tại F8: short.f8team.d...
Ở bài học này chúng ta sẽ cùng tìm hiểu về useImperativeHandle() hook | React JS
#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....
Xây dựng giao diện với HTML, CSS: fullstack.edu....
Xây dựng web responsive: fullstack.edu....
Lập trình Javascript cơ bản: fullstack.edu....
Lập trình Javascript nâng cao: fullstack.edu....
Làm việc với Terminal & Ubuntu: fullstack.edu....
Xây Dựng Website với ReactJS: fullstack.edu....
Xây dựng web với Node & Express: fullstack.edu....
HTML, CSS tips: fullstack.edu....
Ứng dụng cảnh báo khi sờ lên mặt: fullstack.edu....
Xem thêm tại: fullstack.edu....
-------------------------------------
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: [e-mail]
© 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.

[@tinvo5369]

3 tháng đi làm của em mà em chưa bao giờ nghĩ tới trường hợp này, thanks anh đã chia sẻ kinh nghiệm!

[@hiephoangvan943]

Cảm ơn anh rất rất nhiều 😘😘😘 , video này đã cứu cuộc đời em. Hôm qua em loay hoay mãi đến 1 2h sáng không xong cái bug, may sao sáng này mở youtube gặp đc video này của a Sơn 🤣

[@Godidthat]

hồi trc học video này ko biết để làm gì, giờ đụng thực tế search mấy tiếng đồng hồ lại phát hiện thì ra giải pháp là cái mình đã học r :)) cảm ơn anh Sơn.

[@chuminhhoang2141]

Giọng anh Sơn hôm nay hơi khàn có vẻ như anh đang làm việc nhiều mệt mỏi. Video có thể ra lâu hơn cũng được anh ạ. Sức khỏe mới là quan trọng. Chúc anh sức khỏe tốt để đem đến những video học lập trình hay cho mn ❤❤

[@F8VNOfficial]

Cảm ơn em, tinh ý quá. Anh sẽ chú ý nha ❤️

[@quynhdiem9592]

Ngày ngày đều mong chờ và ủng hộ anh

[@NamangMinh1]

Cảm ơn anh nhiều ra bây giờ em mới biết cách lấy video kiểu đó

[@ngthuan7497]

Hy vọng anh tiếp tục seri này ạ

[@SonNguyen-pg9ms]

cho e hỏi 9:44 tại sao func component Video lại phải có thêm đối số props vậy ạ?

[@minhtien213]

vì đối số ref bắt buộc phải nằm ở đối số thứ 2 sau props

[@thanh.tranthien15]

Như đề bài ở trên thì mình sử dụng useContext, callback prop được không ạ?

[@amanda2348-g9j]

sao giờ mình vào mục media không thấy link video xuất hiện nữa nhỉ

[@MsownO]

Hello anh nha, video của a thật bổ ích, cảm ơn anh nhiều

[@sonlengoc948]

anh ơi, cho em hỏi tí, khi em remove() video thì âm thanh nó vẫn còn hiện là sao ạ, element của video đã bị xóa khỏi DOM chưa anh

[@thienhs5982]

Anh Sơn vẫn chưa ra bài mới :(

[@myhanhnguyen5198]

anh oi, tai sao lai phai viet console.log(videoRef.current) ben trong hook useEffect() a?

[@F8VNOfficial]

Vì callback của useEffect được gọi bất đồng bộ, sau khi UI mounted vào DOM, console.log(videoRef.current) trong useEffect khi ấy mới truy xuất được vào element video trong DOM em nhé

[@myhanhnguyen5198]

@@F8VNOfficial oki anh, em cam on nhieu a :)

[@thang8617]

e thắc mắc ở phần forward tại sao không sử dụng props nhỉ? Thay vì sử dụng ref, mình có thể tạo một props là videoRef trong Video component cũng được mà nhỉ Vd:

[@F8VNOfficial]

Ví dụ khi em thiết kế UI components thì em dùng ref nó sẽ đồng nhất với các react elements hơn. Một số tình huống 1 component có nhiều ref thì có thể đẩy thêm props khác. Tuy nhiên sẽ có một số thư viện nó cần ref của component tự tạo của mình, mặc định thư viện nó thiết kế như vậy, gặp tình huống đó thì component của mình phải dùng forwardRef

[@thang8617]

@@F8VNOfficial ok, đã hiểu. Tks anh 😍

[@vmhchannel4663]

kênh có dạy react redux k ạ

[@HaoNguyen-br9hp]

cho em hỏi khóa học này con bao nhiêu bài nữa thì hết ạ

[@cncp246]

Chỗ component video chỉ cần sửa thành một props khác "ref" là lấy thẻ video lên bth thôi. Vậy tóm lại học cái useImperativeHandle chủ yếu để thoản mãn tính đóng gói chứ lấy nguyên component thì làm như bth không cần forwardRef gì cả đúng ko ae

[@nhattranminh7814]

nếu dùng cả 2 HOC memo và forwardRef thì thứ tự của chúng sẽ như nào là tốt nhất vậy anh?

[@nvtentertainment4098]

Tại sao lại là function Video(props,ref) trong khi bên kia mình chỉ truyền ref, props ở đây là sao nhỉ

[@tanokiddy]

ref được truyền vào forwardRef, sau đó forwardRef đẩy ref vào cho React.FC Video. Nên hiểu nôm na là ref được truyền xuống không nằm trong props.

[@minhtran-uv4nd]

Đang gặp vấn đề như thế này cái có video hướng dẫn :V

[@phamhieu3155]

a ơi, nếu e đưa 2 cái button vào trong comp Video r xử lý ở trong đấy thì có đc k ạ? vì có vẻ sẽ khiến bài toán đơn giản hơn

[@viewhh8887]

đang học cách dùng useImperativeHandle mà, có phải học cách làm 2 cái button đó đâu

[@F8VNOfficial]

Đưa vào đc em nhé, nhưng đúng như bạn trên nói đó. Trong thực tế code nó sẽ phức tạp hơn nhiều nên có nhiều tính hướng cái buttton của em nó lại bên ngoài cơ. Nên học để sau còn biết cách xử lý cho tốt em nhé

[@phamhieu3155]

@@viewhh8887 à ý mình là nếu gặp tình huống như thế thì liệu có thể đưa 2 cái button vào trong comp thì có thế gọi video.curent.play() ngay trong đó luôn ấy, thì k cần p sử dụng useImperativeHandle

[@phamhieu3155]

@@F8VNOfficial cảm ơn a

[@thanhhuytruong31]

anh ơi cho em hỏi là vì sao khi Ref truyền vào từ params của function Component Video thì làm sao nó biết cái ref đó là của thẻ video, em nghĩ lúc khởi tạo const videoRef = useRef(ref) luôn chứ ạ

[@F8VNOfficial]

Vì forwardRef nó giúp em forward ref từ conponent cha xuống mà em, nó là một tham chiếu đấy em

[@dangduylinh9587]

video này hay đó a :D

[@bernardtran3727]

úeImperativeHandle() hook ối giời ơi anh ơi

[@baonguyen7013]

E có đọc vài tài liệu thì người ta nói ko nên dùng ref, forwardRef hay hạn chế dùng HOOK này, có đúng như vậy ko a?

[@F8VNOfficial]

Đúng đó em ơi. Thực tế cũng ít khi cần dùng cái này em nhé. Ref hay dùng khi lấy element trong DOM của các phần tử thôi (thường là input, trong trường hợp cần focus vào input chẳng hạn). Lý do của việc hạn chế dùng (dùng khi thực sự cần) là vì React đã support nhiều rồi, ko cần thiết phải tương tác với DOM thật nhiều nha em.

[@amanda2348-g9j]

b đọc thông tin ở đâu nói như thế vậy?

[@tinvo5369]

đỉnh quá anh ơi.

[@juhandvan]

hay quá anh Sơn :)))

[@hoangngoc11906]

Anh Sơn ơi sai chính tả tên Video :))

[@bachkhoait4.052]

Chào anh sơn

[@DuyTran-ss4lu]

Hay quá

[@dennisnguyen5787]

a Thơn ra clip mới đi a ơiiiiii

[@minhquangnguyen7718]

Amazing video

[@thaibinhinhhuynh8135]

úe kìa anh ơi 😂😂🤣🤣

[@vinhlam8887]

Anh Sơn chưa tắt vietkey kìa :3

[@hoangdungtruong1730]

hay qua di

[@phanhaiang7052]

Lỗi tên rồi a ơi 🤣🤣🤣

[@vthh20]

Sửa tên anh Sơn ơi :v

[@K.Huynh.]

[@thienvu1377]

úeImperativeHandle() :v

[@kingnoones0s415]

Cách tải phim đúng cách :))

[@tandang7191]