Làm thế nào để tránh việc cần phải binding trong React?

Trong React, việc binding this trong các phương thức event handler là một bước cần thiết nếu bạn sử dụng ES6 class components và muốn truy cập this trong các phương thức đó. Tuy nhiên, việc này có thể trở nên lặp đi lặp lại và gây rối. Dưới đây là một số cách để tránh việc cần phải binding:

1. Sử dụng Public Class Fields Syntax

Bạn có thể sử dụng cú pháp class fields trong ES6+ để khai báo các phương thức như arrow functions, điều này tự động bind this cho bạn.

class MyComponent extends React.Component {
  handleClick = () => {
    console.log(this); // 'this' tự động được bind
  }

  render() {
    return <button onClick={this.handleClick}>Click me</button>;
  }
}

2. Sử dụng Arrow Functions trong JSX

Khi truyền event handlers vào JSX, bạn có thể sử dụng arrow functions để tự động bind this mà không cần phải làm điều đó trong constructor.

class MyComponent extends React.Component {
  handleClick() {
    console.log(this); // 'this' được bind đúng cách
  }

  render() {
    return <button onClick={() => this.handleClick()}>Click me</button>;
  }
}

Tuy nhiên, cách này có thể gây ra vấn đề về hiệu suất vì mỗi lần component render, một arrow function mới sẽ được tạo ra.

3...