Mengapa Anda Harus Mengelak Fungsi Anak Panah Sebaris dalam Kaedah Reaksi Reaksi?

Mengelakkan Fungsi Anak Panah Sebaris dalam Kaedah Render

Adalah disyorkan untuk mengelakkan fungsi anak panah sebaris seperti ini._handleChange.bind(this) dalam kaedah render komponen React.

Sebab:

Semasa pemaparan semula, React akan mencipta kaedah baharu dan bukannya menggunakan semula kaedah lama. Ini boleh menjejaskan prestasi dengan menyebabkan penciptaan fungsi dan peruntukan memori yang tidak diperlukan.

Alternatif:

Terdapat beberapa cara untuk memintas fungsi anak panah mengikat dalam kaedah pemaparan:

1. Pengikatan Pembina:

• Ikat kaedah dalam pembina: this._handleChange = this._handleChange.bind(this);

• Contoh:

  class MyClass extends React.Component {
     constructor(props) {
        super(props);
        this._handleChange = this._handleChange.bind(this);
     }
  
     _handleChange() {
        // ...
     }
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

2. Sintaks Pemula Harta:

• Tentukan kaedah menggunakan sintaks pemula sifat: _handleChange = () => { ... };

• Contoh:

  class MyClass extends React.Component {
     _handleChange = () => {
        // ...
     };
  
     render() {
        return <input onChange={this._handleChange} />;
     }
  }

3. Pengendalian Acara dengan Fungsi Panggilan Balik:

• Buat fungsi panggil balik berasingan yang menerima hujah yang diperlukan:

• Contoh:

  class MyClass extends React.Component {
     handleDeleteTodo = (todo) => {
        // ...
     };
  
     render() {
        return todos.map((todo) => (
           <div key={todo}>
              <input onChange={this.handleDeleteTodo.bind(this, todo)}>
              {todo}
           </div>
        ));
     }
  }

4. Fungsi Anak Panah Skop Komponen:

• Isytihar fungsi anak panah di luar kaedah render tetapi dalam skop kelas komponen:

• Contoh:

  class MyClass extends React.Component {
      _handleDeleteTodo = (todo) => {
         // ...
      };
  
      render() {
         return todos.map((todo) => (
            <div key={todo} onClick={this._handleDeleteTodo.bind(this, todo)}>
               {todo}
            </div>
         ));
      }
  }

5. Pengendali Acara Luaran:

• Pindahkan logik pengendalian acara ke komponen luaran atau fungsi pembantu untuk mengelakkan ikatan dalam kaedah pemaparan:

• Contoh:

  const handleDeleteTodo = (todo) => {
     // ...
  };
  
  class MyClass extends React.Component {
     render() {
        return todos.map((todo) => (
           <MyComponent todo={todo} onDelete={handleDeleteTodo} />
        ));
     }
  }
  
  class MyComponent extends React.Component {
     render() {
        return <div onClick={this.props.onDelete.bind(this, this.props.todo)}>{this.props.todo}</div>;
     }
  }

Alternatif ini menawarkan kaedah yang cekap untuk mengendalikan peristiwa dalam komponen React tanpa mengorbankan prestasi atau memperkenalkan pengikatan fungsi yang tidak perlu.

Atas ialah kandungan terperinci Mengapa Anda Harus Mengelak Fungsi Anak Panah Sebaris dalam Kaedah Reaksi Reaksi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!