+1
ReactJS - Parameterized Event Handlers
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 ạ !
Thêm một bình luận
1 CÂU TRẢ LỜI
+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
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?
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 ?
@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
