提供的去抖動功能不起作用，因為它未綁定到處理更改函數。要解決這個問題：
handleOnChange: function(event) {
// Make Ajax call
}.bind(this)Promise 和hooks（推薦，2019）
const SearchBox = React.createClass({
render: function() {
return <input type="search" name="p" 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);
},
});要避免這種情況，請在事件物件上使用 persist() 方法。這將防止事件被池化並允許您非同步存取其屬性。
以上是如何在React應用程式中有效地去抖？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
