2019：尝试 hooks + Promise debouncing
这是我解决此问题的最新版本。我会用：
这是一些初始接线，但是您正在自己编写原始块，并且您可以创建自己的自定义挂钩，这样您只需要做一次。
// Generic reusable hook
const useDebouncedSearch = (searchFunction) => {
// Handle the input text state
const [inputText, setInputText] = useState('');
// Debounce the original search async function
const debouncedSearchFunction = useConstant(() =>
AwesomeDebouncePromise(searchFunction, 300)
);
// The async callback is run each time the text changes,
// but as the search function is debounced, it does not
// fire a new request on each keystroke
const searchResults = useAsync(
async () => {
if (inputText.length === 0) {
return [];
} else {
return debouncedSearchFunction(inputText);
}
},
[debouncedSearchFunction, inputText]
);
// Return everything needed for the hook consumer
return {
inputText,
setInputText,
searchResults,
};
};
然后你可以使用你的钩子：
const useSearchStarwarsHero = () => useDebouncedSearch(text => searchStarwarsHeroAsync(text))
const SearchStarwarsHeroExample = () => {
const { inputText, setInputText, searchResults } = useSearchStarwarsHero();
return (
<div>
<input value={inputText} onChange={e => setInputText(e.target.value)} />
<div>
{searchResults.loading && <div>...</div>}
{searchResults.error && <div>Error: {search.error.message}</div>}
{searchResults.result && (
<div>
<div>Results: {search.result.length}</div>
<ul>
{searchResults.result.map(hero => (
<li key={hero.name}>{hero.name}</li>
))}
</ul>
</div>
)}
</div>
</div>
);
};
您会发现此示例在此处运行，您应该阅读react-async-hook文档以获取更多详细信息。
2018：尝试消除承诺
我们经常希望消除 API 调用的反跳，以避免无用的请求淹没后端。
在 2018 年，使用回调（Lodash / Underscore.js）对我来说感觉很糟糕并且容易出错。由于 API 调用以任意顺序解析，因此很容易遇到样板文件和并发问题。
我创建了一个考虑到 React 的小库来解决你的痛苦：awesome-debounce-promise。
这不应该比以下更复杂：
const searchAPI = text => fetch('/search?text=' + encodeURIComponent(text));
const searchAPIDebounced = AwesomeDebouncePromise(searchAPI, 500);
class SearchInputAndResults extends React.Component {
state = {
text: '',
results: null,
};
handleTextChange = async text => {
this.setState({ text, results: null });
const result = await searchAPIDebounced(text);
this.setState({ result });
};
}
去抖功能可确保：
- API 调用将被反跳
- 去抖函数总是返回一个承诺
- 只有最后一个调用返回的承诺才会解决
this.setState({ result });每次API 调用都会发生一次
最后，如果您的组件卸载，您可以添加另一个技巧：
componentWillUnmount() {
this.setState = () => {};
}
请注意，Observables（RxJS）也非常适合消除输入的抖动，但它是一个更强大的抽象，可能更难正确学习/使用。
< 2017：仍然想使用回调去抖动？
这里重要的部分是为每个组件实例创建一个去抖动（或节流）函数。您不想每次都重新创建去抖（或节流）函数，并且不希望多个实例共享相同的去抖函数。
我没有在这个答案中定义去抖动函数，因为它并不真正相关，但是这个答案可以与_.debounceUnderscore.js 或 Lodash 以及任何用户提供的去抖动函数完美配合。
好主意：
由于去抖函数是有状态的，因此我们必须为每个组件实例创建一个去抖函数。
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);
},
});
请参阅JSFiddle：三个实例每个实例生成一个日志条目（全局为三个）。
_这不是_一个好主意：
var SearchBox = React.createClass({
method: function() {...},
debouncedMethod: debounce(this.method, 100);
});
这是行不通的，因为在类描述对象创建过程中，this对象本身并不是创建的。this.method不会返回您期望的内容，因为this上下文不是对象本身（顺便说一句，它实际上还不存在，因为它刚刚被创建）。
_这不是_一个好主意：
var SearchBox = React.createClass({
method: function() {...},
debouncedMethod: function() {
var debounced = debounce(this.method,100);
debounced();
},
});
这次，您实际上创建了一个去抖函数，该函数调用您的this.method. 问题是您在每次debouncedMethod调用时都重新创建它，因此新创建的去抖函数对以前的调用一无所知！随着时间的推移，您必须重复使用相同的去抖函数，否则去抖将不会发生。
_这不是_一个好主意：
var SearchBox = React.createClass({
debouncedMethod: debounce(function () {...},100),
});
这里有点棘手。
该类的所有已安装实例将共享相同的去抖函数，而大多数情况下这不是您想要的！请参阅JSFiddle：三个实例在全局范围内仅生成一个日志条目。
您必须为每个组件实例创建一个去抖函数，而不是在类级别创建由每个组件实例共享的单个去抖函数。
照顾 React 的事件池
这是相关的，因为我们经常想要消除或限制 DOM 事件。
在 React 中，您在回调中收到的事件对象（即SyntheticEvent）被池化（现在已记录）。这意味着在调用事件回调后，您收到的 SyntheticEvent 将以空属性放回池中，以减少GC压力。
因此，如果您SyntheticEvent与原始回调异步访问属性（如果您限制/反跳，可能会出现这种情况），您访问的属性可能会被删除。如果您希望事件永远不会被放回池中，您可以使用该persist()方法。
没有持久化（默认行为：池化事件）
onClick = e => {
alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
setTimeout(() => {
alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
}, 0);
};
第二个（异步）将打印hasNativeEvent=false，因为事件属性已被清理。
凭着坚持
onClick = e => {
e.persist();
alert(`sync -> hasNativeEvent=${!!e.nativeEvent}`);
setTimeout(() => {
alert(`async -> hasNativeEvent=${!!e.nativeEvent}`);
}, 0);
};
第二个（异步）将打印hasNativeEvent=true，因为persist允许您避免将事件放回池中。
您可以在这里测试这两种行为：JSFiddle
阅读Julen 的答案persist()，了解使用油门/去抖功能的示例。
