2019 年：尝试钩子 + Promise去抖动
这是我如何解决这个问题的最新版本。我会用：
这是一些初始接线，但您正在自己组合原始块，并且您可以制作自己的自定义钩子，这样您只需要做一次。
// 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 年：尝试Promise去抖动
我们经常希望对 API 调用进行 debounce，以避免用无用的请求淹没后端。
在 2018 年，使用回调（Lodash/Underscore）让我感觉很糟糕并且容易出错。由于 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 调用将被去抖动
- 去抖动函数总是返回一个promise
- 只有最后一次调用返回的Promise会解决
this.setState({ result });每个 API 调用都会发生一个
最后，如果您的组件卸载，您可以添加另一个技巧：
componentWillUnmount() {
this.setState = () => {};
}
请注意，Observables (RxJS) 也非常适合输入去抖动，但它是一种更强大的抽象，可能更难正确学习/使用。
< 2017：还想用回调去抖？
这里的重要部分是为每个组件实例创建单个去抖动（或节流）函数。您不想每次都重新创建去抖动（或节流）功能，并且您不希望多个实例共享相同的去抖动功能。
我没有在这个答案中定义去抖动函数，因为它并不是真正相关的，但是这个答案_.debounce对于下划线或 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：3 个实例为每个实例生成 1 个日志条目（全局生成 3 个）。
不是一个好主意：
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调用时都重新创建它，所以新创建的 debounce 函数对以前的调用一无所知！随着时间的推移，您必须重用相同的去抖动函数，否则去抖动将不会发生。
不是一个好主意：
var SearchBox = React.createClass({
debouncedMethod: debounce(function () {...},100),
});
这在这里有点棘手。
该类的所有挂载实例都将共享相同的去抖动函数，而且大多数情况下这不是您想要的！请参阅JsFiddle：3 个实例在全球范围内仅生成 1 个日志条目。
您必须为每个组件实例创建一个去抖动函数，而不是每个组件实例共享的类级别的单个去抖动函数。
照顾 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允许您避免将事件放回池中。
您可以在此处测试这 2 种行为：JsFiddle
阅读Julen 的回答，了解使用persist()油门/去抖功能的示例。