Yêu cầu thg 11 29, 2018 8:49 SA 106 0 1
  • 106 0 1
+1

ReactJS - Parameterized Event Handlers

Chia sẻ
  • 106 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 CÂU TRẢ LỜI


Đã trả lời thg 11 29, 2018 9:04 SA
Đã được chấp nhận
+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

Chia sẻ
Avatar Dao Thai Son @dao.thai.son
thg 11 29, 2018 9:12 SA

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?

Avatar Hoang vn @wiliamfeng
thg 11 29, 2018 9:22 SA

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 ?

thg 11 29, 2018 10:14 SA

@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

Avatar Hoang vn @wiliamfeng
thg 11 30, 2018 2:16 SA

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

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí