React 애플리케이션에서 효과적으로 디바운싱하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

React 애플리케이션에서 효과적으로 디바운싱하는 방법은 무엇입니까?

Mary-Kate Olsen

풀어 주다： 2024-12-09 16:05:11

원래의

433명이 탐색했습니다.

How to Effectively Debounce in React Applications?

디바운스를 어떻게 수행하나요?

원래 질문에 대한 답변

제공된 디바운스 기능은 handlerOnChange 함수. 이 문제를 해결하려면:

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

로그인 후 복사

최신 디바운싱 기술

Promise 및 Hooks(권장, 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
  }
});

로그인 후 복사

Promise 디바운싱

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

로그인 후 복사

콜백

ES6 클래스 속성 사용:

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

로그인 후 복사

ES6 클래스 생성자 사용:

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

로그인 후 복사

함께 ES5:

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

로그인 후 복사

React에서 이벤트 풀링 처리

React에서는 이벤트 객체가 풀링되어 재사용될 수 있습니다. 이벤트 콜백이 호출된 후 이벤트 속성이 지워질 수 있으므로 디바운스 또는 조절을 사용할 때 문제가 발생할 수 있습니다.

이를 방지하려면 이벤트 객체에서 persist() 메서드를 사용하세요. 이렇게 하면 이벤트가 풀링되는 것을 방지하고 해당 속성에 비동기적으로 액세스할 수 있습니다.

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

로그인 후 복사

위 내용은 React 애플리케이션에서 효과적으로 디바운싱하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!