Asked Nov 29th, 2018 8:49 AM 103 0 1
  • 103 0 1
+1

ReactJS - Parameterized Event Handlers

Share
  • 103 0 1

Chào mọi người, trong quá trình học React mình có tham khảo được bài viết này: https://medium.freecodecamp.org/reactjs-pass-parameters-to-event-handlers-ca1f5c422b9

Mình đọc đến phần Using ES6 arrow function thì mình hiểu mục đích dùng arrow function để tránh phải sử dụng bind. Sau đó họ có phân tích thế này mình xin trích dẫn ở đây :

The problem with both above syntax is that a different callback instance is created each time the component is rendered, same as with the bind function.

To avoid creating a brand new callback instance on every render, we can use property initializer syntax to correctly bind callbacks.

Rồi họ khuyên nên làm theo cách bên dưới. Nhưng mình chưa hiểu đoạn họ phân tích ở trên về việc dùng arrow function theo cách thứ nhất có nhược điểm như thế nào.

Bạn nào có thể giải thích kỹ hơn giúp mình với được không ? Mình xin cám ơn nhiều ạ !

1 ANSWERS


Answered Nov 29th, 2018 9:04 AM
Accepted
+7

Bạn có thể hiểu cơ bản như sau với cách cách dùng arrow function thứ nhất:

handleClick(param, e) {
  console.log('Parameter', param);
  console.log('Event', e);
}

render() {
  <button onClick={(e) => this.handleClick(param, e)}></button>
}

thì mỗi lần hàm render() được gọi thì nó sẽ phải tạo lại cái instance của hàm handleClick rồi gán vào cái sự kiện onClick mà bạn khai báo. Còn với cách dùng thứ 2:

handleClick = (e) => {
  console.log('Event', e);
}

render() {
  <button onClick={this.handleClick}></button>
}

sẽ tránh được việc tạo lại mỗi lần hàm render() được phải tạo lại cái instance nói trên kia mà nó sẽ dùng lại cái instance tạo ra lần đầu render

Share
Avatar Dao Thai Son @dao.thai.son
Nov 29th, 2018 9:12 AM

Dùng bind ở trong constructor thì sẽ chỉ phải khởi tạo 1 lần context cho this, còn dùng arrow func thì mỗi lần gọi tới sẽ có lại 1 instance this mới, đúng ko?

+3
| Reply
Share
Avatar Hoang vn @wiliamfeng
Nov 29th, 2018 9:22 AM

bạn ơi bạn có thể giải thích thêm cho mình chỗ này :

với cách thứ nhất thì mỗi lần hàm render() được gọi thì nó sẽ phải tạo lại cái instance của hàm handleClick rồi gán vào cái sự kiện onClick mà bạn khai báo

với được không ? Tại sao phải tạo lại cái instance của hàm handleClick hả bạn ?

0
| Reply
Share
Nov 29th, 2018 10:14 AM

@wiliamfeng trường hợp thứ nhất của arrow function nó sẽ giống như phần này

render() {
  <button onClick={this.handleClick.bind(this, 'Parameter')}></button>
}

mỗi lần chạy render nó sẽ phải tạo lại hàm handleClick kia rồi mới gán vào sự kiện onClick của bạn. Còn với cách thứ 2 của arrow function thì hàm handleClick sẽ được tạo từ đầu và được lưu trữ lại để sau đó khi bạn chạy lại hàm handleClick nó sẽ dùng cái hàm đã lưu trữ đó luôn chứ không cần tạo lại

+2
| Reply
Share
Avatar Hoang vn @wiliamfeng
Nov 30th, 2018 2:16 AM

@HuyDQ . Cám ơn bạn nhiều nha

+1
| Reply
Share
Viblo
Let's register a Viblo Account to get more interesting posts.