-
Notifications
You must be signed in to change notification settings - Fork 3
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
S2 - L29 - Video Selection #7
Comments
Sau đấy Stephen có nói là nếu ai vào sau bảo trì code thì sẽ phải mò tìm khá mệt để biết cái onVideoSelect nó ở đâu và làm gì. Em xem hết section2 rồi mà ko thấy Stephen nói cách sửa, em đoán là tiếp trong Redux. |
@hungHoangDang : đọc cái bài anh comment ở trên nhé. Anh chưa biết là có hiểu chính xác hay chưa, nhưng cứ tạm coi như sau: App (level 1) // hàm callback được khai báo ở đây
|
|---- VideoList (level 2) // hàm callback được truyền xuống đây
|
| --- VideoListItem (level 3) // hàm calaback được truyền tiếp xuống đây, và nhận tham số ở level 3 Vậy là khai báo ở level 1, nhưng nhận đủ tham số ở level e, khi thực thi vẫn coi như đang thực thi ở level 1 nhờ Data sẽ chạy ngược từ child lên parent. |
Trong bài ở kipalog ấy ạ, đoạn này ý anh là
Từ đấy thì em có thể suy ra được là sau khi click event ở VideoListItem sẽ chạy đến App để setState render tất cả mọi thứ lại. Anh thấy có hợp lý ko? |
@hungHoangDang : ừ, anh cũng đang hiểu như vậy. Hàm nó truyền xuôi (từ level 1 -> 3), sau khi nhận đủ "vật tư" (tức là object), thì lại đi ngược (từ level 3 -> level 1) để thực thi. |
Phần này nói đến vụ truyền props và thay đổi state làm mình bất ngờ.
Nhu cầu ban đầu là gì? Đó là khi click chọn vào 1 trong các ô trong phần Video List, thì ô Video Detail sẽ tự động thay đổi, chuyển sang video vừa được chọn.
Vậy tác giả đã hướng dẫn làm như thế nào?
Ý tưởng chung: Sử dụng callback, truyền từ App -> Video List -> Video_list_item -> thay đổi Video_Detail
onVideoSelect
. Chưa nói đến vụ đây là callback, function này có tác dụng nhận vào 1 object video, rồi truyền sang cho hàmsetState()
để đặt lại state của App, cụ thể là properties selectedVideo. Một khi hàm này được gọi, state của App thay đổi, nghĩa là React sẽ render lại những component liên quan đến phần thay đổi trong App, ở đây là selectedVideo, dẫn đến componentVideoDetail
sẽ được render lại.onVideoSelect
(cùng tên).onClick
của element<li>
. Nghĩa là khi bạn<li>
này bị click chọn, thì function kia được gọi. Event handleronClick
của bạn<li>
này sẽ truyền vào object video cho function, vậy là xong, fucntion đã có đủ mọi thứ để chạy. Và nó chạy giống như mục đích đặt ra, đã nói ở bước 1.Hay ở chỗ function nói trên đã "du lịch xuống" 2 level:
Đến tận VideoListItem, nó mới được truyền vào tham số để chạy. Kết quả chạy này, lại có tác dụng kích động phản ứng ở tận ... App. Quá ngạc nhiên.
Theo cái hiểu hiện tại, mỗi component đều có state riêng, method
setState()
ở component nào sẽ có tác dụng chỉ với component đấy. Vậy mà mà methodsetState()
kia chu du tận đâu, vậy mà vẫn quay về thay đổi component mà ban đầu nó được gửi đi.The text was updated successfully, but these errors were encountered: