Mengapa Anda Harus Mengelak Menggunakan Fungsi Bind dan Anak Panah Sebaris dalam Kaedah Render React?

Fungsi Anak Panah Ikat dan Sebaris dalam Kaedah Render: Akibat dan Alternatif

Pengenalan:

Dalam React, prestasi pemaparan boleh terjejas jika pengikatan kaedah atau fungsi anak panah sebaris digunakan dalam kaedah render. Ini kerana ia boleh mencetuskan penciptaan kaedah baharu dan bukannya menggunakan semula kaedah sedia ada, mengakibatkan potensi kehilangan prestasi.

Mengelakkan Pengikatan dalam Kaedah Render:

Untuk mengelakkan pengikatan isu dalam kaedah render, terdapat beberapa pendekatan:

• Mengikat dalam Pembina: Kaedah boleh diikat dalam pembina menggunakan this.methodName = this.methodName.bind(this);.
• Sintaks Pemula Harta: Sifat boleh dimulakan sebagai fungsi anak panah terus dalam kelas, seperti dalam: methodName = () => {...}.

Mengatasi Parameter yang Melepasi dalam Pengikatan:

Apabila ia datang untuk menghantar parameter tambahan dalam pengikatan, terdapat pendekatan alternatif untuk mengelakkan sebaris anak panah berfungsi dalam kaedah pemaparan:

• Mencipta Tersuai Komponen: Logik khusus komponen boleh dibalut dalam komponen anak yang berasingan, menghantar prop yang diperlukan dan mengendalikan acara onClick di dalamnya.
• Menggunakan Fungsi Anak Panah dalam Skop Luar: Anak Panah fungsi boleh ditakrifkan di luar kaedah render, menghantar parameter tambahan sebagai argumen kepada mereka fungsi.

Sampel Kod:

Berikut ialah contoh pelaksanaan pendekatan alternatif yang dinyatakan di atas:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  // Binding in constructor
  handleClick() {
    console.log("Constructor binding");
  }

  // Property initializer syntax
  deleteTodo = () => {
    console.log("Property initializer binding");
  };

  handleClickWithArgs = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  render() {
    // Arrow function in constructor (no extra parameters)
    return (
      <div onClick={this.handleClick}>
        {" "}
        Click Me Constructor Binding{" "}
      </div>
    );
  }
}

function App() {
  const todos = ["a", "b", "c"];

  // Using arrow functions in the outer scope
  const handleDeleteTodo = (el) => {
    console.log(`Delete todo: ${el}`);
  };

  return (
    <div>
      {todos.map((el) => (
        <MyComponent key={el} onClick={handleDeleteTodo} />
      ))}
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

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