Bagaimana untuk Debounce Berkesan dalam Aplikasi React?-tutorial js-php.cn

Bagaimana untuk Debounce Berkesan dalam Aplikasi React?

Mary-Kate Olsen

Lepaskan： 2024-12-09 16:05:11

asal

433 orang telah melayarinya

How to Effectively Debounce in React Applications?

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)

Salin selepas log masuk

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

Salin selepas log masuk

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
};

Salin selepas log masuk

Panggil balik

Dengan sifat kelas ES6:

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

Salin selepas log masuk

Dengan pembina kelas ES6:

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

Salin selepas log masuk

Dengan ES5:

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

Salin selepas log masuk

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();
    // ...
};

Salin selepas log masuk

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