Em cảm ơn anh đã chia sẻ, bài viết rất hay ạ 👍
Anh cho em hỏi thêm một chút: Ngoài cách này ra mình cũng có thể check trong shouldComponentUpdate() cũng là một cách đúng ko ạ?
Giả sử là có thì với ví dụ trên, em kiểm tra hàm click() kia trong lifecycle này như thế nào được nhỉ? (bow)

Đúng lúc mình đang cần tài liệu, cảm ơn bạn.

Chắc là đùa :>

cảm ơn bạn

Ó sầm 👍 Cảm ơn bạn nha =))

Cám ơn Add nhiều. Mình đã tự làm được. Reg: (?<=({"access_token")(.*)(?=",) Một lần nữa cám ơn bài viết rất hữu ích.

bạn đang muốn reuse lại hàm getPostList nhỉ, có vài cách tùy nhu cầu thực tế?

1. chuyển hết logic của nó vào 1 cái saga, 2 component kia chỉ dispatch action (thông dụng nhất nhưng phải lắp lắm toy: redux, redux-saga)
2. chuyển logic vào 1 hàm đặt ở component cha (đơn giản nhất nhưng 2 component sẽ bị ràng buộc về quan hệ)
3. viết custom hook (chỉ áp dụng cho functional component)
4. viết HOC (ngày xưa chưa có hook thì người ta hay dùng HOC)

nhưng trong ví dụ của bạn thì dùng cách nào cũng sida cả, vì vấn đề chính là: state của bạn đang để ở local component => bạn nên quay lại fix design như a @cuong_nguyen đề xuất thay vì quấn theo chiều gió :v, tức:

1. gói 2 thằng vào component cha
2. đẩy state và logic getPostList lên component cha
3. viết custom hook để lược bỏ logic của getPostList khỏi component cha

=> vừa đơn giản, vừa gọn, vẹn đôi đường (t hiểu đây là dự án chơi chơi thôi nhé chứ thực tế phải lắp redux vào r xài cách 1)

Cảm ơn bác đã chia sẻ. có lẽ bác nên đặt lại cái tiêu đề để user đọc được cái này làm gì cho cái gì luôn. Đọc 1 đoạn mới biết là chỉ dành cho bên Nhật =))

Cảm ơn tác giả vì bài quá rất dễ hiểu.

Bài viết tiếp theo của phần này là gì vậy ah???

"this" nó ko chỉ đơn giản là "trả về object gần nhất chứa nó", mà chính xác hơn là callsite gần nhất (chỗ mà nó đc gọi ra), tức là muốn biết "this" là cái gì thì bạn phải dựa vào callstack, chứ ko thể nhìn code đoán đc. Ngoài ra, còn có rất nhiều trường hợp bind loạn xị ngậu của "this" mà người dùng phải lưu ý. T lấy 1 ví dụ đơn giản của việc lost binding như sau:

a = "outside"
function foo() { console.log(this.a) }
obj = {a: "inside", foo: foo}

obj.foo()    // inside  => callstack là: main --- obj --- foo => this trỏ vào obj

bar = obj.foo

bar()   // outside => callstack là: main --- bar  => this trỏ vào global

Như vậy thì "this" khá là tricky nên sử dụng phải nhớ rõ các luật ưu tiên của nó (thứ tự ưu tiên giảm dần):

1. bind vào object nếu dùng new MyObj
2. bind theo đối tượng ta chỉ định khi bind, call, apply
3. dựa trên callsite (bằng cách kiểm tra call stack chứ ko phải đọc code xem nó gần thằng nào nhất)
4. nếu ko bind vào đâu thì nó sẽ bind vào global (bật strict mode lên thì thành "undefined"

Chỉ bằng JS thuần với vài dòng code thế này đã cover được 1 mớ tính năng HAY và CẦN cho Upload File rồi!

Cảm ơn tác giả nhiều 👍

Cảm ơn bạn tác giả. Giờ thì mình biết thêm nhiều loại template engine hay quá!

tiền điện nhiều hơn tiền pin đó bạn ạ

Chị viết bài nội dung hay, văn phong đáng yêu quá ạ (cute)

Code hay quá bạn ơi, từ nay tớ có thể dùng code này chạy liên tục 24/7 + treo máy tính lên tường thay thế cho đồng hồ rẻ tiền ở nhà rồi!

Nếu là array thì nó vẫn parse ra được array mà

<router-link :to="{ name: 'page-1', query: { tags: ['a', 'b'] } }">page 1</router-link>

export default {
  name: "page-1",

  beforeRouteEnter: (to, from, next) => {
    console.log("Page 1", to.query.tags);
    next();
  }
};

@huukimit Ngoài ra còn 1 case như này: giả sử query có 1 mảng 1 phần tử:

query: { 
  tags: ['js']
}

Sau khi redirect, object route nhận được trong 2 trường hợp sẽ khác nhau:

• Trường hợp có stringify và parse.

query: { 
  tags: ['js']
}

• Trường hợp không có stringify và parse.

query: { 
  tags: 'js'
}

Như vậy query.tags lúc này trả về một string thay vì array, nếu ko để ý thì có thể sẽ toang chỗ đó.

cảm ơn bạn đã góp ý