Mengapa Fungsi `onClick` React Saya Mencetuskan Semasa Perenderan dan Cara Menghalangnya?

React onClick Function Triggers on Render: Why and How to Prevention It

Dalam aplikasi React, mencipta komponen tersuai selalunya melibatkan penghantaran data dan fungsi kepada komponen kanak-kanak. Apabila berurusan dengan senarai objek dan fungsi padam, anda mungkin menghadapi masalah apabila fungsi onClick menyala semasa pemaparan dan bukannya apabila diklik.

Contoh Kod:

Pertimbangkan kod berikut:

const TaskList = React.createClass({
  render: function() {
    const tasks = this.props.todoTasks.map(todo => (
      <div>
        {todo.task}
        <button type="submit" onClick={this.props.removeTaskFunction(todo)}>
          Submit
        </button>
      </div>
    ));
    return (
      <div className="todo-task-list">{tasks}</div>
    );
  },
});

Penjelasan Isu:

Isu timbul kerana kod kami menggunakan this.props.removeTaskFunction(todo) dan bukannya hanya menghantar berfungsi untuk onClick. Seruan segera ini menyebabkan fungsi dilaksanakan semasa pemaparan.

Penyelesaian:

Untuk menyelesaikan masalah ini, kita boleh menggunakan fungsi anak panah, seperti yang dilihat dalam kod berikut:

<button type="submit" onClick={() => this.props.removeTaskFunction(todo)}>

Fungsi Anak panah dalam React:

Fungsi anak panah, dilambangkan dengan () => {}, ialah sintaks ringkas yang diperkenalkan dalam ES6. Ia memberikan beberapa faedah untuk pembangunan React:

• Prestasi yang Dipertingkat: Dengan menggunakan fungsi anak panah, anda mengelakkan pemaparan semula yang tidak disengajakan disebabkan oleh pengikatan konteks.
• Fleksibiliti: Fungsi anak panah boleh dihantar terus ke fungsi tertib lebih tinggi sebagai panggilan balik atau pengendali acara.
• Kebolehbacaan yang Lebih Baik: Fungsi anak panah memudahkan kod dengan menghapuskan keperluan untuk ikatan eksplisit( ) kenyataan.

Oleh itu, dengan menukar pengendali onClick kepada fungsi anak panah, kami boleh memastikan bahawa fungsi padam hanya dilaksanakan apabila butang diklik, menghalang pelaksanaan yang tidak disengajakan semasa pemaparan.

Atas ialah kandungan terperinci Mengapa Fungsi `onClick` React Saya Mencetuskan Semasa Perenderan dan Cara Menghalangnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!