Bagaimana untuk Debounce Berkesan dalam Aplikasi React?

Bagaimanakah saya boleh melakukan nyahlantun?

Jawapan kepada soalan asal

Fungsi nyahlantun yang disediakan tidak berfungsi kerana ini tidak terikat pada fungsi handleOnChange. Untuk membetulkan perkara ini:

handleOnChange: function(event) {
    // Make Ajax call
}.bind(this)

Teknik nyahlantun moden

Janji dan cangkuk (disyorkan, 2019 )

const SearchBox = React.createClass({
render: function() {
return <input type=&quot;search&quot; name=&quot;p&quot; onChange={this.handleOnChange} />;
},
handleOnChange: function(event) {
    // Make Ajax call
  }
});

Janji melenting

import React from 'react';
import awesomeDebouncePromise from 'awesome-debounce-promise';

const SearchBox = () => {
    const [inputText, setInputText] = React.useState('');

    const debouncedSearch = React.useMemo(
        () => awesomeDebouncePromise(args => searchStarwarsHeroAsync(args), 300),
        []
    );

    // ...rest of SearchBox component
};

Panggil balik

Dengan sifat kelas ES6:

class SearchBox extends React.Component {
    method = debounce(() => {
        // ...
    });
}

Dengan pembina kelas ES6:

class SearchBox extends React.Component {
    constructor(props) {
        super(props);
        this.method = debounce(this.method.bind(this), 1000);
    }
    method() { ... }
}

Dengan ES5:

var SearchBox = React.createClass({
    method: function() {...},
    componentWillMount: function() {
        this.method = debounce(this.method.bind(this), 100);
    },
});

Mengendalikan pengumpulan acara dalam React

Dalam React, objek acara dikumpulkan dan boleh digunakan semula. Ini boleh membawa kepada isu apabila menggunakan nyahlantun atau pendikit, kerana sifat acara mungkin dikosongkan selepas panggilan balik acara dipanggil.

Untuk mengelakkan perkara ini, gunakan kaedah persist() pada objek acara. Ini akan menghalang acara daripada dikumpulkan dan membolehkan anda mengakses sifatnya secara tidak segerak.

onClick = (e) => {
    e.persist();
    // ...
};

Atas ialah kandungan terperinci Bagaimana untuk Debounce Berkesan dalam Aplikasi React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!