Bagaimana untuk Mengelakkan Isu Prestasi Apabila Mengikat atau Menggariskan Fungsi Anak Panah dalam Kaedah Render React?

Cara Mengelakkan Fungsi Anak Panah Bind atau Inline Di Dalam Kaedah Render

Dalam komponen React, adalah penting untuk mengelakkan fungsi anak panah mengikat atau menyelaras dalam kaedah pemaparan untuk mengoptimumkan prestasi . Semasa pemaparan semula, kaedah baharu dicipta dan bukannya menggunakan semula yang lama, mengakibatkan isu prestasi.

Pertimbangkan contoh berikut:

<input onChange={this._handleChange.bind(this)} />

Untuk menangani perkara ini, kami boleh mengikat _handleChange kaedah dalam pembina:

constructor(props) {
  super(props);
  this._handleChange = this._handleChange.bind(this);
}

Atau, sebagai alternatif, kita boleh menggunakan sintaks pemula sifat:

_handleChange = () => {};

Walau bagaimanapun, cabaran timbul apabila kita perlu menghantar parameter tambahan kepada pengendali onClick . Contohnya, dalam apl todo, kita mungkin perlu memadamkan item daripada tatasusunan berdasarkan indeks atau namanya.

todos.map(el => <div key={el} onClick={this._deleteTodo.bind(this, el)}>{el}</div>)

Pendekatan ini mencipta panggilan balik baharu dengan setiap pemaparan komponen, seperti yang dinyatakan dalam dokumentasi .

Alternatif untuk Mengikat Di Dalam Kaedah Render

1. Cipta Komponen Kanak-kanak:

Alihkan kandungan di dalam fungsi peta ke komponen anak yang berasingan dan hantar nilai sebagai prop. Dengan cara ini, fungsi boleh dipanggil daripada komponen anak dan menghantar nilai kepada fungsi yang diturunkan sebagai prop.

Ibu bapa:

deleteTodo = (val) => {
  console.log(val);
};

todos.map((el) => <MyComponent val={el} onClick={this.deleteTodo} />);

Komponen Kanak-Kanak (Komponen Saya):

class MyComponent extends React.Component {
  deleteTodo = () => {
    this.props.onClick(this.props.val);
  };

  render() {
    return <div onClick={this.deleteTodo}>{this.props.val}</div>;
  }
}

Contoh Coretan:

class Parent extends React.Component {
  _deleteTodo = (val) => {
    console.log(val);
  };

  render() {
    var todos = ['a', 'b', 'c'];
    return (
      <div>
        {todos.map((el) => (
          <MyComponent key={el} val={el} onClick={this._deleteTodo} />
        ))}
      </div>
    );
  }
}

class MyComponent extends React.Component {
  _deleteTodo = () => {
    console.log('here');
    this.props.onClick(this.props.val);
  };

  render() {
    return <div onClick={this._deleteTodo}>{this.props.val}</div>;
  }
}

ReactDOM.render(<Parent />, document.getElementById('app'));

Dengan melaksanakan alternatif ini, kita boleh mengelakkan fungsi anak panah mengikat atau menyebaris di dalam kaedah render, memastikan prestasi yang betul dan kebolehgunaan semula komponen.

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Isu Prestasi Apabila Mengikat atau Menggariskan Fungsi Anak Panah dalam Kaedah Render React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!