Mengapa Anda Perlu Mengelakkan Fungsi Ikatan atau Anak Panah Sebaris dalam Kaedah Render React?

Mengelakkan Fungsi Ikatan atau Anak Panah Sebaris dalam Kaedah Render

Pengenalan

Fungsi pengikat atau penggunaan fungsi anak panah sebaris dalam kaedah pemaparan tidak digalakkan dalam React kerana ia boleh mencipta isu prestasi semasa pemaparan. Artikel ini meneroka alternatif kepada amalan ini dan memberikan contoh pelaksanaannya.

Isu dengan Binding in Render

Apabila fungsi mengikat atau menggunakan fungsi anak panah sebaris dalam pemaparan, yang baharu contoh fungsi dicipta dengan setiap kitaran rendering. Ini boleh membawa kepada kemerosotan prestasi, terutamanya dalam kes pemaparan semula yang kerap.

Alternatif untuk Mengikat

• Menggunakan Pembina Komponen:

  • Ikat fungsi dalam pembina untuk menggunakan semula kejadian yang sama semasa pemaparan.

• Menggunakan Sintaks Pemula Harta:

  • Isytihar fungsi dalam badan kelas dan tetapkan kepada sifat menggunakan fungsi anak panah secara langsung.

Senario: Lulus Parameter Tambahan

Pertimbangkan kes menghantar parameter tambahan kepada pengendali acara dalam fungsi peta. Sebagai contoh, pertimbangkan untuk memadamkan item daripada senarai tugasan:

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

Penyelesaian: Komponen Kanak-kanak

Untuk mengelak daripada mengikat, buat komponen kanak-kanak untuk kandungan yang dipetakan:

Komponen Induk:

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

)

Komponen Anak (Komponen Saya):

class MyComponent extends React.Component {
    deleteTodo = () => {
        this.props.onClick(this.props.val);
    }
    render() {
       return <div  onClick={this.deleteTodo}> {this.props.val} </div>
    }
}

Dalam pendekatan ini, fungsi pengendali acara berada dalam komponen kanak-kanak, memberikan prestasi yang lebih baik semasa pemaparan.

Contoh:

Berikut ialah contoh lengkap yang menunjukkan pendekatan komponen kanak-kanak:

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'));

Atas ialah kandungan terperinci Mengapa Anda Perlu Mengelakkan Fungsi Ikatan atau Anak Panah Sebaris dalam Kaedah Render React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!